How to Clone Daylio

Create a Daylio-style no-typing mood diary called Tally as a Next.js (App Router) + Tailwind + Prisma + SQLite project.

## Product
Tap-to-log mood journal: pick a mood face, tap activity icons, optional one-line note. The payoff is charts and a colored calendar. Freemium - core tracking free; custom moods/activities, advanced stats and themes behind a yearly subscription or a one-time lifetime unlock.

## Screens
- Marketing landing: clean hero with a mood-calendar screenshot, three benefit cards, pricing (yearly $29.99 / lifetime $59.99), testimonials, FAQ accordion
- Onboarding: 3-step (name, reminder time, first mood) dropping into a populated app
- Log entry: 5-face mood picker, grouped toggleable activity icon grid, optional note, Save
- Calendar: month grid colored by daily mood, tap a day to view/edit the entry
- Timeline: reverse-chronological list of past entries (mood face, date, activity chips, note snippet) with edit and delete
- Stats: average mood, mood-over-time line chart, activity-frequency bar chart, a mood-by-activity correlation card; advanced charts gated with a premium lock
- Settings: manage custom moods and activities (premium), reminder time, theme, privacy lock, manage subscription

## Prisma schema
User (id, email, name, reminderTime, isPremium, streakCount, lastEntryDate), Mood (id, userId nullable for defaults, label, level, color, emoji), Activity (id, userId, name, icon, group), Entry (id, userId, entryDate, moodId, note), EntryActivity (entryId, activityId)

## Logic
- Saving an entry upserts by (userId, entryDate) so editing the day updates rather than duplicates; recompute streak on save
- Streak: one increment per calendar day with an entry; reset to 1 after a missed day
- Stats are derived from entries on the fly (average mood, mood-over-time, activity frequency, mood-by-activity), not stored
- Free users see the default moods and a fixed activity set; adding custom moods/activities or opening advanced stats triggers the paywall modal
- 'Go premium' sets isPremium (mock checkout is fine, structure it so Stripe can replace it); support both a subscription and a one-time lifetime flag
- Reminder time stored per user (UI only, no real push needed in this build)

## Tech notes
- Default moods and activities have a null userId; user-created ones carry their userId so each user only sees defaults plus their own
- Treat the local store as the source of truth so logging feels instant; persist to the DB and recompute stats on read
- Build the calendar and any heat map with a CSS grid, not a heavy chart library; use Recharts only for the line and bar charts

## Style
Clean and friendly: pastel mood color scale (green->yellow->red), rounded-2xl cards, generous whitespace, big tap targets, a rounded sans font, animated charts (Recharts). Mobile-first, light theme with a dark variant.

Seed: 5 default moods, ~16 activities across groups, demo user with 30 days of varied entries so every chart renders.

Build a production-quality Daylio-style mood diary. Local-first, 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 and offline use
- Local-first store: IndexedDB (Dexie) as the source of truth so logging works fully offline and instantly
- Optional cloud: Supabase (Postgres + Auth) for encrypted backup and cross-device sync - additive, app works with no account
- Stripe Billing: yearly subscription + a one-time lifetime price; RevenueCat-style entitlement flag on the profile
- Recharts for stats; Zod for any data crossing the sync boundary

## Critical architecture
- Local-first data layer: all reads/writes hit Dexie; a sync engine pushes a change log to Supabase when signed in and online, with last-write-wins per entry keyed by (user, entry_date)
- Entitlements: a single isPremium flag gates custom moods/activities and advanced stats; enforce in the UI and, for synced data, validate server-side
- Stats are derived, not stored: compute average mood, mood-over-time, activity frequency and mood-by-activity correlation from entries on the fly and memoize
- Privacy: optional PIN/biometric gate before the app shell; if E2E encryption is enabled, encrypt entry notes client-side before sync

## Schema (cloud mirror)
profiles (id, reminder_time, is_premium, is_lifetime, streak_count, last_entry_date), moods (id, user_id nullable, label, level, color, emoji), activities (id, user_id, name, icon, group), entries (id, user_id, entry_date, mood_id, note, updated_at), entry_activities (entry_id, activity_id). RLS on every user-scoped table.

## Implementation order
1. Local-first core: Dexie schema, the tap-to-log entry screen, timeline - fully offline, no account
2. Calendar + stats: month calendar colored by mood, derived charts (mood-over-time, activity frequency, mood-by-activity)
3. Reminders & streaks: daily local notification, streak computed on save
4. Premium gating: custom moods/activities and advanced stats behind isPremium; Stripe Checkout for yearly + lifetime; webhook sets the flag
5. Auth + sync: optional sign-in, push/pull change log to Supabase with conflict resolution, RLS policies
6. Privacy: PIN/biometric lock, optional client-side note encryption
7. PWA polish: installable, offline shell, export entries to CSV/JSON

## Quality bar
- Logging a day works with the network off and feels instant; sync reconciles cleanly when back online
- Charts render correctly with sparse data and 1+ years of data
- Seed script with 30+ days of entries; document the sync conflict strategy

Start with step 1 (the offline local-first core) and show me the Dexie schema and the entry flow before adding sync.

Design the complete UI for a Daylio-style no-typing mood diary called Tally. React + Tailwind + shadcn/ui + lucide-react + Recharts. Aesthetic: clean, friendly, slightly playful - a pastel mood color scale from green (great) through yellow to red (awful), rounded-2xl cards, generous whitespace, big tap targets, smooth chart animations, a rounded sans font. Light theme primary with a dark variant.

## Screens

### 1. Marketing landing
- Clean hero with a phone mockup of the colored mood calendar, headline 'Your diary, in five seconds a day.', subline, primary CTA
- Three benefit cards (no typing, see patterns, private), a 'how it works' three-step strip, pricing cards (yearly $29.99 / lifetime $59.99 highlighted), FAQ accordion, simple footer

### 2. Onboarding (3 quick steps)
- Progress dots, friendly one-question screens: your name, a daily reminder-time picker, and a first mood log; warm slide transitions that drop the user straight into a populated app

### 3. Log entry (the hero screen)
- Large prompt 'How was your day?' with a row of five big mood faces (rad, good, meh, bad, awful), the selected one enlarging with its color
- Below: grouped activity icon grid (Work, Health, Social, Sleep, Food) with toggleable chips, an optional one-line note field, a big Save button

### 4. Calendar
- Month grid where each day cell is filled with its mood color (empty days neutral), month switcher at top, a small legend; tapping a day opens that entry in a sheet
- A compact streak pill and a 'days logged this month' count above the grid

### 5. Stats
- Average-mood number with a trend arrow, a mood-over-time line chart, a horizontal bar chart of most-logged activities, and a 'mood by activity' insight card ('You feel better on Exercise days'); a couple of advanced charts shown blurred with a premium lock badge

### 6. Timeline & entry detail
- Reverse-chronological list of entries (mood face, date, activity chips, note snippet); entry detail sheet with edit and delete

### 7. Settings & paywall
- Rows for moods & activities (custom = premium), reminder time, theme, privacy lock, and a clean paywall card: benefit checklist, plan selector (yearly vs lifetime), trial timeline, CTA, restore-purchase link
- A custom mood/activity editor sheet: pick an emoji or icon, a color, a label and a group, with a small lock badge for free users

Bottom tab bar (Log, Calendar, Stats, Timeline, Settings) with the active tab glowing. Fully responsive; design mobile-first. Use realistic seeded data: 30 days of entries with varied moods so every chart looks alive.

Build a no-typing mood-tracking diary app (Daylio model) called Tally.

## Entities
- Mood: label, level (1–5), color, emoji (default set seeded; user can add own when premium)
- Activity: user, name, icon, group (work/health/social/sleep/food)
- Entry: user, entryDate, mood reference, note
- EntryActivity: entry reference, activity reference
- UserProfile: reminderTime, isPremium, isLifetime, streakCount, lastEntryDate

## Roles & permissions
- Visitor: sees landing page and pricing only
- Free user: logs entries with default moods and a fixed activity set; sees basic stats; custom moods/activities and advanced stats prompt the paywall
- Premium user: custom moods/activities, advanced stats, themes, privacy lock
- Admin: full CRUD on default moods and activity templates, sees a dashboard (total users, premium count, entries logged)

## Pages
1. Landing: hero with the mood calendar, pricing (yearly $29.99 / lifetime $59.99), FAQ
2. Onboarding: name -> reminder time -> log first mood, dropping into a populated app
3. Log entry: 5-face mood picker, grouped activity icon grid, optional note, Save
4. Calendar: month grid colored by daily mood; tap a day to view/edit
5. Stats: average mood, mood-over-time chart, activity frequency, mood-by-activity correlation (advanced gated)
6. Timeline: reverse-chronological entries with edit/delete
7. Settings: moods & activities, reminder, theme, privacy lock, subscription
8. Admin: default moods/activities and dashboard

## Rules
- One main entry per calendar day; saving the same day updates rather than duplicates
- Streak +1 the first entry each day; reset to 1 after a missed day
- Free users restricted to default moods and the fixed activity set; custom items and advanced stats require premium
- Premium can be a yearly subscription or a one-time lifetime unlock

## Look & feel
Clean friendly theme: pastel mood color scale (green to red), rounded cards, big tap targets, animated charts. Mobile-first, light with a dark variant.

Seed with the 5 default moods, ~16 activities across groups, one admin user and one demo user with 30 days of varied entries so the charts render.