How to Clone Tinder

Create a Tinder-style matching app called Emberly as a Next.js (App Router) + Tailwind + Prisma + SQLite project.

## Product
Swipe-to-match dating app: photo profiles, card deck, mutual likes create matches with realtime-feeling chat. Freemium - 20 likes/day free, premium tier unlocks unlimited likes, 'Likes You' grid, and rewind.

## Screens
- Marketing landing: dark hero with fanned profile-card visual, 3-step how-it-works, pricing cards (Free vs Ember Gold $14.99/mo), FAQ accordion
- Onboarding wizard: name, birthdate with 18+ validation, gender/seeking, multi-photo upload with reorder, bio, interest tag picker (pick 5 of 30), distance + age-range sliders
- Swipe page: card stack with drag gestures (use framer-motion drag with rotation on x-offset, LIKE/NOPE stamps fading in with drag distance), action buttons (pass, superlike, like), likes-remaining pill for free users
- Match overlay: full-screen modal on mutual like with both avatars and CTA buttons
- Chats: match strip on top (new matches with a glow ring), conversation list, chat thread with optimistic message sending and polling every 3s
- Likes You: responsive grid, blurred with overlay CTA for free users (CSS blur, but ALSO never send the real names/photos of likers to free clients - return placeholder data server-side)
- Profile: photo manager, bio/interests editor, preference sliders, plan management
- Admin (role-gated): reported-users queue with profile preview and ban button, basic stats row (users, matches today, messages today)

## Prisma schema
User (id, email, name, birthdate, gender, seeking, bio, interests Json, photos Json, lat, lng, maxDistanceKm, ageMin, ageMax, isPremium, likesRemainingToday, likesResetAt, role), Swipe (id, swiperId, swipedId, direction, createdAt, @@unique([swiperId, swipedId])), Match (id, userAId, userBId, createdAt, unmatchedAt), Message (id, matchId, senderId, body, createdAt, readAt), Report (id, reporterId, reportedId, reason, createdAt)

## Logic
- GET /api/deck: returns next 10 candidates filtered by mutual gender/age preferences and haversine distance, excluding already-swiped ids, ordered by a simple score (recency of activity + random jitter)
- POST /api/swipe: records the swipe, decrements likesRemainingToday for likes when not premium, checks for a reciprocal like and creates a Match in the same transaction, returns { matched: boolean, match? }
- Likes reset: when likesResetAt is in the past, reset to 20 and set likesResetAt to next midnight (do it lazily on read, no cron needed)
- Rewind (premium only): deletes the user's most recent swipe so the card reappears
- Unmatch sets unmatchedAt and hides the thread for both sides; messages are kept for the admin report queue
- Mock checkout for Ember Gold sets isPremium = true (structure the upgrade endpoint so Stripe can replace it later)

## Style
Dark UI: #15151A background, white cards with rounded-3xl and layered shadows, ember gradient #FF5A3C → #FF2D78 for primary buttons, stamps and active tab states. Plus Jakarta Sans. Spring physics on the card stack (framer-motion). Mobile-first with a bottom tab bar; desktop gets a centered phone-width column.

Seed: 24 candidate profiles with realistic names, ages 21–38, varied bios and interests, unsplash portrait photo urls, coordinates scattered within 30km of the demo user; demo user with 3 matches, 2 chat threads with 6–10 messages each, and 5 incoming likes for the Likes You grid.

Build a production-quality Tinder-style matching app called Emberly. Mobile-first PWA now, React Native port later - keep matching/swipe logic in a shared, framework-free core module.

## Stack
- Next.js 14 App Router + TypeScript + Tailwind + shadcn/ui, framer-motion for the card stack, next-pwa for installability
- Supabase: Postgres + PostGIS, Auth (email + Apple/Google OAuth), Storage for photos, Realtime channels for chat
- Stripe Billing: one subscription product with two tiers (Gold $14.99/mo, Platinum $24.99/mo) + one-off Boost purchases via Checkout; customer portal for cancellation
- Zustand for deck/chat client state; Zod on every API boundary

## Critical architecture
- The swipe/match transaction is the heart of the app: POST /api/swipe must atomically (Postgres function) insert the swipe, decrement the daily like quota with a row lock, check for a reciprocal like, and insert the match - never check-then-insert in JS or you will double-create matches under concurrency
- Candidate query: PostGIS ST_DWithin with a GiST index on a geography column, filtered by mutual preference predicates and NOT EXISTS against swipes; paginate by score, never OFFSET
- Entitlement enforcement server-side: the Likes You endpoint returns real liker data only for premium users - free users get count + blurhash placeholders generated server-side; client-side blur alone is a data leak
- Chat over Supabase Realtime: one channel per match id, RLS policy ensures only the two participants can read/write; optimistic sends reconciled by created_at + client uuid
- Deck prefetch: keep 5 cards hydrated client-side, fetch the next page when 2 remain - swiping must never wait on the network

## Schema
profiles (id, name, birthdate, gender, seeking, bio, interests text[], photo_paths text[], location geography(Point), max_distance_km, age_min, age_max, tier enum free/gold/platinum, likes_remaining, likes_reset_at, is_verified, role), swipes (swiper_id, swiped_id, direction enum, created_at, PK (swiper_id, swiped_id)), matches (id, user_a, user_b, created_at, unmatched_at, CHECK user_a < user_b for dedupe), messages (id, match_id, sender_id, body, created_at, read_at), reports, boosts (user_id, starts_at, ends_at). RLS on every table; swipes and matches writable only via the SECURITY DEFINER function.

## Implementation order
1. Scaffold, Supabase schema + PostGIS + RLS, auth flows, onboarding wizard with photo upload to Storage
2. Deck API + swipe transaction function with concurrency tests (two simultaneous reciprocal likes must yield exactly one match)
3. Card stack UI: framer-motion drag with rotation, stamp opacity tied to drag offset, button-triggered swipes share the same animation path
4. Match overlay + chat: Realtime channels, conversation list, unread badges, unmatch flow
5. Monetization: paywall comparison sheet (Free/Gold/Platinum columns), Stripe Checkout + webhook → tier update, Likes You with server-side gating, rewind, Boost purchase flow (boost rows multiply the deck score for 30 minutes)
6. Trust & safety: report/block flows, photo moderation status column (pending/approved/rejected) - new photos invisible to others until approved; admin queue at /admin
7. PWA polish: installable manifest, push-ready service worker, offline shell for chats

## Quality bar
- Swipe gesture at 60fps on mid-range phones - transform/opacity only, no layout-triggering animation
- The same user pair can never produce two match rows (enforced by the CHECK + unique constraint, with a test proving it)
- Funnel events to PostHog: deck_viewed, swipe_like, match_created, paywall_viewed, checkout_started, subscription_activated
- Seed script: 50 candidate profiles with deterministic faker data, one demo gold user, one admin

Start with step 1 and show me the schema + RLS policies and the swipe transaction function before any UI.

Design the complete UI for a Tinder-style matching app called Emberly. React + Tailwind + shadcn/ui + lucide-react + framer-motion. Aesthetic: dark and confident - near-black charcoal (#15151A) base, bright white profile cards with rounded-3xl and deep layered shadows, ember gradient (#FF5A3C → #FF2D78) on every primary action, Plus Jakarta Sans, springy physical motion.

## Screens

### 1. Marketing landing
- Dark hero with three fanned, slightly rotated profile cards (one mid-swipe with a LIKE stamp), gradient headline 'Stop scrolling. Start matching.', signup CTA with glow
- 3-step how-it-works row (Swipe / Match / Meet) with line icons, stats strip, pricing cards Free vs Ember Gold with gradient border on Gold, FAQ accordion, dark footer

### 2. Onboarding wizard
- Progress bar top, one focused step per screen: name → birthdate → 'I am / looking for' pill selectors → photo grid uploader (6 slots, first slot labeled 'Main photo', drag handles) → bio textarea with counter → interest chip cloud (selected chips fill with gradient) → distance and age-range sliders with live value labels

### 3. Swipe deck (the hero screen)
- One dominant card: full-bleed portrait photo with a bottom gradient scrim, name + age in bold white, distance pill, interest chips, photo-count dots on top, tap zones cycling photos
- Drag behavior: card rotates with horizontal offset, green LIKE stamp (rotated, stroked) fades in dragging right, red NOPE stamp dragging left; next card scales up from 0.95 underneath
- Action row floating below: large round pass (X) and like (flame) buttons, smaller rewind and super-like between them; likes-remaining pill for free users
- Bottom tab bar: Swipe, Likes, Chats, Profile - active tab in gradient

### 4. Match overlay
- Full-screen takeover: dimmed blurred deck behind, 'It's a Spark! 🔥' in huge gradient type, the two avatars sliding in from opposite sides and overlapping, confetti burst, buttons 'Send a message' (gradient) and 'Keep swiping' (ghost)

### 5. Likes You
- 2-column grid of profile cards; free state: cards heavily blurred with a centered lock icon, sticky gradient banner '5 people already like you - see them with Gold'; premium state: sharp cards that tap through to a detail view

### 6. Chats
- Horizontal strip of new-match avatars with gradient rings, conversation list rows (avatar, name, last message preview, time, unread dot), chat thread with rounded bubbles (theirs white/10, mine gradient), input bar with send button, header with avatar + name + overflow menu (unmatch, report)

### 7. Paywall sheet
- Bottom sheet over blurred app: Emberly Gold logo, benefit checklist (Unlimited likes, See who likes you, Rewind, 1 free Boost/month), plan selector (1mo / 6mo / 12mo with per-month pricing, 12mo badged 'MOST POPULAR'), gradient CTA, fine-print row

### 8. Profile & settings
- Avatar header with completion ring, edit sections as cards (Photos grid, About, Interests, Discovery preferences with sliders), plan card showing Gold status, sign-out and danger-zone rows

Fully responsive but design phone-first (430px frame); desktop centers a phone-width column on a subtle radial background. Use realistic content: names, ages 21–38, bios like 'Climber, taco enthusiast, will beat you at Mario Kart', varied unsplash portraits.

Build a swipe-based matching app (Tinder model) called Emberly.

## Entities
- UserProfile: name, birthdate, gender, seeking, bio, interests (list), photos (list of images), latitude, longitude, maxDistanceKm, ageMin, ageMax, isPremium (boolean), likesRemainingToday (number), likesResetAt, isVerified, role
- Swipe: swiper (user reference), swiped (user reference), direction (like/pass/superlike), createdAt - unique per swiper+swiped pair
- Match: userA (reference), userB (reference), createdAt, unmatchedAt
- Message: match reference, sender reference, body, createdAt, readAt
- Report: reporter reference, reported reference, reason, status (open/resolved), createdAt

## Roles & permissions
- Visitor: sees landing page and pricing only
- Free user: swipes with 20 likes/day, chats with matches, sees Likes You only as a blurred count
- Premium user: unlimited likes, sees Likes You unblurred, can rewind the last swipe
- Admin: sees the reports queue, can ban users and remove photos, sees a stats dashboard (total users, matches today, messages today)

## Pages
1. Landing: dark hero with profile-card visual, how-it-works, pricing (Free vs Gold $14.99/mo), FAQ
2. Onboarding after signup: name, birthdate (reject under 18), gender and seeking, upload 2–6 photos, bio, pick 5 interests, distance and age sliders
3. Swipe: one card at a time showing photo, name, age, distance and interests; like / pass / superlike buttons; likes-remaining counter for free users; when likes hit 0 open the upgrade modal
4. Match moment: on mutual like show a celebratory overlay with both avatars and 'Send a message' / 'Keep swiping' buttons
5. Likes You: grid of users who liked me - blurred with upgrade CTA for free users, visible for premium
6. Chats: list of matches with last message, thread view with bubbles, unmatch and report in a menu
7. Profile: edit photos, bio, interests, preferences; subscription status; delete account
8. Admin: reports table with reported profile preview, resolve/ban actions

## Rules
- The deck shows only users matching both sides' gender, age and distance preferences, never anyone already swiped on, and never the current user
- When user B likes user A and a Swipe from A liking B already exists, create a Match immediately and show the overlay to B
- Likes decrement only on like/superlike by free users; reset likesRemainingToday to 20 when likesResetAt has passed and set the next reset to midnight
- Upgrading sets isPremium true; rewind deletes the user's most recent swipe and is premium-only
- Unmatch hides the thread for both users; a reported user is never shown to their reporter again; 3 open reports flag the account on the admin dashboard

## Look & feel
Dark charcoal background (#15151A), white cards with big rounded corners and deep shadows, ember gradient #FF5A3C to #FF2D78 on buttons and the active tab, Plus Jakarta Sans, bottom tab bar (Swipe, Likes, Chats, Profile). Mobile-first.

Seed with 24 candidate profiles (realistic names, ages 21–38, bios, portrait photos, coordinates near the demo user), a demo user with 3 matches and 2 chat threads, 5 incoming likes, one admin account, and 2 open reports in the queue.