How to Clone Hinge

Create a Hinge-style, prompt-driven dating app called Knotwell as a Next.js (App Router) + Tailwind + Prisma + SQLite project.

## Product
Intent-first dating app: profiles are photos interleaved with three prompt answers; you like a specific photo or prompt (optionally with a comment) instead of swiping a deck. Freemium - free daily like cap, Premium unlocks unlimited likes and dealbreaker filters; a 'Spark' consumable sends a scarce standout like.

## Screens
- Marketing landing: editorial hero 'Made to be deleted', prompt-profile screenshots, pricing (Premium monthly/3-month/6-month), FAQ accordion
- Onboarding wizard: account, 6-photo upload, pick 3 prompts + write answers, basics + intent, distance/age filters
- Discover: single-profile scroll where each photo and each prompt answer has its own like button that opens a comment field; skip button
- Likes-you queue: cards showing the liked photo/prompt and comment, accept/skip
- Matches list + realtime chat seeded with the original like comment
- Profile & settings: edit photos/prompts, subscription + Spark balance, verification badge

## Prisma schema
User (id, email, name, birthdate, gender, seeking, intent, photosJson, promptsJson, lat, lng, isPremium, sparks, verified, lastActive), Like (id, likerId, likeeId, targetType, targetIndex, comment, isSpark, createdAt), Match (id, userAId, userBId, seedLikeId, createdAt), Message (id, matchId, senderId, body, createdAt), Filter (userId, minAge, maxAge, maxDistanceKm, intent)

## Logic
- Every like references a target (photo index or prompt index) and may carry a comment; accepting an incoming like creates a Match and inserts the comment as the first Message
- Free tier: 8 likes/day (reset at midnight); Premium flag removes the cap and enables intent/religion/education filters
- A Spark decrements the sparks balance, sets isSpark, and is rendered pinned to the top of the recipient's queue
- Distance computed with the haversine formula from lat/lng; never expose exact coordinates to the client
- Mock checkout structured so Stripe (subscription + Spark token packs) can drop in later
- Skipping an incoming like quietly removes it from the queue with no notification to the sender

## Style
Warm editorial: cream/plum palette, large serif headings, rounded photo cards, lots of whitespace, soft fades - intentional and grown-up, not neon. Light theme, mobile-first.

## Acceptance
- Liking a specific prompt with a comment, then having that person accept, creates a match whose chat opens with the comment as message one
- A free user is blocked at 8 likes/day; a Spark visibly pins the like to the top of the recipient's queue
- Dealbreaker filters only take effect for a Premium user

Seed: 20 thoughtful profiles with unsplash portraits, real-sounding prompt answers, several cities; 4 incoming likes in the queue (one a Spark); demo Premium user with 3 Sparks.

Build a production-quality Hinge-style dating app. Mobile-first PWA now, React Native port later - keep matching, like-targeting and entitlement logic in shared server-side modules.

## Stack
- Next.js 14 App Router + TypeScript + Tailwind + shadcn/ui, next-pwa for installability
- Supabase: Postgres + PostGIS for geo, Auth (email + Apple/Google), Realtime for chat and new-match events, Storage for photos and voice prompts
- Stripe Billing for the Premium subscription plus a token-pack product for Roses-style 'Sparks'
- Zustand for the Discover and chat stores; Zod at every API boundary

## Critical architecture
- Likes are targeted: every like row stores target_type (photo|prompt) and target_index plus an optional comment - the whole product hinges on this, model it first
- Matching is server-authoritative: accepting an incoming like in a transaction creates the Match and seeds the first Message from the stored comment; clients never mint matches
- Daily like quota and Premium entitlement are enforced server-side (a likes-today counter); Sparks decrement a server-held balance - never trust client counts
- Discover feed generated server-side: exclude already-liked/blocked, filter by PostGIS distance + age + intent, order by last_active, paginate; never ship the whole user table

## Schema
profiles (id, name, birthdate, gender, seeking, intent, photos jsonb, prompts jsonb, location geography(point), is_premium, sparks, verified, last_active), likes (id, liker_id, likee_id, target_type, target_index, comment, is_spark, created_at), matches (id, user_a, user_b, seed_like_id, created_at), messages (id, match_id, sender_id, body, created_at), blocks (blocker_id, blocked_id). RLS on every table.

## Implementation order
1. Scaffold, Supabase schema + PostGIS + RLS, auth and onboarding with 6-photo upload and 3-prompt picker
2. Discover feed endpoint (geo + age + intent filters) and the targeted-like API recording target + comment; daily quota enforcement
3. Discover UI: single-profile scroll with per-element like buttons and a comment sheet; skip flow
4. Likes-you queue + accept/skip → match creation in a transaction, chat seeded from the comment; realtime messaging
5. Monetization: Stripe Checkout for Premium + Spark token packs, webhook updates is_premium/sparks; Sparks pin to top of queue
6. Trust & safety: report/block, selfie verification flag, image moderation on upload; voice-prompt upload as a stretch

## Quality bar
- No raw photo/voice URLs leak to unentitled clients; serve signed URLs
- The like-a-specific-element interaction feels precise and obvious on touch; test on iOS Safari
- Conversion events to PostHog (like_sent, match_made, premium_started, spark_purchased)
- Seed script with ~25 profiles and realistic prompt answers; document the daily-quota reset

Start with step 1 and show me the likes and matches schema with RLS policies before moving on.

Design the complete UI for a Hinge-style, prompt-driven dating app called Knotwell. React + Tailwind + shadcn/ui + lucide-react. Aesthetic: warm, editorial, grown-up - cream background, deep plum accents, large serif headings (Canela/Lora feel), rounded photo cards, generous whitespace, gentle transitions. Calmer and more intentional than a neon swipe app. Light theme, mobile-first.

## Screens

### 1. Marketing landing
- Editorial hero with a serif headline 'The app designed to be deleted.', subline, a tasteful phone mockup showing a prompt-style profile
- Three value cards (real intent, prompts not bios, conversations that start themselves), pricing section (Premium with monthly / 3-month / 6-month toggle, best-value badge), FAQ accordion, footer

### 2. Onboarding flow
- Stepper: 6-photo upload grid, a prompt picker (choose 3 from a scrollable list of questions, each opening a text field with example answers), basics + an intent selector ('A relationship', 'Figuring it out'), distance/age sliders - one calm card per step with a slim progress bar

### 3. Discover (single profile)
- One profile filling the screen: a vertical sequence alternating full-bleed photo cards and quoted prompt-answer cards (large serif question, handwritten-feeling answer). Each card has a small outlined heart in the corner; tapping it slides up a comment sheet with 'Send a like'. A subtle floating 'Skip' at the bottom

### 4. Likes-you queue
- Stacked cards, each showing exactly the photo or prompt the person liked plus their comment in a quote bubble, their name/age, and Accept / Skip buttons. Spark-likes get a plum highlight ring and a 'pinned to top' tag

### 5. Matches & chat
- New matches row of avatars; conversation list below. Chat screen opens with the original like shown as a quoted card above the first bubble so context is never lost

### 6. Profile & paywall modal
- Profile: photo + prompt editor, verification row, Spark balance pill, 'Upgrade' card
- Paywall modal: glass card listing Premium benefits (unlimited likes, dealbreaker filters, see everyone who likes you), plan selector with 6-month preselected, a separate small 'Buy Sparks' option, primary CTA

### 7. Empty & safety states
- An empty likes-you queue with a warm 'You're all caught up' illustration and a nudge to keep exploring Discover
- A report/block sheet reachable from any profile with reason options and a confirmation toast

## Components to reuse
- The quoted prompt-answer card, the photo card, the like-with-comment sheet, and the paywall sheet should be shared components reused across Discover, the queue and chat

Fully responsive, mobile-first. Use realistic content: prompt questions like 'A shockingly unpopular opinion I hold', warm answers, ages 26–38, varied cities.

Build a relationship-focused, prompt-driven dating app (Hinge model) called Knotwell.

## Entities
- UserProfile: name, birthdate, gender, seeking, intent, photos (list), prompts (list of {question, answer}), latitude, longitude, isPremium, sparks, verified, lastActive
- Like: liker reference, likee reference, targetType (photo/prompt), targetIndex, comment, isSpark
- Match: userA reference, userB reference, seedLike reference
- Message: match reference, sender reference, body
- Filter: user reference, minAge, maxAge, maxDistanceKm, intent
- Report: reporter reference, reported reference, reason

## Roles & permissions
- Visitor: sees landing page and pricing only
- Free user: limited daily likes, can like photos/prompts with a comment, can chat after accepting a like
- Premium user: unlimited likes, dealbreaker filters, sees everyone who liked them
- Admin: reviews reports, can ban users, sees a dashboard (total users, premium count, matches per day, reports queue)

## Pages
1. Landing: hero, pricing (Premium monthly / 3-month / 6-month), FAQ
2. Onboarding after signup: 6 photos, pick 3 prompts + answers, basics + intent, distance/age filters
3. Discover: one profile at a time; each photo and prompt answer has its own like button that opens a comment field; skip button
4. Likes-you queue: incoming likes pinned to the liked photo/prompt with comment; accept (creates a match) or skip
5. Matches & chat: list; chat seeded with the original like comment
6. Profile & settings: edit photos/prompts, subscription, Spark balance, verification
7. Admin: reports queue and user moderation

## Rules
- Every like targets a specific photo or prompt and may carry a comment; accepting it creates a Match and seeds the chat with that comment
- Free users get 8 likes/day; a Spark costs 1 token and jumps to the top of the recipient's queue
- Premium unlocks unlimited likes and intent/religion/education dealbreaker filters

## Look & feel
Warm, editorial, grown-up: cream and plum palette, large serif headings, rounded photo cards, generous whitespace, gentle transitions. Light theme, mobile-first.

Seed with 20 thoughtful profiles (varied genders, ages, cities, real-sounding prompt answers, portrait photos), 4 incoming likes (one a Spark), one admin and one demo Premium user with 3 Sparks.