Quest: Aplikacja z synchronizacją

Zadanie polega na przygotowaniu aplikacji webowej. Funkcjonalność aplikacji ma zostać zaprojektowana samodzielnie, najlepiej tak by realizowała własne potrzeby twórcy aplikacji. Może to być na przykład:

• Aplikacja „Zakupy rodzinne”
• TaskFlow — lista zadań
• Notes / Wiki klasowe
• Dziennik treningów / nawyków
• Magazyn sprzętu

Ocenie podlegać będzie samodzielna realizacja projektu, w szczególności systematyczny rozwój aplikacji udokumentowany historią repozytorium Git (commity, zakres i chronologia zmian). Na potrzeby oceny należy przygotować działający build aplikacji hostowany na publicznie dostępnym serwerze oraz udostępnić link do repozytorium Git zawierającego kompletny kod źródłowy projektu wraz z historią zmian umożliwiającą weryfikację indywidualnego wkładu i procesu rozwoju aplikacji.

Frontend (React)

• React + Vite
• useState, useEffect, useContext
• podział na komponenty
• formularze kontrolowane
• komunikacja z API (fetch lub axios)
• mile widziany routing (organizacji aplikacji, podziału na widoki, sensowny URL, prosta ale porządna nawigacja)
• mile widziana autoryzacja JWT

Offline

• przechowywanie danych lokalnie: IndexedDB lub localStorage (ewentualnie plik)
• wbudowane w przeglądarkę wykrywanie offline/online:navigator.onLine
• synchronizacja po odzyskaniu internetu

Synchronizacja

• lokalna kopia danych
• flaga synced
• endpoint /sync (wysyłanie wszystkich lokalnych danych, albo wszystkich zmian)

Backend

• Opcja PHP: PHP 8+, REST API, JSON, PDO, MySQL
• Opcja Node: Express, websockety, MySQL2 lub Prisma

Przykładowe minimalne endpointy API

GET /items
POST /items
PUT /items/:id
DELETE /items/:id
POST /sync

GET /items
POST /items
PUT /items/:id
DELETE /items/:id
POST /sync

Algorytm synchronizacji (prosty)

1. zapis lokalny natychmiast
2. rekord dostaje synced: false
3. po internecie:
   • wysłanie zmian
   • backend aktualizuje MySQL
   • frontend ustawia synced: true