How to Clone Noom

Create a Noom-style weight-loss coaching app called Shiftwell as a Next.js (App Router) + Tailwind + Prisma + SQLite project.

## Product
Subscription behavior-change app: a long personalization quiz, daily psychology lessons, color-coded food logging, weight tracking, and an AI coach chat. Freemium - quiz is free, program behind a multi-month plan.

The whole funnel hinges on the quiz: it personalizes the plan, builds commitment, and is the only path to the paywall. Treat it as the primary surface, not an afterthought.

## Screens
- Marketing landing: optimistic hero, how-it-works, pricing (monthly/4-month toggle, 4-month highlighted 'best value'), testimonials, FAQ accordion
- Onboarding quiz: 12–15 step conversational wizard (goal weight, current stats, age, struggles, eating triggers, pace) with progress bar, ending in a 'your plan' summary then a paywall screen with trial CTA
- Today (authed): card stack of today's lesson, log-food prompt, weigh-in reminder, streak pill
- Lesson reader: focused reading view with a reflection question and a 'Mark complete' button that advances the streak
- Food log: searchable food list, green/yellow/red tags, meal grouping, calorie-budget ring
- Progress: weight trend chart (use a lightweight chart), lessons completed, streak, badges
- Coach: AI chat thread (server route calls an LLM with a supportive CBT system prompt)
- Admin (role-gated): lesson CRUD and food CRUD tables

## Prisma schema
User (id, email, name, goalWeight, currentWeight, height, birthYear, struggle, pace, isPremium, trialEndsAt, streakCount, lastActiveDate), Lesson (id, title, body, course, dayNumber, estMinutes), LessonProgress (userId, lessonId, completedAt), Food (id, name, serving, calories, color), FoodLog (userId, foodId, meal, quantity, loggedAt), WeighIn (userId, weight, loggedAt), CoachMessage (userId, role, body, createdAt)

## Logic
- Quiz answers persist to the User row as the wizard advances so it is resumable; the paywall is the final step (mock checkout, but structure it so Stripe replaces it: 'Start free trial' sets isPremium with trialEndsAt = now + 7 days)
- Streak +1 per calendar day on lesson completion or weigh-in; reset on gaps
- Calorie budget computed from goal weight + pace; the ring reflects logged foods and shows green/yellow/red balance for the day
- Lessons advance one per day; completing today's lesson unlocks tomorrow's and bumps the streak
- Coach route: POST message -> call an LLM with a supportive, non-clinical CBT system prompt that refuses medical/dosing advice -> store and return the reply

## Privacy
All health endpoints require auth and are scoped to the current user. No weight/eating data in query strings. Add a DELETE /api/account route that wipes the user's data.

## Style
Friendly, warm: soft sage green accents, cream background, rounded-2xl cards, Inter, gentle transitions. Mobile-first. Encouraging copy, never shaming.

Keep the tone supportive throughout - progress framing over guilt, small wins celebrated, no red-alert dieting language.

Seed: a 14-day lesson course, 30 foods across green/yellow/red, demo user mid-program with a 5-day streak and a week of weigh-ins.

Build a production-quality Noom-style behavior-change weight-loss app. Mobile-first PWA now, React Native port later - keep domain logic framework-agnostic.

## Stack
- Next.js 14 App Router + TypeScript + Tailwind + shadcn/ui, next-pwa for installability
- Supabase: Postgres, Auth (email + Apple/Google OAuth), Storage; RLS on every table from day one
- Stripe Billing: monthly + multi-month prices, 7-day trial, customer portal
- Zod at every boundary; Zustand for lightweight client state (quiz wizard, food-log draft)

## Critical architecture
- Health-data privacy is a first-class requirement: weigh_ins, food_logs, lesson_progress and coach_messages are user-scoped with RLS; nothing personal ever appears in a URL or a public asset; signed-out users cannot read any of it. Implement a server-side account-deletion routine that cascades.
- Quiz funnel: a resumable multi-step wizard whose answers write to the profile; the paywall is the terminal step. Fire analytics events at each step so you can find drop-off.
- AI coach: server route only; system prompt enforces a supportive, non-clinical CBT tone, refuses medical/dosing advice, and never gives a calorie target that implies an unsafe deficit. Rate-limit and log.
- Streak + calorie-budget logic in Postgres functions called on completion/log events so clients can't fake progress.

## Schema
profiles (id, goal_weight, current_weight, height, birth_year, struggle, pace, is_premium, trial_ends_at, streak_count, last_active_date), lessons (id, title, body, course, day_number, est_minutes), lesson_progress, foods (id, name, serving, calories, color enum), food_logs (user_id, food_id, meal enum, quantity, logged_at), weigh_ins (user_id, weight, logged_at), coach_messages (user_id, role, body, created_at). RLS everywhere.

## Implementation order
1. Scaffold, Supabase schema + RLS policies, auth - show me the RLS policies before continuing
2. Quiz wizard -> profile writes -> paywall with Stripe Checkout (trial), webhook updates is_premium
3. Today screen: daily-lesson engine, completion tracking, streak Postgres function
4. Food log: food search, color tagging, calorie-budget ring, weigh-in entry + trend
5. AI coach chat: server route, guarded system prompt, message persistence
6. Progress dashboard: weight trend (CSS/SVG, no heavy chart lib), badges
7. Admin (role-gated) + PWA manifest + offline shell + account deletion route

## Quality bar
- No health data reachable while signed out (write a test that proves it)
- Quiz step + trial events to PostHog (quiz_started, quiz_completed, trial_started, trial_converted)
- Coach never emits medical/dosing instructions (add a guardrail test)
- Streak and calorie-budget logic covered by unit tests so they can't silently drift
- Lighthouse PWA installable; the quiz is resumable if the user drops mid-funnel
- Seed: 14-day course, 30 foods, demo user mid-program

Start with step 1.

Design the complete UI for a Noom-style weight-loss coaching app called Shiftwell. React + Tailwind + shadcn/ui + lucide-react. Aesthetic: friendly, warm and encouraging - soft sage green and cream, rounded-2xl cards, big readable type, gentle micro-interactions, never clinical or shaming. Light theme, mobile-first.

## Screens

### 1. Marketing landing
- Optimistic hero with a confident headline ('Change your mind, change your weight'), subline, email capture with a friendly CTA
- A 3-step 'how it works' band (Take the quiz -> Learn daily -> Build habits), three benefit cards, pricing toggle (monthly $59 / 4-month $149 with BEST VALUE badge), FAQ accordion, footer

### 2. Onboarding quiz (the centerpiece)
- Thin progress bar up top, one conversational question per screen with warm copy, big tappable option cards, occasional encouraging interstitials ('Great - people like you lose 1.5 lbs/week on average'), a smooth slide between steps
- Final 'Your plan is ready' summary card (projected timeline graphic), then a paywall: glass card listing what's included, plan selector (4-month preselected), 'Start 7-day free trial' CTA

### 3. Today
- Greeting header ('Good morning, Sam') with a streak flame pill and the day's date
- A vertical card stack: today's lesson card (cover, title, 5 min read, Start), a log-your-meal prompt card, a weigh-in reminder card
- A subtle daily-progress strip (lesson done / logged / weighed in) as three small check pills
- Bottom tab bar: Today, Food, Progress, Coach - soft active state

### 4. Lesson reader
- A focused reading view: cover image, title, est. minutes, clean body type with the occasional pull-quote and inline illustration, a short reflection question at the end, and a satisfying 'Mark complete' button that advances the streak

### 5. Food log
- Calorie-budget ring at the top (used vs remaining), meal sections (Breakfast/Lunch/Dinner/Snacks), each logged food a row with a green/yellow/red dot
- A big + to add and a search sheet with color-tagged results and recent foods
- A small color-summary bar showing today's green/yellow/red balance

### 6. Progress
- A clean weight trend line chart toward a goal marker, three stat cards (current streak, lessons done, lbs to go), a row of earned badges
- A weekly recap card with an encouraging one-line insight

### 7. Coach chat
- A messaging thread with a friendly coach avatar, supportive bubbles, quick-reply chips, a composer at the bottom

### 8. Paywall (end of quiz)
- A glass card over a blurred app preview: benefit checklist, plan selector (4-month preselected with a BEST VALUE badge), a trial timeline graphic (Today -> Day 5 reminder -> Day 7 billed), a primary 'Start 7-day free trial' CTA, and a small 'restore purchase' link

Fully responsive, mobile-first. Use realistic content: lesson titles like 'The Two Brains', 'Spotting All-or-Nothing Thinking', foods like 'Avocado toast' (yellow), 'Side salad' (green), 'Glazed donut' (red), supportive coach messages.

Build a psychology-based weight-loss coaching app (Noom model) called Shiftwell.

## Entities
- Lesson: title, body, course, dayNumber, estMinutes
- LessonProgress: user, lesson reference, completedAt
- Food: name, serving, calories, color (green/yellow/red)
- FoodLog: user, food reference, meal (breakfast/lunch/dinner/snack), quantity, loggedAt
- WeighIn: user, weight, loggedAt
- CoachMessage: user, role (user/coach), body, createdAt
- UserProfile: goalWeight, currentWeight, height, birthYear, struggle, pace, isPremium, trialEndsAt, streakCount, lastActiveDate

## Roles & permissions
- Visitor: sees landing page, the quiz, and pricing only
- Free user: completes the quiz; sees a teaser; program content is locked
- Premium user: full lessons, food logging, weigh-ins, coach chat
- Admin: CRUD on lessons and foods, plus a dashboard (users, premium count, completion rates)

## Pages
1. Landing: hero, how-it-works, pricing (monthly $59 / 4-month $149 with trial), FAQ
2. Onboarding quiz after signup: 12–15 conversational steps, ending on a 'your plan' summary then a paywall with 'Start 7-day free trial'
3. Today: daily lesson, log prompts, streak in header
4. Food log: searchable foods with green/yellow/red tags, calorie-budget ring, meal grouping
5. Progress: weight trend, lessons completed, streak, badges
6. Coach: chat thread with a supportive AI coach
7. Admin: lessons and foods tables with create/edit forms

## Rules
- The quiz is free; the paywall appears only after the plan summary
- Streak +1 on the first lesson completion or weigh-in each day; reset after a missed day
- Trial sets isPremium true and trialEndsAt = now + 7 days; revert to free on expiry
- Health data (weight, food, messages) is private and scoped to its owner; provide a delete-account action

## Look & feel
Friendly, warm and encouraging: sage green and cream, rounded cards, big readable type, supportive never-shaming copy. Mobile-first.

Seed with a 14-day lesson course, 30 foods across the three colors, one admin user, and one demo user mid-program with a 5-day streak.