| docker | ||
| graphify-out | ||
| public | ||
| src | ||
| .dockerignore | ||
| .env.example | ||
| .gitignore | ||
| .oxlintrc.json | ||
| docker-compose.prod.yml | ||
| docker-compose.yml | ||
| Dockerfile | ||
| index.html | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
| tsconfig.app.json | ||
| tsconfig.json | ||
| tsconfig.node.json | ||
| tsconfig.worker.json | ||
| vite.config.ts | ||
Baby Tracker — Front (PWA)
Application web mobile-first pour le suivi bienveillant d'un nouveau-né :
saisie rapide (repas, changes, dodo, mesures) et tableau de bord « aujourd'hui »
avec estimation du prochain repas. Consomme l'API Symfony baby-tracker-back.
Stack : React 19 + Vite + TypeScript + Tailwind v4 + React Router + PWA (vite-plugin-pwa).
Prérequis
- Le backend
baby-tracker-backdoit tourner (par défaut surhttp://127.0.0.1:8000). - Node 22+ (ou l'image Docker
node:22).
Démarrer en dev
npm install
npm run dev
Le serveur Vite relaie automatiquement les appels /api vers le backend
(cf. vite.config.ts, variable VITE_API_TARGET). Aucune config CORS nécessaire en dev.
Build de production
npm run build # tsc + vite build (génère dist/ + service worker PWA)
npm run preview # sert le build localement
En production, l'API doit être servie sous l'origine du front : les cookies de
session comme celui du hub Mercure en dépendent. VITE_API_URL reste là pour
pointer une API ailleurs, mais l'authentification ne suivrait pas.
Authentification
- Login / register via
/api/login_checket/api/user/register(JWT). - Les deux jetons voyagent en cookies HttpOnly (
bt_token,refresh_token, chemin/api, SameSite=Strict) : le code de la page ne les voit pas et n'a rien à stocker. Le navigateur les joint tout seul. - Au démarrage,
AuthProviderdemande/api/me: c'est le seul moyen de savoir si la session tient encore. Le renouvellement (/api/token/refresh) reste transparent, plus de déconnexion au bout d'une heure. - La déconnexion passe par
/api/logout: effacer un cookie qu'on ne voit pas demande une réponse du serveur, qui en profite pour révoquer l'appareil.
Notifications push
Le service worker est écrit à la main (src/sw.ts, stratégie injectManifest) :
il précache le build et traite les événements push / notificationclick.
L'abonnement se fait depuis l'onglet Famille › Notifications (src/lib/push.ts) :
autorisation du navigateur, PushManager.subscribe() avec la clé VAPID publique
servie par /api/push/config, puis enregistrement de l'endpoint côté API.
Le backend décide quoi envoyer (voir son anti-flood) ; le front ne fait que
s'abonner et régler les catégories / heures calmes.
Sur iPhone, le push n'existe que si la PWA est installée sur l'écran d'accueil : l'écran de réglages l'indique.
Structure
src/
lib/ api (fetch + refresh), auth, helpers de format, hook d'événements
components/ ui (primitives), QuickLog (saisie), Today (dashboard), ChildBar, Onboarding
pages/ Login, Register, Dashboard
Baby Tracker est une aide au suivi, pas un dispositif médical. En cas de doute, consultez un professionnel de santé.