How to Clone Locket

Create a Locket-style private photo-sharing app called Keepsake as a Next.js (App Router) + Tailwind + Prisma + SQLite project.

## Product
Photos go straight to your friends' home view - an installable PWA 'widget' that always shows the latest picture from your inner circle (max 20 friends). No likes, no feed of strangers. Freemium: core loop free, Keepsake Gold ($3.99/month) unlocks unlimited history and full resolution.

## Screens
- Marketing landing: cream hero with a phone mockup cycling demo photos, 'Live photos from your favorite people.', how-it-works trio (Snap → It appears → React), Gold pricing card, FAQ accordion
- Onboarding: name + avatar, then invite screen (personal link to copy, code-entry field, '0/20 friends' counter)
- Widget home (default authed route): one large photo card showing the newest photo across all friends with sender + time-ago, left/right arrows to flip through the latest from each friend, unseen-count dot
- Camera: full-screen getUserMedia viewfinder, flip/flash, shutter, post-capture recipient picker (All or chips per friend) + optional caption, send
- History: masonry grid of sent/received with friend filter; free tier hard-stops at 25 photos with a frosted Gold upsell card
- Friends: accepted list with last-photo thumbnails, pending in/out invites, remove action, slots counter
- Settings: profile edit, notifications toggle, Gold manage/cancel
- Admin (role-gated): KPIs (users, photos today, Gold subs) and a reported-photos review table

## Prisma schema
User (id, email, name, avatarUrl, inviteCode, isGold, goldExpiresAt, role), Friendship (id, userId, friendId, status), Photo (id, senderId, imageUrl, caption, createdAt), PhotoRecipient (photoId, recipientId, seenAt, reaction), Report (id, photoId, reporterId, reason, status)

## Logic
- Camera uses getUserMedia with a canvas capture; store images locally in /public/uploads for dev (structure the upload helper so S3/R2 can replace it)
- Sending creates Photo + one PhotoRecipient per selected friend; the widget home polls or uses SSE so new photos appear within seconds without refresh
- Widget home ordering: newest unseen photo first; viewing marks seenAt; per-friend flip shows each friend's latest
- Friend cap enforced server-side at 20 accepted; invites by code, both directions create a pending row that the other party accepts
- Free history limit: queries clamp to latest 25 unless isGold; 'Upgrade' starts a mock checkout that sets isGold + goldExpiresAt = now + 30 days (structured so Stripe can replace it)
- One emoji reaction per recipient per photo; sender sees aggregated reactions in history

## Style
Warm, personal, photo-first: cream #FFF8F0 background, ink #1A1A2E text, coral #FF6B6B accent, rounded-3xl cards with soft shadows, Nunito everywhere, springy micro-animations on send and react. Mobile-first with a bottom tab bar (Widget, Camera, History, Friends).

Seed: 4 demo users (all mutual friends), 30 photos over the past 7 days with captions, scattered emoji reactions, one demo user on Gold, one open report.

## Stretch goals (only if the core works)
- Pair streaks: a computed 'days in a row' counter between two friends who exchange photos daily, shown as a flame on the friend row
- Frame mode route (/frame) that cycles incoming photos fullscreen every 8 seconds - zero-interaction display for a family tablet
- 'On this day' card in History resurfacing photos from a month ago (Gold-gated)
- Drawing overlay on the post-capture screen: canvas doodle layer merged into the sent image

Build a production-quality Locket-style private photo app. Mobile-first PWA now; structure the API and domain logic so a React Native app with native WidgetKit/Glance widgets can consume them later.

## Stack
- Next.js 14 App Router + TypeScript + Tailwind + shadcn/ui, next-pwa for installability
- Supabase: Postgres, Auth (email + Apple/Google OAuth), Storage for photos, Realtime for delivery
- Stripe Billing: Gold monthly + discounted yearly, customer portal
- Zod at every boundary; Zustand only for the camera/composer state

## Critical architecture
- Photo pipeline: client captures via getUserMedia → uploads original to a private Supabase bucket → an edge function generates 3 sizes (widget 600px, thumb 200px, full) → inserts photo + recipient rows in one RPC so delivery is atomic
- Delivery: recipients subscribe to a Supabase Realtime channel scoped to their user id; the widget view updates in-place with an animation - target sub-2s send-to-screen latency
- Entitlements: photo URLs are signed, generated server-side; full-resolution signing requires is_gold - free clients can never fetch originals. History clamp (latest 25) enforced in the query/RPC, not the UI
- Friend graph: friendships stored as two directed rows kept consistent in a transaction; the 20-cap checked in a Postgres function with a unique constraint backstop
- Safety first-class: report endpoint, per-user send rate limit (e.g. 60 photos/hour), block list that filters delivery at the RPC level

## Schema
profiles (id, name, avatar_url, invite_code, is_gold, gold_expires_at, role), friendships (user_id, friend_id, status, created_at), photos (id, sender_id, storage_path, caption, created_at), photo_recipients (photo_id, recipient_id, seen_at, reaction), blocks (user_id, blocked_id), reports (id, photo_id, reporter_id, reason, status). RLS everywhere: a user reads only photos they sent or received; recipients can't enumerate other recipients.

## Implementation order
1. Scaffold, Supabase schema + RLS + the send_photo and accept_friend RPCs with tests (cap, blocks, atomicity)
2. Auth + onboarding: profile setup, invite-code generation, accept flow
3. Camera & composer: getUserMedia with graceful fallback to file upload, capture → recipient picker → caption → send
4. Widget home: realtime subscription, newest-first card stack, per-friend flip, seen tracking, install prompt
5. History grid + reactions, free-tier clamp with upsell card, Stripe Checkout + webhook setting is_gold
6. Friends management, blocks, report flow, admin review queue
7. PWA polish: manifest, offline shell showing cached last photos, web push for new-photo notifications

## Quality bar
- Send-to-visible latency under 2s on a normal connection; camera works on iOS Safari (test getUserMedia quirks, document fallbacks)
- Images lazy-load with blur placeholders; widget view feels native when installed (no browser chrome, safe-area handled)
- PostHog events: photo_sent, photo_seen, invite_sent, invite_accepted, gold_started - K-factor must be derivable
- Seed script: 4 users, 30 photos, reactions, 1 Gold user, 1 open report

## Stretch (after the quality bar passes)
- Pair streaks computed in a Postgres view (consecutive exchange days per friendship) surfaced on friend rows
- Frame mode: an unauthenticated-tolerant /frame route using a long-lived device token, cycling photos fullscreen - the family-tablet wedge
- 'On this day' memory query (same date, previous months) as a Gold-gated history card
- Image moderation hook: run uploads through a nudity/CSAM-detection API before fan-out; quarantine instead of deliver on flags

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

Design the complete UI for a Locket-style private photo-sharing app called Keepsake. React + Tailwind + shadcn/ui + lucide-react. Aesthetic: warm and personal, the anti-feed - cream (#FFF8F0) background, ink (#1A1A2E) text, coral (#FF6B6B) accent, rounded-3xl photo cards with soft shadows, Nunito rounded sans throughout, springy gentle motion. Photo-first: the UI should melt away behind the pictures.

## Screens

### 1. Marketing landing
- Hero: oversized phone mockup with a live 'widget' cycling through warm candid photos every 2s, headline 'Live photos from your favorite people.', subline 'Straight to their home screen. No likes. No strangers.', coral CTA
- How-it-works trio with doodle icons (Snap → It appears → React), a '20 friends max' brag card, Gold pricing card ($3.99/mo with benefits list), FAQ accordion, warm footer

### 2. Onboarding
- Step 1: name + tappable avatar upload circle with doodle arrow
- Step 2: 'Add your people' - big copyable invite link card, OR divider, 6-character code entry boxes, friends counter pill ('2/20'), playful empty-state illustration

### 3. Widget home (the heart of the app)
- One dominant rounded-square photo card (~85% viewport width) with the newest friend photo, soft drop shadow, sender avatar + name + '4m ago' pill overlapping the top edge, caption strip on the bottom edge
- Left/right chevrons (or swipe) flipping through each friend's latest photo with a springy card transition, small dot indicators per friend
- Emoji reaction row (❤️ 😂 😮 🥹 🔥) that bursts on tap, unseen-count coral badge, floating camera FAB
- Bottom tab bar (Widget, Camera, History, Friends) with coral active state

### 4. Camera
- Full-bleed viewfinder, top row: close + flash + flip ghost buttons, oversized white shutter ring at bottom
- Post-capture: photo preview with caption input, recipient chips ('Everyone' preselected, individual friend avatars toggleable), coral 'Send' button with a paper-plane whoosh animation

### 5. History
- Filter chips by friend across the top, 3-column masonry grid of photos with tiny sender avatars, tap → lightbox with caption + reactions
- Free-tier end state: last row frosted/blurred with a centered Gold card ('Your memories are waiting - unlock everything with Gold')

### 6. Friends
- Friend rows: avatar with gold ring for subscribers, name, last-photo thumbnail on the right, slots counter header ('14/20'), pending invites section with accept/decline, invite-link card pinned at bottom

### 7. Gold paywall modal
- Warm card over blurred photos: gold gradient header badge, benefit checklist (unlimited history, full-res downloads, exclusive frames, priority delivery), monthly/yearly toggle, coral CTA, restore link

Fully responsive, mobile-first - this lives on phones. Use realistic content: friend names like Maya, Tom, Abuela Rosa; captions like 'study buddy', 'look who visited'; warm candid photo subjects, timestamps minutes-to-hours old.

### 8. States & details
- Empty widget home (no friends yet): a dashed placeholder photo card with a doodle arrow and 'Your people go here' + invite CTA
- New-photo arrival animation: incoming card slides over the current one with a soft spring and a subtle camera-shutter sound icon
- Loading: blurred low-res placeholders that sharpen, never spinners over photos
- Settings screen: avatar edit, notification toggle with a preview of the push copy ('Maya sent you a Keepsake'), Gold plan card with renewal date

Build a private photo-sharing app (Locket model) called Keepsake.

## Entities
- Photo: sender, imageFile, caption, createdAt
- PhotoRecipient: photo reference, recipient, seenAt, reaction (emoji string or empty)
- Friendship: user, friend reference, status (pending/accepted)
- Report: photo reference, reporter, reason, status (open/resolved)
- UserProfile: name, avatarImage, inviteCode, isGold, goldExpiresAt

## Roles & permissions
- Visitor: sees landing page and pricing only
- Free user: full send/receive loop with up to 20 friends; history limited to their latest 25 photos; standard resolution
- Gold user: unlimited history, full-resolution downloads, gold ring on avatar
- Admin: dashboard (total users, photos per day, Gold count) and a reported-photo review queue with remove/dismiss

## Pages
1. Landing: warm cream hero with a phone mockup cycling demo photos, 'Live photos from your favorite people.', Gold pricing ($3.99/month), FAQ
2. Onboarding after signup: name + avatar, then invite screen with a personal link, a code-entry field and a friends counter
3. Widget home (default): one big card showing the newest photo from any friend with sender and time-ago, arrows to flip through each friend's latest, emoji reaction row, camera button
4. Camera: device camera capture (fallback to file upload), preview with caption, choose all friends or specific ones, send
5. History: grid of sent and received photos filterable by friend; free users see only the latest 25 with an upgrade card
6. Friends: accepted list with last-photo thumbnails, pending invites with accept/decline, remove friend, 20-slot counter
7. Settings: profile, notification preference, Gold subscription status
8. Admin: metrics and the report review queue

## Rules
- Friendships require both sides: an invite creates pending, the other user accepts; cap of 20 accepted friends per user enforced on accept
- Sending a photo creates one Photo and a PhotoRecipient per chosen friend; recipients' widget homes show it immediately (newest first), and opening it sets seenAt
- One emoji reaction per recipient per photo; senders see reactions on their sent photos
- History queries return only the latest 25 photos for free users; Gold removes the limit and enables full-resolution download
- Going Gold sets isGold true and goldExpiresAt = now + 30 days; on login, expire lapsed subscriptions back to free
- Reported photos go to the admin queue; removing a photo deletes it for everyone

## Look & feel
Warm cream background, ink text, coral accents, big rounded photo cards with soft shadows, rounded friendly typography, light doodle decorations. Photo-first and mobile-first - the opposite of a noisy social feed.

Seed with 4 demo users who are all mutual friends, 30 photos exchanged over the past week with captions and a few reactions, one Gold subscriber, one admin user and one open report.