GymLog: offline-first in palestra
In palestra la rete non c'è. Un'app di logging deve funzionare senza, e sincronizzare dopo. Le scelte tecniche dietro GymLog PWA.
GymLog è la PWA con cui registro ogni allenamento e le metriche giornaliere: peso, nutrizione, sonno, stress, energia. È online su gymlogpwa.pages.dev, installabile sul telefono.
Il vincolo
Le palestre sono spesso seminterrati con poca copertura. Un’app che si blocca a metà serie perché aspetta il server è inutilizzabile. Il requisito è quindi offline-first: ogni azione deve funzionare in locale, istantaneamente, e la sincronizzazione avviene quando torna la rete.
Lo stack
- React 18 + Vite + TypeScript, Tailwind e shadcn/ui per l’interfaccia.
- Supabase: Postgres, autenticazione e Row Level Security, così ogni utente vede solo le sue righe anche se la logica di accesso fosse sbagliata nel client.
- React Query con persistenza su localStorage: la cache delle query sopravvive alla chiusura dell’app, quindi i dati sono subito disponibili all’apertura, anche offline.
- vite-plugin-pwa + Workbox per il service worker e l’installazione.
- Recharts per i grafici, dnd-kit per riordinare gli esercizi.
Dettagli che fanno la differenza
Sono le cose emerse dai giri di QA, non dalla progettazione iniziale:
- chip di logging rapido per non digitare numeri a mani sudate;
- “ultima volta” per ogni esercizio, così so da dove ripartire;
- glow sui PR: quando una serie supera il record personale, la riga si illumina;
- recap post-workout con serie completate e volume;
- dark mode, perché il telefono in palestra si guarda di sfuggita.
Dove finiscono i dati
Ogni serie porta carico, ripetizioni e sforzo percepito: è la base per contare il volume in Perché misuro il volume in set lavoranti. Da lì i dati confluiscono nel cruscotto di quantified self, dove li incrocio con sonno e nutrizione.