How to Clone Snapchat

Create a Snapchat-style ephemeral messaging app called Vanish using Next.js (App Router), Tailwind, Prisma + SQLite. Audience: a private friend group / campus.

## What to build
A camera-first app where Snaps disappear after viewing, friends chat in threads that clear, Stories vanish in 24h, and daily streaks reward consistent friends.

## Screens
- Landing: bold hero, sign-up CTA
- Camera home: full-screen viewfinder, capture button (tap photo / hold video), post-capture editor (text, doodle, color filter, stickers), Send-to and My Story
- Send-to sheet: friend checkboxes + My Story, view-timer selector for photos
- Chats list: friends with unopened-Snap indicator and streak flame + day count
- Chat thread: tap-to-view Snaps that play once then clear; ephemeral text
- Stories: ring row, full-screen tap-to-advance viewer, 24h expiry, owner viewer list
- Profile: avatar, username, Snapscore, add friend by username

## Prisma schema
User (id, username, displayName, avatar, snapscore)
Friendship (userId, friendId, streakCount, lastSnapDate)
Snap (id, senderId, mediaUrl, mediaType, viewSeconds, createdAt)
SnapRecipient (snapId, recipientId, openedAt) with a unique (snapId, recipientId) constraint
Story (id, userId, mediaUrl, createdAt, expiresAt)
StoryView (storyId, viewerId) with a unique (storyId, viewerId) constraint
Message (id, threadId, senderId, body, createdAt, cleared)

## App logic (must actually work)
- Opening a Snap sets openedAt atomically (single-open, no replays) and decrements its remaining views; once all recipients opened (or 24h passed), the media URL is purged
- Streak: increment at most once per calendar day, only when both friends have a Snap to each other that day; reset on a missed day; expose an 'expiring soon' flag for the hourglass
- Stories: filter WHERE expiresAt > now; the owner can see StoryView rows; dedupe views per viewer
- Snapscore = snaps sent + received, updated on send and on open
- Ephemeral text: messages flagged cleared when the thread is closed, hard-deleted by a sweep
- A periodic sweep job purges expired Snaps, expired Stories and cleared messages so nothing lingers

## Style
Bright and bold: yellow primary, rounded chunky UI, camera fills the screen, big icons, ghost-themed empty states, snappy spring transitions, swipe navigation (chats left / camera center / stories right). Mobile-first.

Seed: 8 friends, several unopened Snaps, 3 active Stories, and two existing streaks (one expiring soon with an hourglass) so the app feels alive on first login.

Build a production-quality Snapchat-style ephemeral messaging app for a niche community. Ephemerality must be real (media is actually deleted) and streak/Snap state must be race-safe.

## Stack
- Next.js 14 App Router + TypeScript + Tailwind + shadcn/ui; Framer Motion for camera/story transitions (a React Native Expo client is the natural target - keep the API client-agnostic)
- PostgreSQL via Prisma; NextAuth (phone/email)
- Object storage (S3/R2) with a short lifecycle/TTL policy for Snap media + signed upload/download URLs - never serve media through the app server, and ensure expired media is genuinely purged
- A realtime layer (Supabase Realtime / Pusher) for chat and 'Snap received' events; a scheduler for streak-expiry and notifications
- Zod schemas shared between API and client

## Core design: ephemerality as a first-class concept
- A Snap has recipients (SnapRecipient rows) each with an openedAt; the Snap's media is purged once every recipient has openedAt set OR createdAt is older than 24h. Run this in (a) the open handler and (b) a periodic sweep job - belt and suspenders so nothing lingers
- View timer: photo Snaps carry viewSeconds; the client enforces display time, the server enforces single-open by flipping openedAt atomically (no replays)
- Ephemeral chat text is soft-cleared on thread close and hard-deleted by the sweep

## Streaks (idempotent, server-authoritative)
- A streak between A and B increments at most once per calendar day, only when both directions have a Snap that day. Derive it from a snap_days ledger (date, userId, friendId) with a unique constraint rather than mutating a counter you can corrupt
- Expose an 'expiresAt' (end of the streak day in the user's timezone) so the client can show the hourglass; the scheduler sends a reminder a few hours before

## Schema
users, friendships (with streak derived), snaps, snap_recipients (unique snapId+recipientId, openedAt), snap_days (unique date+userId+friendId), stories (expiresAt), story_views (unique storyId+viewerId), messages, threads, notifications. Indexes on snap_recipients(recipientId, openedAt), stories(userId, expiresAt).

## Implementation order
1. Auth + schema + media pipeline with lifecycle deletion + seed (8 friends)
2. Camera capture + 2D editor (text, doodle, color filter, stickers)
3. Send-to + ephemeral delivery + the open/purge logic
4. Chats list + thread with tap-to-view Snaps and clearing text
5. Streaks ledger + expiry scheduler + hourglass UI
6. Stories (post, viewer, 24h expiry, viewer list)
7. Realtime events + push notifications

## Quality bar
- Verify media is unreachable after expiry (test the signed URL is gone, not just hidden)
- Single-open enforced server-side; no way to replay a viewed Snap by retrying the request
- Reduced-motion variant; the story viewer is fully keyboard/tap navigable

Be honest about scope: true 3D AR lenses, Snap Map and Spotlight are out of v1 - 2D overlays only. Start with step 1 and show me the Snap/SnapRecipient schema and the purge logic before continuing.

Design the complete UI for a Snapchat-style ephemeral messaging app called Vanish for a private friend community. React + Tailwind + shadcn/ui + lucide-react. Aesthetic: camera-first, bold and youthful - bright yellow primary, the viewfinder fills the screen, big rounded tap targets, playful ghost-themed empty states, snappy spring transitions, minimal chrome.

## Screens

### 1. Camera (home screen)
- Full-bleed camera preview placeholder
- Top row: profile bubble (left), search and settings (right)
- Bottom: large round capture button (with a recording ring state), flip-camera and flash toggles flanking it
- Left/right page indicators hinting swipe to Chats and Stories

### 2. Snap editor (after capture)
- The captured media full-screen with a toolbar down the right edge: text tool, doodle pen with color picker, sticker tray, color-filter swatches, timer (Xs) and save
- Bottom: 'Send To' pill button

### 3. Send-to sheet
- A bottom sheet: 'My Story' row at top, then a searchable friend list with circular check selection, and a Send button that fills with the count

### 4. Chats list
- Rows: friend avatar, name, status line ('New Snap', 'Received', 'Delivered', 'Opened') with the colored square indicator, and a streak flame with day-count + an hourglass when expiring; a camera shortcut on the right

### 5. Chat thread
- Bubbles for text; Snaps render as a 'Tap to view' tile that, once viewed, greys to 'Opened'; a camera and text input bar pinned at the bottom

### 6. Stories
- Your Story card at top (add +), then a grid/list of friends' Story rings (unwatched = colored ring)
- Full-screen story viewer: segmented progress bars, author + time, tap zones, and for your own story a swipe-up viewer list

### 7. Profile
- Bitmoji-style avatar, username, a Snapscore number, add-friends and a friends count; settings list below

### 8. Add friends
- A search field by username, a 'Quick Add' suggested-friends list with Add buttons, and pending-request rows with Accept/Ignore

### 9. Empty & onboarding states
- Ghost-themed empty states for no chats, no Stories and no friends, each with a clear primary action ('Add a friend', 'Take your first Snap')
- A subtle first-run overlay pointing at the capture button

Fully responsive, mobile-first with swipe paradigm (Chats ← Camera → Stories). Populate with 8 named friends, realistic Snap statuses, a couple of streaks (one expiring), and 3 active Stories so it looks live.

Build an ephemeral camera-first messaging app (Snapchat model) called Vanish for a private friend community.

## Entities
- User: username, displayName, avatar, snapscore
- Friendship: user reference, friend reference, streakCount, lastSnapDate
- Snap: sender reference, mediaUrl, mediaType (photo/video), viewSeconds, createdAt
- SnapRecipient: snap reference, recipient reference, openedAt
- Story: user reference, mediaUrl, createdAt, expiresAt
- StoryView: story reference, viewer reference
- Message: thread reference, sender reference, body, createdAt, cleared

## Roles
- Member: captures and sends Snaps, chats, posts Stories, keeps streaks, adds friends
- Admin: moderates reported content, removes accounts, dashboard with daily-active users and Snaps sent

## Pages
1. Camera home: full-screen viewfinder with a capture button (tap photo / hold video); after capture, an editor with text, doodle, color filters and stickers, then Send-to and My Story
2. Send-to sheet: choose friends and/or My Story and a view timer
3. Chats: friends list with unopened-Snap indicators and streak flames with day-counts
4. Chat thread: tap-to-view Snaps that play once then clear; ephemeral text
5. Stories: friends' Story rings; full-screen viewer; auto-expire after 24h; owner viewer list
6. Profile: avatar, username, Snapscore, add friend by username
7. Admin: moderation and dashboard

## Rules
- A Snap disappears once all recipients have opened it or after 24 hours; its media is removed, not archived
- A Snap plays once per recipient; it cannot be replayed by reopening
- Streak: +1 when two friends Snap each other within the same calendar day; resets if a day is missed; warn when a streak is about to expire
- Stories disappear 24 hours after posting; the owner can see who viewed
- Snapscore increases on every Snap sent and received
- Adding a friend can require their acceptance before Snaps flow both ways

## Look & feel
Bright and bold: yellow primary, rounded chunky UI, the camera fills the screen, big friendly icons, ghost-themed empty states, swipe navigation (chats left / camera center / stories right), snappy transitions. Mobile-first.

Seed: 8 friends, several unopened Snaps, 3 active Stories, and two streaks (one expiring soon) so the app feels alive on first login.