# 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)

```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)