Grow/PLAN.md

Plan: Baby Tracker Webapp ("Grow")

Context

Build a beautiful, mobile-responsive webapp for two parents to track their newborn's daily activities in real-time. Parents log actions quickly (one-tap), view a chronological timeline, get reminders, and analyze trends via a stats dashboard and growth charts.

---

Tech Stack

Layer	Choice	Reason
Framework	Next.js 15 (App Router)	SSR + API routes in one, Vercel deploy
Database	PostgreSQL	Multi-user, relational, scalable
ORM	Prisma	Type-safe, easy migrations
Auth	NextAuth.js v5	Simple 2-parent shared account + invite link
UI	Tailwind CSS + shadcn/ui	Beautiful, accessible, fast to build
Charts	Recharts	React-native, works with Tailwind
State	TanStack Query (React Query)	Cache + real-time polling for 2-parent sync
Realtime sync	Polling (5s) or Supabase Realtime	Keep both parents in sync
Push notifs	web-push (PWA)	"Last feed 3h ago" alerts
Export	PapaParse (CSV) + jsPDF	CSV/PDF export

---

Data Model (Prisma)

model User {
  id        String   @id @default(cuid())
  email     String   @unique
  name      String
  familyId  String
  family    Family   @relation(fields: [familyId], references: [id])
}

model Family {
  id      String   @id @default(cuid())
  name    String
  users   User[]
  babies  Baby[]
  inviteCode String @unique
}

model Baby {
  id        String   @id @default(cuid())
  name      String
  birthDate DateTime
  familyId  String
  family    Family   @relation(fields: [familyId], references: [id])
  events    Event[]
  growthLogs GrowthLog[]
}

model Event {
  id        String    @id @default(cuid())
  babyId    String
  baby      Baby      @relation(fields: [babyId], references: [id])
  userId    String    // who logged it
  type      EventType
  startedAt DateTime
  endedAt   DateTime? // for timed events
  notes     String?
  metadata  Json?     // type-specific data (volume, breast side, color, dose...)
  createdAt DateTime  @default(now())
}

enum EventType {
  BREASTFEED
  BOTTLE
  DIAPER_WET
  DIAPER_STOOL
  NAP
  NIGHT_SLEEP
  MEDICATION
  TEMPERATURE
}

model GrowthLog {
  id        String   @id @default(cuid())
  babyId    String
  baby      Baby     @relation(fields: [babyId], references: [id])
  date      DateTime
  weight    Float?   // grams
  height    Float?   // cm
  headCirc  Float?   // cm
  notes     String?
}

---

Feature List

Core Tracking

• Allaitement — timer (live), left/right breast toggle, duration saved
• Biberon — volume (mL), type (lait maternel / artificiel)
• Couche — wet / selles (color picker: jaune/vert/marron/rouge), quantité
• Sieste — start/stop timer or manual duration
• Sommeil nocturne — start/stop timer or manual
• Traitement — name, dose, unit (mL/mg), notes
• Température — value + unit

Notes

Every event has an optional notes field, editable after creation.

Quick-Log UX

• Home = big action buttons (6–8 tiles, thumb-friendly)
• One tap → opens modal with minimal required fields → Save
• For timers: tap starts timer (persists on reload), tap again stops

Timeline

• Chronological feed, grouped by day
• Each entry shows type icon, time, duration/value, who logged, notes snippet
• Tap to expand/edit/delete

Stats Dashboard

• Today: counts per category, total sleep, total feed time
• Weekly trends: bar charts (feeds/day, sleep/day, diapers/day)
• Feed intervals: avg time between feeds

Growth Charts

• Plot weight, height, head circumference over time
• Overlay WHO percentile curves (P3, P10, P25, P50, P75, P90, P97)
• Data from GrowthLog model

Reminders / Alerts

• In-app badge: "Dernière tétée il y a 2h45"
• PWA push notification: configurable threshold (e.g. alert if no feed in 3h)

Multi-parent Sync

• Family created on signup → invite code/link for second parent
• React Query polls every 5–10s → both parents see same timeline
• Event shows avatar/name of who logged it

Export

• CSV: all events with filters (date range, type)
• PDF: weekly report summary
• Growth data exportable separately

---

Pages / Routes

/                    → redirect to /dashboard
/auth/login          → email magic link or credentials
/auth/invite/[code]  → join family
/dashboard           → quick-log + today's summary + last-event badges
/timeline            → full chronological log with filters
/stats               → charts and summaries
/growth              → growth log + WHO charts
/settings            → baby info, family members, notifications, export

---

UI/UX Design Principles

• Mobile-first, full responsive
• Large tap targets (min 48px)
• Color-coded event types (each type has icon + color)
• Dark mode support
• Minimal friction: most logs = 2 taps max
• French-first UI (labels in French, date locale fr-FR)

---

Implementation Phases

Phase 1 — Foundation

• Next.js 15 project scaffold, Tailwind, shadcn/ui
• Prisma + PostgreSQL schema + migrations
• NextAuth with credentials + invite system

Phase 2 — Core Logging

• Quick-log home page (all 7 event types)
• Live timer component (persists via localStorage)
• Event modal (type-specific fields)
• Timeline page

Phase 3 — Stats + Growth

• Stats dashboard with Recharts
• Growth log form + WHO percentile chart

Phase 4 — Polish + Extras

• PWA manifest + push notifications
• Export (CSV + PDF)
• Settings page
• Dark mode

---

Verification

• Run pnpm dev, log all event types, confirm they appear in timeline
• Log from two browser sessions (two parents), confirm 5s sync
• Check growth chart renders with WHO curves
• Test export (download CSV, open in Excel)
• Test PWA install on mobile + push notification

---

Key Files to Create

• prisma/schema.prisma — full schema
• src/app/(app)/dashboard/page.tsx — main quick-log UI
• src/app/(app)/timeline/page.tsx — chronological view
• src/components/event-modal/ — per-type log modals
• src/components/timer/ — live timer component
• src/lib/who-percentiles.ts — WHO curve data
• src/app/api/events/ — REST endpoints (CRUD)