How to Clone Forest

Create a Forest-style focus-timer app called Timbergrove as a Next.js (App Router) + Tailwind + Prisma + SQLite project.

## Product
A gamified Pomodoro-style timer. Plant a tree, focus for a set time, and the tree grows; leave the app and it dies. Completed sessions earn coins spent in a shop to unlock new tree species. A history view shows the forest you've grown.

## Screens
- Marketing landing: forest hero, 'Grow a forest, kill your phone habit', three feature cards, full-forest screenshot, FAQ accordion
- Plant (home): circular dial, duration picker (10/25/45/60/90), species selector from unlocked species, coin balance, 'Plant' button
- Growing: full-screen countdown with an SVG tree that scales/colors from sapling to tree; a visibilitychange listener flags the session withered if the tab is hidden too long
- Forest history: month calendar grid of grown trees + dead stumps, stat cards (today / week / total focused minutes)
- Shop: species grid with coin prices, owned badge, buy action
- Profile: total hours, streak, species owned, real-trees-funded progress bar

## Prisma schema
User (id, email, name, coinBalance, currentStreak, lastSessionDate, realTreesFunded), Species (id, name, coinPrice, imageKey, isDefault), UserSpecies (userId, speciesId), Session (id, userId, speciesId, durationMinutes, tag, status, startedAt, endedAt)

## Logic
- Timer runs client-side with a ref; on completion POST a 'completed' session, award coins = durationMinutes, update streak server-side
- document.visibilityState === 'hidden' for more than ~8 seconds during a session -> mark withered, award nothing (note in code that web detection is best-effort and a native app is needed for hard enforcement)
- Streak: +1 on first completion of a new calendar day, reset to 0 if the previous active day was not yesterday
- Shop purchase: deduct coins atomically in a transaction, insert UserSpecies; every 500 coins spent increments realTreesFunded

## Tags & stats
- A tag picker (Study/Work/Read/Other) on the plant screen, default to the last used
- Profile shows a weekly bar chart of focused minutes per tag and today's total focused time
- A current-streak counter in the header, computed from completed sessions

## Style
Cozy nature theme: forest green #2F5D3A, warm cream #F7F3E8, soft shadows, rounded-2xl cards, a friendly Quicksand-style rounded font, gentle grow transitions. Mobile-first, optional dark night-forest mode.
- Encouraging microcopy on success and gentle copy on a withered tree - never punitive

Seed: 8 species (3 free), a demo user with 240 coins, a 3-day streak, and ~14 days of completed and withered sessions across study/work/read tags.

Build a production-quality Forest-style focus timer. Mobile-first PWA now, React Native port later - structure shared logic so the timer and economy live in platform-agnostic modules.

## Stack
- Next.js 14 App Router + TypeScript + Tailwind + shadcn/ui, next-pwa for installability
- Supabase: Postgres, Auth (email + Apple/Google OAuth), Realtime for the optional group-plant feature
- Stripe for web coin-pack purchases; structure entitlements so RevenueCat slots in for mobile IAP later
- Zustand for the active-session store; Zod at every input boundary

## Critical architecture
- Timer integrity: never trust the client for elapsed time. Store startedAt server-side; on completion the server computes durationMinutes from timestamps and awards coins - a client claiming a 90-min session it didn't run gets rejected (compare server now() to startedAt).
- Leave-detection: a TimerProvider listens to visibilitychange + blur; hidden longer than a grace window transitions the session to 'withering' then 'withered'. Document clearly in code that web cannot truly enforce this (a determined user switches apps); the hard kill belongs to the native build via app lifecycle APIs.
- Coin/streak mutations in a Postgres function (complete_session) so they're atomic and unspoofable; RLS so users only read/write their own rows.

## Schema
profiles (id, coin_balance, current_streak, last_session_date, real_trees_funded), species (id, name, coin_price, image_key, is_default), user_species (user_id, species_id), sessions (id, user_id, species_id, duration_minutes, tag, status enum[active|completed|withered], started_at, ended_at). RLS on every table.

## Implementation order
1. Scaffold, Supabase schema + RLS, auth flows, seed species
2. Timer core: TimerProvider, plant screen, full-screen growing screen with an SVG/Lottie tree, visibilitychange handling, server-side complete_session function
3. Economy: coin wallet, shop with atomic purchase transaction, species unlock, real-tree milestone
4. History & stats: forest calendar grid (CSS grid, no heavy chart lib), tag breakdown, streak display
5. Group plant (optional): Supabase Realtime room where any member leaving withers everyone's tree
6. PWA: manifest, offline shell, install prompt; analytics events (session_completed, session_withered, coins_spent)

## Quality bar
- Timer survives a screen lock on the growing screen where the platform allows; document iOS Safari background-tab throttling and the chosen mitigation
- No way to farm coins by spoofing durations - prove it with the server-side timestamp check
- The grow animation is genuinely pleasant; the withering state is clear but not harsh
- Seed script: 8 species, a demo user with two weeks of mixed sessions

## Out of scope for v1
- Real app/site blocking (needs OS-level APIs); the web version only detects tab focus loss

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

Design the complete UI for a Forest-style focus-timer app called Timbergrove. React + Tailwind + shadcn/ui + lucide-react. Aesthetic: cozy nature - forest green (#2F5D3A) and warm cream (#F7F3E8), soft rounded cards, friendly hand-drawn-feeling tree illustrations, a rounded Quicksand-style display font, gentle organic transitions.

## Screens

### 1. Marketing landing
- Hero with a softly animated growing sapling illustration, headline 'Stay focused. Grow a forest.', subline, email capture with a leafy CTA button
- Three feature cards (Plant & focus, Earn coins, Plant real trees) with hand-drawn icons, a screenshot of a lush full forest grid, FAQ accordion, warm footer

### 2. Plant (home)
- A large centered circular dial with a small sapling inside, a horizontal duration picker as soft pills (10/25/45/60/90 min), a species selector row of round tree thumbnails, a coin-balance pill top-right with a coin icon, a big 'Plant' button, and a small gentle note 'Leave and your tree won't make it'

### 3. Growing (focus) screen
- Full-screen calm gradient sky, the tree centered and visibly larger than on the plant screen with a filling ring around it, a big monospace countdown, a subtle 'Give up' text link at the bottom; design an alternate 'wilting' state (drooping tree, amber warning) for when focus is lost

### 4. Forest history
- A month calendar grid where each day cell shows tiny tree icons for sessions grown (and grey stumps for withered ones), three stat cards above (Today, This week, Total hours), and a tag-breakdown bar

### 5. Shop
- A grid of tree-species cards, each with an illustration, a name, a coin price tag, and an owned/locked state; a coin balance header and a tasteful 'buy coins' banner

### 6. Profile & real trees
- Avatar header, stat cards (total focused hours, current streak with a flame, species owned), and a hero 'Real trees funded' progress bar with a count and a leafy milestone graphic
- A weekly bar chart of focused minutes broken down by tag (Study, Work, Read)

### 7. Empty & celebration states
- A warm empty forest ('Plant your first tree') and a small celebration toast/confetti when a session completes or a real tree is funded

### 8. Buy-coins sheet
- A friendly sheet with a few coin-pack options (small/medium/large) and a line explaining that spending coins funds real trees

### 9. Onboarding
- A 3-screen intro explaining the plant-and-focus loop, the kill-the-tree consequence, and the real-tree mission, ending on the plant screen

Fully responsive, mobile-first since this is mainly a phone app. Use realistic content: species names like 'Cherry Blossom', 'Maple', 'Baobab', durations 10–90 min, encouraging copy that never scolds. Include an optional dark 'night forest' variant of the focus screen.

Build a gamified focus-timer app (Forest model) called Timbergrove.

## Entities
- Species: name, coinPrice, image, isDefault (boolean)
- Session: user, species reference, durationMinutes, tag (study/work/read/other), status (active/completed/withered), startedAt, endedAt
- UserSpecies: user, species reference (records which species a user has unlocked)
- UserProfile: coinBalance, currentStreak, lastSessionDate, realTreesFunded

## Roles & permissions
- Visitor: sees landing page only
- User: plants trees, runs sessions, earns and spends coins, unlocks species, views their own forest history
- Admin: full CRUD on species, sees a dashboard (total users, sessions completed vs withered, coins spent, real trees funded)

## Pages
1. Landing: hero, how-it-works, FAQ
2. Plant (home): duration picker, species selector, coin balance, 'Plant' button
3. Growing: countdown with a growing tree; leaving the page during a session withers it (no reward)
4. Forest history: calendar grid of grown trees and stumps, stat cards (today / week / total focused minutes)
5. Shop: species grid with coin prices and owned badges; buying spends coins
6. Profile: total hours, streak, species owned, real-trees-funded milestone bar
7. Admin: species table with create/edit and a stats dashboard

## Rules
- Completing a session awards coins equal to durationMinutes and records a 'completed' session
- Leaving the growing page during a session marks it 'withered' with no reward
- Streak +1 on the first completed session each day; reset to 0 after a missed day
- Every 500 coins spent increments realTreesFunded by 1
- A user can only select species they have unlocked

## Look & feel
Cozy nature theme: forest green and warm cream, soft rounded cards, friendly tree illustrations, encouraging tone. Mobile-first.

Seed with 8 species (3 free, 5 paid), one admin user, and one demo user with 240 coins, a 3-day streak and two weeks of mixed completed and withered sessions.