How to Clone Cal AI

Create a Cal AI-style photo calorie tracker called Plately as a Next.js (App Router) + Tailwind + Prisma + SQLite project.

## Product
Photograph food → AI vision estimates calories and macros → meal lands in a daily log against a personal calorie budget computed by an onboarding quiz. Hard paywall with free trial after the quiz; the dashboard is a calorie ring plus macro bars.

## Screens
- Marketing landing: white hero with meal-photo-plus-macro-card mockup, 'Point. Shoot. Tracked.', how-it-works, pricing (monthly $9.99 / yearly $39.99), FAQ
- Onboarding quiz: 10 single-question steps with progress bar (goal, gender, birthday, height, weight, goal weight, pace, activity, diet style, attribution), an animated 'Building your plan…' interstitial, results screen with calorie target + macro split + SVG projected weight curve
- Paywall: blurred results behind a benefits card, trial CTA, plan toggle with yearly preselected, small skip link (skippers get a 1-meal/day limit)
- Today: calorie ring (SVG, animated), three macro bars, streak pill, meals grouped by type with thumbnails, floating scan button
- Scan: file upload with camera capture attribute → analyzing shimmer state → editable result card (dish, portion, calories, macros, confidence) → log
- History: week strip + day detail with over/under chips
- Progress: weight entries vs projected-curve line chart (recharts)
- Settings: goal editing (recomputes targets), units, plan status

## Prisma schema
User (id, email, name, gender, birthdate, heightCm, startWeightKg, goalWeightKg, weeklyPaceKg, activityLevel, dietStyle, dailyCalorieTarget, proteinTargetG, carbsTargetG, fatTargetG, isPremium, trialEndsAt, streakCount, lastLoggedDate), Meal (id, userId, photoUrl, dishName, portionText, calories, proteinG, carbsG, fatG, mealType, aiConfidence, wasEdited, loggedAt), WeightEntry (id, userId, weightKg, recordedAt)

## Logic
- POST /api/analyze: accepts the image, calls an OpenAI-compatible vision endpoint (read OPENAI_API_KEY from env) with a system prompt demanding strict JSON { dishName, portionText, calories, proteinG, carbsG, fatG, confidence between 0 and 1 }; validate with zod; if no API key is set, return a realistic MOCK response after a 1.5s delay so the whole app is demoable offline
- Target math in lib/nutrition.ts: Mifflin-St Jeor BMR, activity multipliers (1.2–1.725), deficit of 500 kcal per 0.5 kg/week pace, floor 1200; macros 30/40/30; unit-test this file
- Mock checkout sets isPremium + trialEndsAt = now + 3 days (structure the endpoint so Stripe drops in later); free users hit a paywall modal at their second meal of the day
- Streak updates on first meal of each calendar day; lazy reset on read when a day was missed
- Editing an analysis result before/after logging persists corrections with wasEdited = true
- The projected weight curve is computed once at quiz completion (linear from startWeightKg to goalWeightKg at weeklyPaceKg) and stored as points so Progress can plot actual vs projected

## Components to build carefully
- CalorieRing (SVG with animated stroke-dashoffset and remaining-kcal center), MacroBar (amber state when over target), AnalyzeShimmer, ResultCard (view → inline-edit toggle), WeekStrip with over/under dots

## Style
Clean health aesthetic: white background, ink #16221C text, green #22C55E primary with mint #DCFCE7 fills, amber #F59E0B for over-budget, rounded-2xl cards with soft shadows, Inter with tabular numerals for all numbers, animated SVG calorie ring as the centerpiece. Mobile-first, bottom nav (Today, History, Scan, Progress, Profile) with a raised center camera button.

Seed: demo premium user with a 6-day streak, 3 meals today (smoothie bowl 420 kcal, chicken burrito 710 kcal, apple 95 kcal - full macros, unsplash food photos), 12 days of history hovering around a 1900 kcal target, 5 weight entries trending down, plus one fresh user account that lands on the quiz.

Build a production-quality AI photo calorie tracker called Plately (Cal AI model). Mobile-first PWA - the camera flow must feel app-native from the home screen.

## Stack
- Next.js 14 App Router + TypeScript + Tailwind + shadcn/ui, next-pwa, recharts for progress charts
- Supabase: Postgres, Auth, Storage (private bucket for meal photos)
- AI: Vercel AI SDK against GPT-4o (or any vision model) with structured output via zod schema - the analyze endpoint is the product, treat it like one
- Stripe Billing: monthly + yearly with a 3-day trial on yearly, webhook-driven entitlements, customer portal

## Critical architecture
- /api/analyze pipeline: upload to Storage first (client gets signed upload URL), then call the vision model server-side with the storage path - never proxy raw image bytes through serverless functions twice. Zod-validated structured output { dishName, portionText, calories, proteinG, carbsG, fatG, confidence }; one retry on schema failure with the validation error fed back; graceful fallback to manual entry. Log model latency and token cost per call - unit economics live here
- Cost control: resize images client-side to max 1024px before upload (canvas), cache identical-image hashes for 24h, and rate-limit analyze to 20/day per user (free tier: 1 logged meal/day after trial)
- Nutrition math is a pure, unit-tested module: Mifflin-St Jeor BMR, activity multipliers, pace-based deficit with a 1200 kcal floor, 30/40/30 macro split; targets denormalized onto the profile and recomputed on goal edits
- Entitlements server-side only: middleware reads profiles.is_premium (set exclusively by the Stripe webhook); the quiz→paywall funnel state machine lives in the DB (onboarding_step column) so refreshes/resume work
- Streak integrity: computed in a Postgres function on meal insert (first meal of local day increments; gap resets) - pass the user's timezone, never trust client-computed streaks

## Schema
profiles (id, gender, birthdate, height_cm, start_weight_kg, goal_weight_kg, weekly_pace_kg, activity_level, diet_style, daily_calorie_target, protein_target_g, carbs_target_g, fat_target_g, timezone, onboarding_step, is_premium, trial_ends_at, streak_count, last_logged_date, role), meals (id, user_id, photo_path, dish_name, portion_text, calories, protein_g, carbs_g, fat_g, meal_type enum, ai_confidence, was_edited, model_latency_ms, logged_at), weight_entries (id, user_id, weight_kg, recorded_at), analyze_events (user_id, image_hash, result jsonb, cost_usd, created_at). RLS on everything.

## Implementation order
1. Scaffold, schema + RLS, auth, the nutrition module with unit tests (golden cases: 30M/80kg/180cm/moderate/lose-0.5 → assert exact targets)
2. Onboarding quiz: 10-step wizard persisting onboarding_step, results screen with projected-curve SVG, resumable on refresh
3. Analyze pipeline: signed upload, vision call with structured output + retry, editable result card, meal creation, the mock-mode flag (MOCK_AI=true) for development
4. Today dashboard: animated calorie ring (SVG stroke-dashoffset), macro bars, grouped meal list, streak; History week view
5. Paywall + Stripe: hard paywall post-quiz, trial on yearly, webhook → entitlement, free-tier 1-meal/day limit enforced server-side at meal insert
6. Progress: weight check-ins, recharts line of actual vs projected curve
7. PWA polish: install prompt after first successful scan, offline shell for Today, camera capture attribute fallbacks across iOS Safari/Android Chrome

## Quality bar
- Scan-to-result under 6 seconds p50 (measure and log); shimmer skeleton during analysis, never a frozen button
- Analyze endpoint provably rate-limited and entitlement-gated with a forged-client curl test
- Funnel events to PostHog: quiz_started, quiz_completed, paywall_viewed, trial_started, first_scan_completed, d1_return - quiz→trial conversion is the business
- Seed: demo premium user with 6-day streak, 3 meals today, 12 days history, 5 weight entries; one fresh user starting at the quiz

Start with step 1 and show me the nutrition module's tests and the meals RLS policies before any UI.

Design the complete UI for an AI photo calorie-tracking app called Plately. React + Tailwind + shadcn/ui + lucide-react + recharts. Aesthetic: fresh, clinical-but-friendly health app - white background, ink text (#16221C), green primary #22C55E with mint #DCFCE7 fills, amber #F59E0B reserved for over-budget states, rounded-2xl cards with soft diffused shadows, Inter with tabular numerals for every number. The animated calorie ring is the brand centerpiece.

## Screens

### 1. Marketing landing
- White hero: left, headline 'Point. Shoot. Tracked.' with a green underline accent and subline 'AI counts the calories so you don't have to'; right, a phone mockup showing a burrito photo with a floating macro result card
- 3-step how-it-works (Snap / AI counts / Stay on track) with line icons, a comparison strip vs manual-logging apps ('45 seconds vs 4 taps'), pricing cards with yearly badged 'BEST VALUE', FAQ accordion, clean footer

### 2. Onboarding quiz
- One question per screen, top progress bar filling green, large friendly question text, big tappable option cards or styled number steppers (height/weight with unit toggle), Continue button pinned bottom
- 'Building your plan…' interstitial: centered ring animation with sequential checkmarks ('Calculating metabolism ✓ Setting macros ✓ Projecting progress ✓')
- Results screen: huge daily calorie number, three macro pills, and a smooth projected weight-loss curve (SVG, green gradient fill) from current to goal weight with the goal date labeled

### 3. Paywall
- The results screen blurred behind a white sheet: benefit checklist with green checks, trial timeline graphic (Today unlocked → Day 2 reminder → Day 3 charged), plan toggle (monthly $9.99 / yearly $39.99 with savings badge, yearly preselected), full-width green CTA 'Start my 3-day free trial', faint 'Maybe later' text link

### 4. Today dashboard
- Header: date, streak flame pill ('6 🔥')
- Hero card: thick animated calorie ring with remaining kcal centered ('612 left'), eaten/budget caption; three horizontal macro bars below (Protein 92/142g, Carbs, Fat) turning amber when over
- Meals list grouped by Breakfast/Lunch/Dinner/Snacks: rows with square photo thumbnail, dish name, portion text, kcal right-aligned in tabular figures, tiny 'edited' pencil badge where corrected
- Floating green camera FAB centered in the bottom nav (Today, History, Scan, Progress, Profile)

### 5. Scan flow
- Capture state: full-screen camera frame with rounded mask and 'Get the whole plate in frame' hint
- Analyzing state: the photo dimmed under a shimmer sweep with 'Analyzing your plate…' and a subtle progress dot row
- Result card slides up: dish name as title, portion text, big calorie number, 2x2 macro grid, confidence note ('AI estimate - usually within 15%'), buttons Log it (green, full-width), Fix it (outline, opens inline editable fields), Retake (ghost)

### 6. History & Progress
- History: horizontal week strip of day chips (each showing total kcal and a green/amber dot vs budget), selected day's meal list below
- Progress: weight check-in input card with kg/lbs toggle, recharts line of actual weigh-ins (solid green) over the projected curve (dashed gray), delta stat cards (lost so far, to goal, weekly avg)

### 7. Settings
- Grouped rows: Goals (opens editable targets with 'recalculate' note), Units, Reminders with time pickers, Subscription card showing trial/active state, sign out

Phone-first (430px frame); desktop centers the column on a faint mint-tinted background. Use realistic content everywhere: 'Chicken burrito bowl · 1 bowl (~450g) · 710 kcal · P 42 C 68 F 24', a 1,900 kcal budget, real-looking unsplash food photos.

Build an AI photo calorie-tracking app (Cal AI model) called Plately.

## Entities
- UserProfile: gender, birthdate, heightCm, startWeightKg, goalWeightKg, weeklyPaceKg, activityLevel, dietStyle, dailyCalorieTarget, proteinTargetG, carbsTargetG, fatTargetG, isPremium (boolean), trialEndsAt, streakCount, lastLoggedDate, role
- Meal: user reference, photo (image), dishName, portionText, calories, proteinG, carbsG, fatG, mealType (breakfast/lunch/dinner/snack), aiConfidence (0–1), wasEdited (boolean), loggedAt
- WeightEntry: user reference, weightKg, recordedAt

## Roles & permissions
- Visitor: sees the landing page and pricing only
- Free user (skipped the paywall): can log 1 meal per day; hits the paywall on the second; sees their own data only
- Premium user (trial or paid): unlimited scans and meals, weight tracking, full history
- Admin: dashboard with total users, premium count, scans today, average AI confidence; can browse flagged/low-confidence analyses

## Pages
1. Landing: clean white hero ('Point. Shoot. Tracked.'), how-it-works, pricing (monthly $9.99 / yearly $39.99 with 3-day trial), FAQ
2. Onboarding quiz after signup, one question per screen with a progress bar: goal (lose/maintain/gain), gender, birthday, height, current weight, goal weight, weekly pace, activity level, diet style; then a 'Building your plan…' loading moment; then results showing the personal daily calorie target, macro split and a projected weight curve
3. Paywall right after results: benefits list over the blurred plan, 'Start 3-day free trial' (sets isPremium and trialEndsAt = now + 3 days), monthly/yearly toggle with yearly preselected, small skip link
4. Today: calorie ring showing eaten vs target with remaining in the center, three macro progress bars, streak counter, meals grouped by type with photo thumbnails, prominent scan button
5. Scan: photo upload/camera capture → send to an AI vision integration asking for strict JSON (dishName, portionText, calories, proteinG, carbsG, fatG, confidence) → editable result card → 'Log it' creates the Meal; if AI fails, offer manual entry
6. History: week strip with per-day totals and over/under indicators; tap a day to see its meals
7. Progress: weight check-in form and a chart of entries against the projected curve
8. Settings: edit goals (recompute targets), units, reminders, subscription status
9. Admin: stats dashboard and a table of recent analyses with confidence scores

## Rules
- Daily calorie target: Mifflin-St Jeor BMR x activity multiplier, minus 500 kcal per 0.5 kg/week of chosen pace, never below 1200; macros split 30% protein / 40% carbs / 30% fat; recompute whenever goals change
- Free users are blocked at the second meal of a calendar day by the paywall modal
- When trialEndsAt passes without payment, revert isPremium to false on next login
- Streak +1 on the first logged meal of each day; reset to 0 after a missed day
- Edited AI results keep the user's values and set wasEdited = true; aiConfidence below 0.5 shows a 'double-check this one' hint

## Look & feel
White background, ink text, green #22C55E primary with mint #DCFCE7 fills, amber #F59E0B only when over budget, rounded-2xl cards, big tabular numerals, an animated calorie ring as the centerpiece. Mobile-first with bottom nav: Today, History, Scan (center button), Progress, Settings.

Seed with a demo premium user: 6-day streak, 3 meals today (smoothie bowl 420 kcal, chicken burrito 710 kcal, apple 95 kcal with full macros and food photos), 12 days of history near a 1,900 kcal target, 5 weight entries trending down along the projection, plus one admin account and one fresh account that starts at the quiz.