How to Clone Flo

Create a Flo-style period tracking app called Lunara as a Next.js (App Router) + Tailwind + Prisma + SQLite project.

## Product
Privacy-first cycle tracker: log periods and daily symptoms, get next-period and fertile-window predictions on a calendar, read phase-specific insights. Freemium - tracking free, symptom-pattern insights and full content library premium with a 7-day trial. Privacy features (anonymous mode, PIN, delete-everything) are first-class, not buried.

## Screens
- Marketing landing: soft gradient hero, privacy-promise section with three cards (Anonymous mode / Your data stays yours / Delete anytime), pricing toggle ($7.99/mo, $34.99/yr highlighted), FAQ accordion
- Onboarding wizard: last period date picker, period length, cycle length ('not sure' defaults 28), goal selection; ends on paywall with clear free-continue link
- Today: cycle ring (SVG, animated) showing day N of cycle and phase color, 'Period in N days', quick-log button, contextual insight card, mini 7-day strip calendar
- Calendar: month grid with rose fills for logged period days, rose outlines for predicted, lavender band for fertile window, ring on ovulation day; day click opens the log sheet
- Log sheet (modal): chip groups for flow / mood / symptoms, notes textarea, autosave on selection
- Insights: cards list - free users see 3 unlocked articles + blurred premium pattern cards with lock icons; premium users see computed symptom-pattern cards and the filterable article library
- Settings: anonymous mode toggle, PIN setup, export JSON button, delete-everything button (typed confirmation), subscription status

## Prisma schema
User (id, email nullable, displayName, isPremium, trialEndsAt, pinHash, anonymousMode), Cycle (id, userId, startDate, periodLength, cycleLength nullable), DailyLog (id, userId, date unique per user, flow enum nullable, moods JSON string, symptoms JSON string, note), Article (id, title, body, phase enum, isPremium, readMinutes), Settings (userId, reminderPeriod, reminderFertile, discreetNotifications)

## Logic
- Prediction module (pure functions in lib/cycle.ts with unit-testable exports): avgCycleLength = mean of last 6 completed cycles or onboarding default; nextPeriodStart = lastCycle.startDate + avgCycleLength days; ovulation = nextPeriodStart − 14 days; fertileWindow = [ovulation − 5, ovulation + 1]
- Logging flow on a date more than periodLength days after the current cycle start closes that cycle (compute its cycleLength) and opens a new one
- Pattern insights: for each symptom with 3+ occurrences across 2+ complete cycles, find the modal phase and emit a card ('Cramps most often in your menstrual phase - 5 of 5 cycles')
- Anonymous mode nulls email and shows a recovery code (random 12-char, displayed once); delete-everything cascades all user rows
- 'Start free trial' sets isPremium with trialEndsAt = now + 7 days (mock checkout, structured for Stripe later)

## Components & API routes
- Components: CycleRing (SVG arc), CalendarGrid, LogSheet, ChipGroup, InsightCard, ArticleCard, PaywallModal, PinGate
- API routes: GET /api/predictions (computed server-side from cycles), POST /api/logs (upsert by date), GET /api/insights (premium-gated pattern cards), GET /api/account/export, POST /api/account/delete
- lib/cycle.ts exports pure functions (avgCycleLength, predict, phaseForDate, symptomPatterns) with Vitest tests covering regular, irregular and single-cycle cases
- Calendar renders predictions up to 3 cycles ahead with reduced opacity beyond the next cycle
- PIN lock: a client-side gate held in sessionStorage that re-prompts after 5 minutes idle

## Style
Warm, calm, trustworthy: cream #FFF7F5 background, deep rose #D6336C primary, lavender #A78BFA fertile accents, charcoal #2B2230 text, rounded-2xl cards, Fraunces serif headings + Inter body. Mobile-first with a bottom tab bar (Today, Calendar, Insights, Settings). Phase colors used consistently everywhere.

Seed: demo user with 4 complete cycles (lengths 28, 30, 29, 31) and daily logs showing a realistic pattern (heavy flow days 1–2, luteal headaches and irritability, ovulation-day energy), 12 articles (4 free, 8 premium) spread across phases.

Build a production-quality Flo-style cycle tracking app where privacy engineering is the headline feature. Mobile-first PWA now, React Native later - keep the prediction engine and crypto helpers in framework-agnostic modules.

## Stack
- Next.js 14 App Router + TypeScript + Tailwind + shadcn/ui, next-pwa for installability and offline logging
- Supabase: Postgres + Auth, with RLS policies treated as the primary security boundary
- Stripe Billing: monthly + yearly, 7-day trial on yearly, customer portal; Zod at every boundary; Vitest for the prediction engine
- No third-party analytics SDKs that touch health data - PostHog (self-host or EU cloud) receiving only anonymized funnel events, documented in a PRIVACY.md

## Critical architecture
- CycleEngine (pure TS, zero dependencies, fully unit-tested): given cycles[] and logs[], returns predictions (next period, ovulation, fertile window), current phase for any date, and symptom-phase correlations. All date math in UTC date-strings to dodge timezone bugs - this module is the product, test it like it
- Local-first logging: daily logs write to IndexedDB first and render optimistically; a sync layer pushes to Supabase when online. The app must work fully offline for logging and predictions
- Sensitive-field encryption: symptoms, moods and notes are encrypted client-side (WebCrypto AES-GCM) with a key derived from the user's passphrase via PBKDF2 - the server stores ciphertext. Document the tradeoff: forgotten passphrase = unrecoverable notes, surfaced honestly in onboarding
- Account deletion is a single transaction that hard-deletes every user row and is verified by a test; export produces a complete JSON of the user's data. These two endpoints are non-negotiable

## Schema
profiles (id, display_name, is_premium, trial_ends_at, anonymous_mode, pin_hash), cycles (id, user_id, start_date, period_length, cycle_length), daily_logs (id, user_id, date, flow, encrypted_payload bytea, payload_nonce), articles (id, title, slug, body, phase enum, is_premium, read_minutes), user_settings (user_id, reminders jsonb, discreet_notifications). RLS: users see only their own rows; articles readable by all, premium bodies served only to entitled users via an RPC.

## Implementation order
1. Scaffold, Supabase schema + RLS, auth including anonymous accounts (Supabase anonymous sign-in + recovery code)
2. CycleEngine with exhaustive tests: regular cycles, irregular (21–40 day) cycles, single-cycle cold start, log-driven cycle rollover, symptom correlation thresholds
3. Today + Calendar UI: cycle ring (SVG arc, animated), month grid with phase markers driven entirely by CycleEngine output
4. Daily log: chip-based sheet, IndexedDB-first persistence, client-side encryption, background sync
5. Insights: pattern cards from CycleEngine correlations (premium-gated server-side), article library with phase filtering
6. Paywall + Stripe: checkout with trial, webhook updating is_premium, settings page with subscription management
7. Privacy surface: PIN lock screen (sessionStorage gate), export endpoint, delete-everything with typed confirmation, PRIVACY.md rendered as a public page

## Quality bar
- CycleEngine at 100% branch coverage; predictions match hand-computed fixtures for at least 5 cycle scenarios
- Lighthouse PWA installable; airplane-mode test: log a day offline, reload, see it synced when back online
- Zero health data in analytics events - verify by inspecting the PostHog payloads in a test; events limited to onboarding_completed, trial_started, paywall_viewed, article_read
- Accessibility: phase information is never conveyed by color alone - pair every marker with a label or icon; respect prefers-reduced-motion on the cycle ring animation
- Calendar predictions render up to 3 cycles ahead with confidence visually fading beyond the next cycle
- Seed script: demo user with 4 realistic cycles and patterned logs, 12 articles

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

Design the complete UI for a privacy-first period tracking app called Lunara (Flo model). React + Tailwind + shadcn/ui + lucide-react. Aesthetic: warm and calm, never clinical - cream #FFF7F5 background, deep rose #D6336C primary, lavender #A78BFA for fertility accents, charcoal #2B2230 text, rounded-2xl cards, Fraunces serif headings with Inter body, soft shadows, gentle 200ms transitions. Phase colors are a consistent system: rose (menstrual), peach #FFB088 (follicular), lavender (ovulation), plum #9D5C8F (luteal).

## Screens

### 1. Marketing landing
- Soft gradient hero (cream to blush), serif headline 'Know your cycle. Keep it yours.', subline about privacy, rose CTA button
- Privacy promise strip: three cards with shield/lock/trash icons (Anonymous mode, Encrypted by default, Delete anytime)
- App preview section, pricing toggle (monthly $7.99 / yearly $34.99 with SAVE badge), FAQ accordion, warm footer

### 2. Onboarding (4 steps)
- Progress dots, one question per screen with large friendly controls: a calendar date picker for last period, steppers for period/cycle length with an 'I'm not sure' ghost button, goal cards with soft icons
- Final paywall: glass card on blurred app preview, benefit checklist, 'Start 7-day free trial' rose CTA and an honest, visible 'Continue with free' text link

### 3. Today (home)
- Greeting and date, then the centerpiece: a large animated cycle ring - a circular arc segmented by phase colors with a dot at today's position, center showing 'Day 24' and 'Luteal phase'
- 'Period in 5 days' headline beneath, big rounded quick-log button (+), contextual insight card with a small illustration ('Day 24: feeling irritable is common now - here's why'), 7-day strip calendar with phase-colored dots
- Bottom tab bar: Today, Calendar, Insights, Settings - soft rose glow on active

### 4. Calendar
- Month header with chevrons, weekday row, day grid: filled rose circles for logged period days, dashed rose outlines for predicted, a continuous lavender pill band across the fertile window, a lavender ring on ovulation day
- Legend row beneath; tapping a day opens the log sheet

### 5. Daily log sheet (bottom sheet)
- Date title, sections with chip groups: Flow (light/medium/heavy as droplet icons of increasing fill), Mood (5 emoji-style chips), Symptoms (8 chips that fill rose when selected), private Notes textarea with a small lock icon, autosave indicator - no submit button

### 6. Insights
- Premium pattern cards at top: stat-style cards like 'Headaches • Luteal phase • 4 of 5 cycles' with a tiny phase-colored bar chart; free users see these blurred with a lock and 'Unlock your patterns' CTA
- Article library below: cards with phase tag pill, title, read time; filter pills by phase across the top

### 7. Settings & privacy
- Grouped list: Anonymous mode toggle with explainer, PIN lock row, Reminders (with 'discreet wording' sub-toggle), Export my data row, and a clearly separated danger zone with 'Delete everything' in red - confirmation dialog requires typing DELETE
- Subscription card showing plan and trial days remaining, manage link
- A 'Privacy pledge' row linking to a plain-language page with the three promises restated and a last-updated date

Fully responsive, designed mobile-first. Use realistic, respectful content - symptom names like 'cramps', 'bloating', 'tender breasts'; insight copy that is warm and factual, never cutesy or alarmist.

Build a privacy-first period and cycle tracking app (Flo model) called Lunara.

## Entities
- Cycle: startDate, periodLength, cycleLength (set when the next cycle begins), owner
- DailyLog: date (one per user per day), flow (none/light/medium/heavy), moods (multi-select), symptoms (multi-select: cramps, headache, bloating, tender breasts, acne, fatigue, backache, nausea), note, owner
- Article: title, body, phase (menstrual/follicular/ovulation/luteal/any), isPremium, readMinutes
- UserProfile: displayName, isPremium, trialEndsAt, anonymousMode, pinEnabled, reminderPreferences, discreetNotifications

## Roles & permissions
- Visitor: landing page and pricing only
- Free user: full logging and calendar, basic predictions, 3 free articles; pattern insights and premium articles show locked previews
- Premium user: symptom-pattern insights, full article library, cycle report export
- Admin: manages articles only - admins must NOT be able to browse individual users' logs; the admin dashboard shows aggregate counts only (total users, premium count, articles)

## Pages
1. Landing: soft hero, privacy promise section (anonymous mode, no data selling, delete anytime), pricing ($7.99/mo or $34.99/yr with 7-day trial), FAQ
2. Onboarding: last period date, period length, cycle length (default 28), goal; ends on paywall with a clear continue-free option
3. Today: cycle ring showing current day and phase, days until next period, quick-log button, one contextual insight card matching today's phase
4. Calendar: month grid - logged period days filled rose, predicted period outlined, fertile window banded lavender, ovulation ringed; tap a day to log
5. Log: chip selectors for flow, moods and symptoms plus a notes field; saves instantly per selection
6. Insights: premium pattern cards ('symptom X most often in phase Y - N of M cycles') and the article library filtered by phase; locked state for free users
7. Settings: anonymous mode, PIN lock, export my data, delete everything (typed confirmation), subscription status
8. Admin: article CRUD and aggregate stats

## Rules
- Predictions: average the last 6 completed cycle lengths (or the onboarding default); next period = last cycle start + average; ovulation = next period minus 14 days; fertile window = ovulation minus 5 days through ovulation plus 1 day
- Logging flow well after the current cycle's period closes that cycle and starts a new one; all predictions recompute
- Pattern insights require 2+ complete cycles and 3+ occurrences of a symptom before showing a card
- Anonymous mode detaches email from the account and issues a one-time recovery code; delete everything immediately and permanently removes all of the user's data
- Trial sets isPremium true and trialEndsAt = now + 7 days; revert to free on expiry (checked at login)
- Notifications with discreet wording enabled never mention periods or symptoms in their text

## Look & feel
Warm cream background #FFF7F5, deep rose #D6336C primary, lavender #A78BFA fertility accents, charcoal text, rounded-2xl cards, serif headings. Calm, respectful, never clinical. Mobile-first with bottom tabs (Today, Calendar, Insights, Settings).

Seed with one demo user with 4 complete cycles (28–31 days) and realistic daily logs (day 1–2 heavy flow and cramps, luteal-phase headaches and irritability), 12 articles across phases (4 free, 8 premium), and one admin user.