No description
Find a file
2026-09-12 14:52:16 +02:00
docker feature(sécurité): CSP à empreinte calculée au build et protocole d'origine préservé 2026-08-29 02:21:38 +02:00
graphify-out feature(feed): NA repères par âge et lecture de l'écart entre deux repas 2026-09-12 14:52:16 +02:00
public feature(direction visuelle): palette sauge et argile, primitives et icônes PWA 2026-08-28 15:15:37 +02:00
src feature(feed): NA repères par âge et lecture de l'écart entre deux repas 2026-09-12 14:52:16 +02:00
.dockerignore reafacotirng((front)): MVP done 2026-07-31 20:42:44 +02:00
.env.example reafacotirng((front)): MVP done 2026-07-31 20:42:44 +02:00
.gitignore clean(graphify): NA ignore graphify folder 2026-08-01 09:58:50 +02:00
.oxlintrc.json reafacotirng((front)): MVP done 2026-07-31 20:42:44 +02:00
docker-compose.prod.yml fix(docker): isoler le projet compose de dev pour ne plus écraser la prod 2026-08-28 15:15:47 +02:00
docker-compose.yml fix(dev): relayer le hub Mercure du stack local 2026-08-28 19:37:34 +02:00
Dockerfile feature(sécurité): CSP à empreinte calculée au build et protocole d'origine préservé 2026-08-29 02:21:38 +02:00
index.html feature(direction visuelle): palette sauge et argile, primitives et icônes PWA 2026-08-28 15:15:37 +02:00
package-lock.json reafacotirng((front)): MVP done 2026-07-31 20:42:44 +02:00
package.json reafacotirng((front)): MVP done 2026-07-31 20:42:44 +02:00
README.md feature(sécurité): sortir les jetons du localStorage 2026-08-29 20:55:28 +02:00
tsconfig.app.json reafacotirng((front)): MVP done 2026-07-31 20:42:44 +02:00
tsconfig.json reafacotirng((front)): MVP done 2026-07-31 20:42:44 +02:00
tsconfig.node.json reafacotirng((front)): MVP done 2026-07-31 20:42:44 +02:00
tsconfig.worker.json reafacotirng((front)): MVP done 2026-07-31 20:42:44 +02:00
vite.config.ts feature(direction visuelle): palette sauge et argile, primitives et icônes PWA 2026-08-28 15:15:37 +02:00

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-back doit tourner (par défaut sur http://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_check et /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, AuthProvider demande /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é.