Public
Wspólna lista zakupów Agi i Dominika (mobile)
reactshopping-listsqlite
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.

Zakupy — wspólna lista Agi i Dominika

Mobilna lista zakupów (Android, instalowana jako aplikacja) synchronizowana między telefonami.

  • PIN — lista otwiera się dopiero po wpisaniu PIN-u; telefon pamięta go przez rok od ostatniego użycia.
  • Dotknięcie produktu = kupione (przekreślenie w kolorze osoby, która kupiła).
  • Cofnij — usunięcie produktu lub „Usuń kupione” można cofnąć przez 5 sekund.
  • Jestem w sklepie — druga osoba widzi status na górze listy i dostaje powiadomienie.
  • Powiadomienia push — gdy ktoś jest w sklepie, a druga osoba dopisze produkty.
  • Offline — aplikacja startuje bez sieci, a zmiany czekają w kolejce na telefonie i wysyłają się same po powrocie połączenia.

Zmienne środowiskowe

  • LISTA_PIN — PIN do listy. Zmiana wylogowuje wszystkie telefony.
  • SESSION_SECRET — klucz do podpisywania ciasteczka sesji.
  • VAPID_PUBLIC_KEY, VAPID_PRIVATE_KEY — klucze Web Push. Zmiana wymaga ponownego włączenia powiadomień na telefonach.

👉 Add LISTA_PIN here: https://www.val.town/x/dominik1/lista-zakupow/environment-variables?key=LISTA_PIN

Struktura

  • index.ts — serwer Hono: strona, manifest, ikony, service worker, API
  • backend/db.ts — SQLite (lista, historia, status zakupów, subskrypcje push, próby PIN-u)
  • backend/auth.ts — PIN i ciasteczko sesji
  • backend/ops.ts — walidacja zmian przysyłanych z telefonów
  • backend/push.ts — powiadomienia Web Push
  • shared/ — typy i logika zmian wspólna dla serwera i przeglądarki
  • frontend/sync.ts — kolejka zmian offline i synchronizacja
  • frontend/sw.js — service worker (praca offline, powiadomienia)
  • frontend/components/ — interfejs React