How to Clone Sleep Cycle

Create a Sleep Cycle-style smart-alarm and sleep-tracking app called Drowze as a Next.js (App Router) + Tailwind + Prisma + SQLite project.

## Product
A smart alarm that wakes you at a light-sleep moment in a chosen window, plus a morning sleep graph, history, trends and sleep-aid sounds. Freemium: free alarm + latest-night graph, premium for trends/sounds/notes. (Overnight mic tracking is native; simulate a tracked night in this web build.)

The selling point is 'no wearable needed' - the phone is the sensor. Keep the free smart alarm and morning graph compelling so a habit forms before the upsell.

## Screens
- Marketing landing: nighttime hero, how-it-works, pricing (yearly $39 / monthly $7.99, yearly highlighted), FAQ accordion
- Tonight: wake-window picker, alarm sound + optional sleep-aid sound with fade timer, 'Start session' -> dim night screen with a clock and a 'simulate night' button
- Morning report: hypnogram (awake/light/deep), time in bed vs asleep, 0–100 quality score, mood prompt, add-a-note chips
- History: calendar heat map + list of nights with quality scores
- Trends (premium): weekly/monthly quality chart, averages, weekday vs weekend
- Sounds (premium): sleep-aid soundscape library with play + fade-out timer
- Night detail: a single night's report reopened, with its notes and stats
- Admin (role-gated): sounds CRUD + aggregate stats

## Prisma schema
User (id, email, name, isPremium, wakeWindowStart, wakeWindowEnd, alarmSound), Night (id, userId, date, inBedAt, asleepAt, wokeAt, qualityScore, phases Json, mood), Note (nightId, label), Sound (id, title, category, audioUrl, isPremium)

## Logic
- 'Simulate night' generates a plausible hypnogram and computes a quality score (from time asleep, interruptions, phase balance) - keep the scoring function pure and documented
- The smart alarm picks the wake time as the first 'light' phase inside the window, with a hard fallback at the window end (mock the timing logic clearly)
- A wake-up mood selected on dismissal is stored on the night for later correlation
- Night notes (caffeine/exercise/stress/alcohol) attach to a date so trends can show their effect
- The sleep-aid sound plays on a fade-out timer that stops audio after the chosen minutes
- Premium gates trends, sounds and notes; mock checkout structured so Stripe (yearly + trial) replaces it

## Privacy
Sleep data is personal; in production audio is analyzed on-device and clips stay local - note that on the site. All endpoints auth-gated and user-scoped; DELETE /api/account wipes nights and notes

## Style
Restful dark: deep indigo/navy gradients, soft stars, a glowing clock, rounded-2xl cards, large legible numerals, gentle transitions, Inter. Mobile-first.

Seed a demo user with 21 nights of realistic data, a few notes, and 8 sleep-aid sounds across categories like Rain, White noise and Ambient.

Build a production-quality Sleep Cycle-style smart-alarm and sleep-tracking app. Mobile-first PWA now, React Native port later - and be explicit that real overnight tracking is NATIVE (continuous microphone capture + a reliable background alarm), so isolate that behind an interface and ship a simulated provider for the web/dev build.

## Stack
- Next.js 14 App Router + TypeScript + Tailwind + shadcn/ui, next-pwa
- Supabase: Postgres, Auth, Storage; RLS on every user-scoped table
- A SleepTracker interface (MicTracker | Simulated) - the RN app implements MicTracker with on-device audio analysis; the web app uses Simulated
- Audio for sleep-aid sounds served from a CDN (zero-egress like R2); store only sound metadata in the DB
- Stripe Billing: yearly + monthly, 7-day trial on yearly, customer portal; Zod at boundaries

## Critical architecture
- On-device-first audio: in the real app the microphone signal is analyzed locally to estimate movement/breathing/snore; raw audio never leaves the device unless the user opts into encrypted clip storage. Persist only derived summaries (phases, score), never raw audio, server-side. Document this and surface it as a privacy promise.
- The smart-alarm logic and the quality-scoring function are pure, versioned and unit-tested: alarm fires at the first detected light-sleep phase within the user's window (with a hard fallback at the window end); quality score is documented (time asleep, interruptions, phase balance).
- Sleep data privacy: nights, notes and any clips are strictly user-scoped via RLS, never in URLs, with a cascading account-deletion routine. Prove cross-user isolation with a test.

## Schema
profiles (id, is_premium, wake_window_start, wake_window_end, alarm_sound), nights (id, user_id, date, in_bed_at, asleep_at, woke_at, quality_score, phases jsonb, mood), notes (night_id, label), sounds (id, title, category, audio_path, is_premium). RLS on profiles/nights/notes.

## Implementation order
1. Scaffold + schema + RLS + the scoring + alarm-selection functions with tests (show me those functions first)
2. SleepTracker interface + Simulated provider that generates a plausible night
3. Tonight setup (wake window, sounds) + night session screen + morning report (hypnogram, score, mood)
4. History (calendar heat map via CSS grid) + night detail + notes
5. Trends (SVG/CSS charts, no heavy lib) + premium gating + Stripe (yearly + trial) + webhook
6. Sleep-aid sounds library with fade-out timer (premium)
7. PWA + account deletion; document the native MicTracker plan (background audio, permissions, battery) for the RN port

## Quality bar
- Scoring + alarm functions deterministic and fully tested
- No raw audio persisted server-side; no cross-user data access (prove with tests)
- Trial events to PostHog (trial_started, trial_converted, paywall_dismissed)
- Swapping Simulated for the native MicTracker requires no changes outside the SleepTracker implementation
- Document the native plan (background audio capture, microphone permission, battery) for the RN port
- Seed 21 nights of realistic data + 8 sounds

Start with step 1.

Design the complete UI for a Sleep Cycle-style smart-alarm and sleep-tracking app called Drowze. React + Tailwind + shadcn/ui + lucide-react. Aesthetic: restful and nocturnal - deep indigo-to-navy gradients, a scatter of soft stars, a softly glowing clock as a motif, rounded cards, large legible numerals, slow gentle transitions. Dark theme, mobile-first.

## Screens

### 1. Marketing landing
- Nighttime hero: a phone on a nightstand under a starry gradient, headline 'Wake up rested. No wearable needed.', subline about the phone listening while you sleep, store-badge CTAs
- A how-it-works band (Set a wake window -> Phone tracks your sleep -> Wake at the perfect moment), three benefit cards, pricing card (yearly $39 with SAVE badge / monthly $7.99), FAQ accordion, footer

### 2. Tonight (alarm setup)
- A large central clock, a wake-window picker shown as a range on a dial (e.g. 6:30–7:00), an alarm-sound row, an optional sleep-aid sound row with a fade-timer chip, and a big glowing 'Start sleep session' button

### 3. Night session screen
- A very dim, minimal screen: a huge soft clock, a tiny 'tracking' indicator, a small dismissable hint, and (for the demo) a subtle 'simulate night' control

### 4. Wake-up / alarm ringing
- A gentle full-screen wake state: a softly brightening gradient, the time, a large 'Stop' and a small 'Snooze', and an immediate one-tap mood prompt ('How do you feel?') as a row of emoji

### 5. Morning report
- A hero sleep-quality ring (e.g. 82%), a hypnogram across the night (awake/light/deep bands)
- Stat tiles (time in bed, time asleep, times awake, went to bed), a 'How do you feel?' mood selector, and an 'add a note' chip row (caffeine, workout, stress)

### 6. Snore / sounds detected (premium)
- A timeline of detected sound events overnight with little waveform thumbnails and play buttons, plus a 'snore time' summary stat

### 7. History
- A monthly calendar heat map where each night is tinted by quality, a list below of recent nights with their score pills, and a small trend sparkline up top

### 8. Trends (premium)
- A clean weekly/monthly quality line chart with a goal band, average-time-asleep and average-quality stat cards, and a weekday-vs-weekend comparison

### 9. Paywall
- A glass card over a blurred trends preview: a benefit checklist (long-term trends, snore recordings, sleep-aid sounds), a plan selector (yearly preselected with a SAVE badge), and a 'Start 7-day free trial' CTA

### 10. Profile
- A nocturnal account screen: subscription status with an upgrade card, default wake-window and alarm-sound settings, and a clear 'Delete my sleep data' row

Fully responsive, mobile-first. Use realistic content: a quality score of 82%, 7h04m asleep, in bed 11:18pm, woke 6:52am, a believable hypnogram, mood emoji, night labels like 'Late coffee' and 'Workout'.

Build a smart-alarm and sleep-tracking app (Sleep Cycle model) called Drowze. Real overnight tracking uses the phone microphone (a native feature); in this build, simulate a tracked night so it is fully explorable.

## Entities
- Night: user, date, inBedAt, asleepAt, wokeAt, qualityScore, phases (json hypnogram), mood
- Note: night reference, label (caffeine/exercise/stress/alcohol)
- Sound: title, category, audioFile, isPremium
- UserProfile: isPremium, wakeWindowStart, wakeWindowEnd, alarmSound

## Roles & permissions
- Visitor: sees landing page and pricing only
- Free user: smart alarm + the morning graph for the latest night
- Premium user: full history trends, sleep-aid sounds, night notes
- Admin: CRUD on sounds, sees a dashboard (users, premium count, average quality)

## Pages
1. Landing: hero ('Wake up rested. No wearable needed.'), how-it-works, pricing (yearly $39 / monthly $7.99 with trial), FAQ
2. Tonight: wake-window picker, alarm + optional sleep-aid sound with fade timer, 'Start session' -> a dim night screen with a clock and a 'simulate night' control
3. Morning report: hypnogram, time in bed vs asleep, 0–100 quality score, mood prompt
4. History: calendar heat map + list of nights with quality scores
5. Trends (premium): weekly/monthly quality, averages, weekday vs weekend
6. Sounds (premium): sleep-aid soundscape library with play + fade-out timer
7. Admin: sounds table with create/edit forms and file uploads

## Rules
- Free gives the smart alarm and the latest-night graph; premium unlocks trends, sounds and notes
- Quality score is computed from time asleep, interruptions and phase balance; show how
- The smart alarm rings at the first light-sleep moment inside the wake window, with a fallback at the window end
- A wake-up mood captured on dismissal is stored on the night for correlation
- Trial sets isPremium true with a 7-day window; revert to free on expiry
- Privacy: in production audio is analyzed on-device and raw clips stay local; all data is user-scoped with a delete-my-data action

## Look & feel
Restful and nocturnal: deep indigo/navy gradients, soft stars, a glowing clock, rounded cards, large legible numerals. Dark theme, mobile-first.

Seed a demo user with 21 nights of realistic data, a few notes, one admin user, and 8 sleep-aid sounds.