Initial commit — Grow baby tracker
Next.js 16 App Router, Prisma + PostgreSQL, NextAuth v5 JWT. Features: dashboard quick-log, timeline, growth charts (WHO percentiles), stats, journal/notes, doctor notes, milestones, vaccinations, settings, superadmin panel. Mobile-first with sidebar nav + bottom nav + quick-add FAB. Dark mode, PWA push notifications, multi-family invite system. Docker: multi-stage Dockerfile + docker-compose with postgres service.
This commit is contained in:
@@ -0,0 +1,208 @@
|
||||
# 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)
|
||||
Reference in New Issue
Block a user