How to Clone Fabulous

Create a Fabulous-style habit and morning-routine coaching app called Daybreak as a Next.js (App Router) + Tailwind + Prisma + SQLite project.

## Product
Subscription habit coach: users pick small rituals, chain them into a routine, and complete them in a guided one-at-a-time flow with celebratory feedback. Freemium - some free habits, full journeys behind a premium plan with a 7-day trial.

## Screens
- Marketing landing: sunrise gradient hero, a three-step 'how it works' strip, pricing (monthly/yearly toggle, yearly highlighted with 'save 60%'), testimonials, FAQ accordion
- Onboarding journey: 5-step wizard (goal, first habit, reminder time, routine name) ending in a paywall screen with trial CTA
- Today (authed): the routine as a checklist of ritual cards, a 'Start routine' guided flow that shows one ritual full-screen at a time with a timer and a Done button, confetti on finish
- Habit library: browse and add habits by category, with is_free vs premium badges
- Journeys: grid of programs; detail page lists letters and unlockable habits with lock badges on premium items
- Progress: streak flame, weekly completion grid, totals, best streak
- Profile: goal, reminder time, theme, manage subscription
- Admin (role-gated): habit and journey CRUD tables with is_free toggle and letter editor

## Prisma schema
User (id, email, name, goal, reminderTime, isPremium, trialEndsAt, streakCount, lastCompletedDate), Habit (id, name, icon, description, category, defaultTime, isFree), Routine (id, userId, name) with RoutineItem (routineId, habitId, sortOrder), Journey (id, title, description, coverUrl, durationDays) with JourneyLetter (journeyId, dayNumber, title, body, unlocksHabitId), Completion (userId, habitId, completedAt)

## Logic
- Guided routine player advances ritual by ritual; each ritual can have an optional countdown timer; marking the last one Done writes Completions and updates the streak
- Streak: one increment per calendar day when every ritual in the active routine is completed; reset to 1 after a missed day
- Completing a journey letter unlocks its unlocksHabitId habit (if any) and reveals the next letter in sequence
- Locked content opens a paywall modal; 'Start free trial' sets isPremium with trialEndsAt = now + 7 days (mock checkout is fine, structure it so Stripe can replace it)
- Reminder time stored per user (UI only, no real push needed in this build)

## Tech notes
- Use NextAuth (or a simple session) with a role field so the admin routes are gated; everything else is per-user
- Keep the guided-player state in a React context so refreshing mid-routine doesn't lose progress
- Build the progress heat map with a CSS grid, not a heavy chart library

## Style
Warm, optimistic, illustration-led: peach-to-gold sunrise gradients, rounded-3xl cards, big friendly buttons, a rounded display font for headings + Inter body, confetti micro-interaction on completion. Mobile-first, light theme.

Seed: 14 habits across 4 categories, 2 journeys of 7 letters each, demo user with a 3-day streak and a 4-ritual morning routine.

Build a production-quality Fabulous-style habit-coaching app. Mobile-first PWA now, React Native port later - structure shared logic accordingly.

## Stack
- Next.js 14 App Router + TypeScript + Tailwind + shadcn/ui, next-pwa for installability
- Supabase: Postgres, Auth (email + Apple/Google OAuth), Storage for journey cover art
- Stripe Billing: monthly + yearly prices, 7-day trial on yearly, customer portal for cancellation
- Zustand for the guided-routine player store; Zod everywhere inputs cross a boundary

## Critical architecture
- RoutinePlayerProvider: drives the one-ritual-at-a-time flow (current index, optional per-ritual timer, advance/back), so the same state machine can back a native screen later
- Entitlements: middleware checks profiles.is_premium; premium journey content is fetched server-side only for entitled users - never ship locked letter bodies to free clients
- Streak logic server-side in a Postgres function (complete_routine) that records Completions and updates streak atomically on routine completion - clients can't fake streaks
- Reminders: store per-habit schedule rows; on the web build, schedule the next local notification via the Notifications API and document the native push path (Expo Notifications / APNs) for the RN port

## Schema
profiles (id, goal, reminder_time, is_premium, trial_ends_at, streak_count, last_completed_date), habits (id, name, icon, description, category, default_time, is_free), routines (id, user_id, name) + routine_items (routine_id, habit_id, sort_order), journeys (id, title, slug, description, cover_path, duration_days) + journey_letters (journey_id, day_number, title, body, unlocks_habit_id), completions (user_id, habit_id, completed_at). RLS on every table.

## Implementation order
1. Scaffold, Supabase schema + RLS policies, auth flows
2. Habits & routines: pick habits, build a routine, the Today checklist - server components, RLS-scoped reads
3. Guided routine player: provider, full-screen one-ritual flow with optional timer, completion writes Completions
4. Onboarding journey -> paywall: multi-step client wizard, results stored on profile, paywall with Stripe Checkout (trial on yearly), webhook handler updates is_premium
5. Journeys & letters: list/detail, premium gating of letter bodies, unlock-a-habit on letter completion
6. Streaks & progress: complete_routine function, progress page with a CSS-grid weekly heat map (no heavy chart lib)
7. PWA + reminders: manifest, offline shell, schedule local reminder notifications, document the native push path

## Quality bar
- Lighthouse PWA installable; the guided flow must not lose progress on refresh (persist player state)
- Conversion events to PostHog (onboarding_step, trial_started, trial_converted, paywall_dismissed)
- Seed script with 14 habits, 2 journeys of 7 letters

Start with step 1 and show me the RLS policies before moving on.

Design the complete UI for a Fabulous-style habit and morning-routine coaching app called Daybreak. React + Tailwind + shadcn/ui + lucide-react. Aesthetic: warm and optimistic - sunrise gradients (peach to gold to soft blue), rounded illustration-style cards, big friendly buttons, a rounded display font for headings with clean sans body, gentle bouncy micro-interactions and confetti on completion. Light theme primary.

## Screens

### 1. Marketing landing
- Full-viewport hero with an animated sunrise gradient, rounded headline 'Build the morning that builds you.', subline, email capture with a glowing CTA button
- Three benefit cards with soft illustrated icons, a 'how it works' three-step strip, pricing toggle (monthly $11.99 / yearly $47.99 with SAVE 60% badge), FAQ accordion, friendly footer

### 2. Onboarding journey (5 steps)
- Progress dots top, one warm question per screen ('What do you want to change?'), big tappable option cards with emoji/illustration icons, smooth slide transitions, then a habit picker and a reminder-time picker, ending on a paywall screen: blurred app preview behind a card listing premium benefits with 'Start 7-day free trial' CTA and a small 'or start with the basics' link

### 3. Today
- Greeting header ('Good morning, Sam ☀️') with a streak flame pill
- The user's routine as a vertical list of ritual cards (illustrated icon, name, target time, check circle)
- A large primary 'Start my routine' button
- Bottom tab bar (Today, Journeys, Progress, Profile) with a soft glow on active

### 4. Guided routine player
- One ritual full-screen: large illustration, ritual name and a one-line why, an optional circular countdown timer, a big 'Done' button, a subtle 'skip' link, progress dots showing which ritual of the routine; finishing shows a confetti celebration screen with the streak count

### 5. Journeys
- A grid of multi-week program cards (cover illustration, title, duration chip), some with a premium lock badge
- Journey detail: a vertical timeline of letters and habits to unlock, completed ones checked, the next one highlighted, the rest dimmed

### 6. Progress
- Avatar header, three stat cards (current streak, rituals completed, best streak), a weekly calendar heat map of completed days, an encouraging message, 'Manage subscription' row with chevron

### 7. Paywall modal
- Card over blurred content: benefit checklist, plan selector (yearly preselected with badge), trial timeline graphic (Today -> Day 5 reminder -> Day 7 charged), primary CTA, restore-purchase link

Fully responsive; design mobile-first since this is primarily a phone experience. Use realistic content: habit names like 'Drink a glass of water', 'Two-minute stretch', 'Read one page', journey titles like 'Make Me Fabulous', 'Sharpen Your Mind', durations 7–21 days.

Build a habit and morning-routine coaching subscription app (Fabulous model) called Daybreak.

## Entities
- Habit: name, icon, description, category (energy/focus/fitness/calm), defaultTime, isFree (boolean)
- Routine: user, name; RoutineItem: routine reference, habit reference, sortOrder
- Journey: title, description, coverImage, durationDays; JourneyLetter: journey reference, dayNumber, title, body, unlocksHabit reference
- Completion: user, habit reference, completedAt
- UserProfile: goal (energy/focus/fitness/calm), reminderTime, isPremium, trialEndsAt, streakCount, lastCompletedDate

## Roles & permissions
- Visitor: sees landing page and pricing only
- Free user: adds habits where isFree = true; sees locked badges on premium journeys; tapping locked content opens paywall
- Premium user: unlocks all journeys and habits
- Admin: full CRUD on habits and journeys, sees a dashboard (total users, premium count, completions per habit)

## Pages
1. Landing: hero, pricing (monthly $11.99 / yearly $47.99 with trial), FAQ
2. Onboarding journey after signup: goal -> first habit -> reminder time -> routine name, ending on the paywall with 'Start 7-day free trial'
3. Today: the user's routine as a checklist, a 'Start routine' guided flow, streak counter in header
4. Guided player: one ritual at a time with an optional timer and a Done button; finishing records Completions and updates streak (one per day)
5. Journeys: grid of programs; detail lists letters and unlockable habits
6. Progress: streak, completions, best streak
7. Admin: habits and journeys tables with create/edit forms

## Rules
- Streak +1 the first time the active routine is fully completed each day; reset to 1 after a missed day
- Trial sets isPremium true and trialEndsAt = now + 7 days; after expiry user reverts to free (check on login)
- Premium journey letters must not be readable by free users

## Look & feel
Warm optimistic theme: sunrise gradients, rounded illustration-style cards, big friendly buttons, a rounded display font for headings, confetti on completion. Mobile-first, light.

Seed with 14 habits across the 4 categories, 2 journeys of 7 letters each, one admin user and one demo user with a 3-day streak and a morning routine.