Device Ping – React demo app

Jednoduchá React aplikácia na odoslanie údajov o zariadení (UUID a stav batérie) na endpoint POST /api/ping.

Funkcionalita

• Formulár s poľami uuid (text) a battery_percent (číslo 0–100)
• Validácia na fronte (povinné polia, rozsah batérie)
• Odoslanie cez fetch na /api/ping
• Loading stav pri odosielaní
• Správy o úspechu (Data sent successfully) alebo chybe

Technológie

• React (funkčné komponenty, useState)
• TypeScript
• React Router (vrátane serverového endpointu /api/ping pre lokálny vývoj)
• Tailwind CSS
• Vitest (testy validácie)

Spustenie projektu

Inštalácia závislostí

npm install

Vývojový server

npm run dev

Aplikácia beží na http://localhost:5173.

Konfigurácia API (env)

Skopíruj .env.example do .env a nastav URL backendu:

cp .env.example .env

# Prázdne = lokálny handler v app/routes/api.ping.ts
VITE_API_URL=

# Externý backend:
# VITE_API_URL=http://localhost:3000

URL sa používa v app/api/ping.ts → {VITE_API_URL}/api/ping.

Testy

npm test

Typecheck

npm run typecheck

Produkčný build

npm run build

Štruktúra

app/
├── api/ping.ts              # API volanie (fetch)
├── components/
│   ├── DevicePingForm.tsx   # Hlavný formulár
│   └── StatusMessage.tsx    # Success / error správa
├── lib/
│   ├── validation.ts        # Validácia formulára
│   └── validation.test.ts   # Unit testy validácie
└── routes/
    ├── home.tsx             # Domovská stránka
    └── api.ping.ts          # Serverový handler POST /api/ping

API

Request

POST /api/ping
Content-Type: application/json

{
  "uuid": "550e8400-e29b-41d4-a716-446655440000",
  "battery_percent": 85
}

Response (200)

{
  "message": "Data sent successfully"
}