How to Clone MyFitnessPal

Create a MyFitnessPal-style calorie tracker called MacroLedger as a Next.js (App Router) + Tailwind + Prisma + SQLite project.

## Product
A food diary tracking calories and macros against a daily goal, with food search and barcode logging. Freemium: free diary with ads and percentage macro goals; Premium removes ads and unlocks gram-level macro goals and full analytics, sold yearly with a free trial.

## Screens
- Marketing landing: energetic hero, diary/chart screenshots, pricing (monthly/annual toggle, annual highlighted 'save 65%'), FAQ accordion
- Onboarding wizard: goal (lose/maintain/gain), stats (age/sex/height/current+goal weight), activity level; compute and show the daily calorie + macro budget
- Diary (home): date header, meal sections (breakfast/lunch/dinner/snacks) with logged foods, a top summary with a calorie ring and macro bars, an add-food button
- Add food: search the foods table with calories per serving, serving/quantity picker, add to a meal; a barcode-scan entry point (use the device camera + a lookup; stub the scan in dev)
- Progress: weight-over-time line chart, calories-logged history, streak counter
- Profile & settings: goals, daily budget, manage subscription

## Prisma schema
User (id, email, name, sex, birthdate, heightCm, activityLevel, goal, dailyCalorieGoal, macroGoalsJson, isPremium, trialEndsAt, streakCount, lastLogDate), Food (id, name, brand, servingLabel, servingGrams, calories, carbsG, proteinG, fatG, barcode), DiaryEntry (id, userId, date, meal, foodId, servings, createdAt), WeightLog (id, userId, date, weightKg)

## Logic
- Daily totals computed by summing DiaryEntry rows for a date; entry nutrition = food nutrition x servings; calories remaining = dailyCalorieGoal - sum
- Compute the daily budget at onboarding with a Mifflin-St Jeor BMR x activity factor, adjusted for the goal (deficit/surplus)
- Logging streak increments once per calendar day with any entry; reset on a gap
- Free tier shows ad placeholders and percentage macro goals; Premium flag removes ads and enables gram-level goals + full charts
- 'Start free trial' sets isPremium with trialEndsAt = now + trial (mock checkout, structured so Stripe annual subscription can replace it)
- Editing or deleting an entry recomputes the day's totals; nutrition math (per-serving x quantity) lives in one shared module

## Style
Clean and data-clear: white base, one vivid accent (fresh green or coral), big readable numbers, a calorie ring and macro progress bars as the hero, friendly icons. Light theme, mobile-first.

## Acceptance
- Logging a food at 1.5 servings adds exactly 1.5x its nutrition and updates calories remaining and the macro bars
- Completing onboarding shows a sensible daily calorie target derived from the entered stats and goal
- A free user sees ad placeholders and percentage macro goals; upgrading removes ads and switches goals to grams

Seed: ~60 common foods with realistic calories/macros and a few barcodes, a demo premium user with a week of diary entries and a downward weight trend, a 5-day streak.

Build a production-quality MyFitnessPal-style calorie tracker. Mobile-first PWA now, React Native port later - keep nutrition math, goal computation and entitlement logic in shared, well-tested server-side modules.

## Stack
- Next.js 14 App Router + TypeScript + Tailwind + shadcn/ui, next-pwa for installability
- Supabase: Postgres, Auth (email + Apple/Google), Storage for meal photos
- Food data from Open Food Facts + USDA FoodData Central (import a subset; cache lookups); barcode lookup via the same
- Stripe Billing: annual + monthly prices, free trial on annual, customer portal for cancellation
- A vision model endpoint for AI photo logging; Zustand for the diary store; Zod at every API boundary

## Critical architecture
- Nutrition math lives in one pure, unit-tested module (per-serving x quantity, daily roll-ups, remaining calories, macro percentages) - floating-point and serving-size bugs here destroy trust, so test it hard
- Daily totals are computed via a Postgres view or aggregate query over diary_entries, not summed on the client, so the number is always consistent
- The daily budget is computed server-side from Mifflin-St Jeor BMR x an activity factor adjusted by goal; store the inputs so you can recompute when the user updates stats
- AI photo logging returns an estimate that the user MUST confirm/edit before it writes a diary entry - never silently log a guess; label estimates clearly
- Premium entitlement (no ads, gram-level goals, full analytics) enforced server-side, not just hidden in the UI

## Schema
profiles (id, sex, birthdate, height_cm, activity_level, goal, daily_calorie_goal, macro_goals jsonb, is_premium, trial_ends_at, streak_count, last_log_date), foods (id, name, brand, serving_label, serving_grams, calories, carbs_g, protein_g, fat_g, barcode, source), diary_entries (id, user_id, date, meal, food_id, servings, created_at), weight_logs (id, user_id, date, weight_kg), recipes + recipe_ingredients (stretch). RLS on all user-owned tables.

## Implementation order
1. Scaffold, Supabase schema + RLS, auth; the nutrition-math module with unit tests; import a food subset
2. Onboarding: goal/stats wizard, budget computation, store inputs and goals
3. Diary: date navigation, meal sections, add-food search, the daily summary (calorie ring + macro bars) from a server aggregate
4. Barcode lookup + AI photo logging (camera capture, vision estimate, confirm-before-save)
5. Progress: weight chart, streak logic server-side, history; Health integration as a stretch
6. Monetization: Stripe Checkout (trial on annual) + webhook flips is_premium; ad placeholders for free tier; gate gram-level goals and full analytics

## Quality bar
- The nutrition module has tests covering serving sizes, fractional quantities and daily roll-ups
- AI estimates are always editable and clearly marked as estimates
- No premium analytics endpoints return data to unentitled clients
- Conversion events to PostHog (onboarding_completed, first_food_logged, trial_started, trial_converted)
- Seed script with ~60 foods and a week of demo data

Start with step 1 and show me the nutrition-math module and its tests before moving on.

Design the complete UI for a MyFitnessPal-style calorie and macro tracker called MacroLedger. React + Tailwind + shadcn/ui + lucide-react. Aesthetic: clean, energetic and data-clear - white base, one vivid accent (fresh green #16A34A or coral), big readable numbers, a calorie ring and macro bars as the visual hero, friendly rounded icons. Light theme, mobile-first.

## Screens

### 1. Marketing landing
- Energetic hero, headline 'Know exactly what you eat.', subline, a phone mockup showing the diary with a calorie ring
- Three feature cards (barcode scan, AI photo logging, macro charts), pricing (monthly/annual toggle, annual SAVE 65% badge), FAQ accordion, footer

### 2. Onboarding flow
- Stepper: goal cards (Lose / Maintain / Gain), a stats form (age, sex, height, current + goal weight), an activity-level selector with descriptions, then a 'Your daily plan' reveal screen showing the calorie target and macro split with a satisfying animation - one card per step, slim progress bar

### 3. Diary (home)
- Sticky top summary: a large calorie ring (Goal − Food = Remaining) flanked by three thin macro progress bars (Carbs / Protein / Fat) with grams
- Below, meal sections - Breakfast, Lunch, Dinner, Snacks - each a card listing logged foods (name, serving, calories) with a section subtotal and an add (+) row
- A floating action button offering Search food / Scan barcode / Snap a meal

### 4. Add food
- Search field with a results list (food name, brand, calories per serving); tapping opens a detail sheet with a serving-size selector, quantity stepper, a meal picker and a live nutrition preview; a prominent 'Scan barcode' and 'Snap a meal' tab
- AI photo result screen: the photo, a list of detected items with estimated calories/macros, each editable, and a clear 'Estimate - tap to adjust' label before a confirm button

### 5. Progress
- A weight line chart with a goal line, stat cards (current weight, change this month, logging streak with a flame), and a calendar strip showing logged days

### 6. Paywall modal
- Glass card listing Premium benefits (no ads, gram-level macro goals, full nutrient charts, AI photo logging), annual preselected with a trial timeline, primary CTA, restore-purchase link

### 7. Empty & edit states
- An empty diary day with a friendly 'Log your first meal' prompt and the big add button
- A swipe-to-edit/delete affordance on logged food rows, plus a quick serving-size editor sheet

Fully responsive, mobile-first. Use realistic content: foods like 'Greek Yogurt, plain', believable calorie/macro numbers, a downward weight trend, a 5-day streak.

Make the calorie ring and macro bars a single reusable component reused on the diary, the add-food preview and the AI-result screen, and reuse the food row across search results and the diary.

Build a calorie- and macro-tracking app (MyFitnessPal model) called MacroLedger.

## Entities
- Food: name, brand, servingLabel, servingGrams, calories, carbsG, proteinG, fatG, barcode (optional)
- DiaryEntry: user reference, date, meal (breakfast/lunch/dinner/snack), food reference, servings
- WeightLog: user reference, date, weightKg
- UserProfile: sex, birthdate, heightCm, activityLevel, goal (lose/maintain/gain), dailyCalorieGoal, macroGoals (carbsG/proteinG/fatG), isPremium, trialEndsAt, streakCount, lastLogDate

## Roles & permissions
- Visitor: sees landing page and pricing only
- Free user: full diary, food search and barcode logging, with ads and percentage-based macro goals
- Premium user: no ads, gram-level macro goals, full nutrient analytics, AI photo logging
- Admin: manages the foods database, sees a dashboard (total users, premium count, foods logged, top foods)

## Pages
1. Landing: hero, pricing (monthly / annual with trial), FAQ
2. Onboarding after signup: goal, stats (age/sex/height/weight/activity), compute and show the daily calorie + macro budget
3. Diary (home): date header, meal sections with logged foods, a summary showing calories remaining and macro progress, add-food button
4. Add food: search the foods database, pick serving + quantity, add to a meal; barcode-scan option
5. Progress: weight chart over time, logging history, streak counter
6. Profile & settings: goals, daily budget, subscription status
7. Admin: foods table with create/edit forms

## Rules
- The daily summary sums DiaryEntry nutrition (food x servings) for the date; calories remaining = dailyCalorieGoal minus the sum
- Logging streak +1 the first time the user logs any food on a calendar day; reset after a missed day
- Free users see ads and percentage macro goals; Premium removes ads and unlocks gram-level goals and full charts
- Trial sets isPremium true and trialEndsAt = now + trial; after expiry the user reverts to free (check on login)

## Look & feel
Clean, energetic, data-clear: white base, one vivid accent, big readable numbers, a calorie ring and macro bars as the hero, friendly icons. Light theme, mobile-first.

Seed with ~60 common foods (realistic calories/macros, a few barcodes), one admin user, and one demo premium user with a week of diary entries, a downward weight trend and a 5-day streak.