How to Clone Patreon

Create a full-stack Patreon-style membership platform called FanCircle using Next.js (App Router), Tailwind CSS, Prisma and SQLite (swap to Postgres later).

## What to build
A membership platform where creators sell access to exclusive posts via monthly tiers. Fans subscribe; the platform charges 10% on every payment and shows the breakdown clearly.

## Key screens
- Home: featured creators grid, category filter chips, search
- Creator page: banner + avatar header, tier cards with perk lists and Join buttons, post feed where locked posts render a blurred teaser and the tier needed to unlock
- Tier checkout: summary + Stripe payment, confirmation on success
- Member feed: aggregated feed of unlocked posts across every creator the fan supports
- Creator studio: rich post composer with a 'required tier' selector and draft/publish toggle
- Creator earnings: MRR, active members, churn this month, simple revenue chart, members table
- Manage memberships (fan): list of subscriptions with next-billing date and a cancel button
- Account settings: profile, payment method, notification preferences
- Auth: email magic link or credentials; one account can be both a fan and a creator

## Schema (Prisma)
User (id, name, email, image, bio), Creator (id, userId, handle, banner, category, published), Tier (id, creatorId, name, priceMonthly, perks Json, rank), Post (id, creatorId, title, body, mediaUrl, mediaType, requiredTierId, status, publishedAt), Membership (id, fanId, creatorId, tierId, status, currentPeriodEnd), Payment (id, membershipId, amount, fee, status, paidAt)

## Logic that must work
- Access check: a post is visible only if the fan has an active membership with tier.rank >= post.requiredTier.rank - implemented in one shared canViewPost() util used by both UI and API
- The locked portion of a post must NOT be sent to the client when access fails - strip it server-side; only the teaser leaves the server
- Recurring billing via Stripe subscriptions; webhook updates Membership.status and currentPeriodEnd
- Failed payment → status past_due → content locked after a 3-day grace window; recover to active on payment_succeeded
- Cancelling keeps access until currentPeriodEnd, then sets the membership to cancelled
- Fee = 10% of each payment, computed in one shared pricing util; creator payout = payments − fees
- One membership per fan per creator; upgrading a tier prorates and updates the rank

## Style
Creator-warm: cream canvas, #FF424D primary, rounded-2xl cards, soft shadows, Inter font. Locked posts use a backdrop-blur overlay with a lock icon and unlock CTA. Fully responsive - tier cards stack on mobile, member feed is single-column.

## Quality
Dedupe Stripe webhook events by id before processing; store money in cents; add skeleton loaders on data fetch; keep the canViewPost and pricing utils unit-testable and shared.

Seed with 8 creators (4 categories), each with 2–3 tiers and 5 posts (mix of free + locked), and 2 demo fans with active memberships so the member feed is populated. Use Stripe test mode for subscriptions; if unavailable, mock the billing step with a fake card form that always succeeds and writes a Payment row.

You are building a production-quality Patreon clone. Work iteratively: scaffold, then implement feature by feature, running the app after each step.

## Stack
- Next.js 14 App Router, TypeScript, Tailwind CSS, shadcn/ui
- PostgreSQL via Prisma; Supabase for auth (email + Google OAuth) and image storage
- Stripe Billing for recurring subscriptions + Stripe Connect (destination charges) for creator payouts - 10% platform fee
- Zod for all input validation; Resend for transactional email (welcome, receipt, dunning)

## Architecture requirements
- Route groups: (marketing), (app), (studio). Server components by default; client components only for the post composer, checkout and feed interactions
- All mutations through server actions with Zod schemas; never trust the client for access decisions
- lib/access.ts: single source of truth for canViewPost(userId, post) - checks active membership and tier rank; unit-test it
- lib/pricing.ts: single source of truth for fee math and creator payout; unit-test it
- Tier access enforced at the data layer too: a getPostBody() that returns null body when the viewer lacks access, so the full text never reaches the client

## Data model
users, creators, tiers (with integer rank for comparison), posts, memberships (status, current_period_end, stripe_subscription_id), payments, payouts. Index posts(creator_id, published_at), memberships(fan_id, status), memberships(creator_id, status).

## Implementation order
1. Scaffold + Prisma schema + Supabase auth with middleware-protected (app) and (studio) routes
2. Creator onboarding: claim a handle, set up page (banner, bio, category), create tiers with rank ordering
3. Post composer: rich text + media upload to Supabase storage, required-tier selector, draft/publish
4. Public creator page: SSR with locked teasers; full body only rendered when canViewPost passes
5. Checkout: Stripe Checkout in subscription mode with application_fee_percent → webhook creates/updates Membership → welcome email
6. Member feed: aggregate unlocked posts across the fan's active memberships, paginated
7. Dunning: handle invoice.payment_failed → set past_due, send card-update email, lock content after grace period; recover on payment_succeeded
8. Creator earnings: MRR from active memberships, new/churned cohorts by month, payout balance

## Quality bar
- Loading.tsx skeletons and error.tsx boundaries on every async route
- SEO: generateMetadata on creator pages (title, description, og:image from banner), JSON-LD ProfilePage schema
- Money stored in cents as integers, formatted with Intl.NumberFormat
- Webhook idempotency: dedupe Stripe events by event id before processing
- Seed script: 3 creators, 8 tiers, 30 posts, 12 memberships, 40 payments

Start with step 1. After each step, tell me what to verify in the browser before moving on.

Design the complete UI for a Patreon-style creator membership platform called FanCircle. React + Tailwind, shadcn/ui components, lucide-react icons. Warm creator aesthetic: cream/off-white background, #FF424D coral-orange primary, rounded-2xl cards, soft shadows, Inter font.

## Screens to generate

### 1. Home / discover
- Sticky header: logo left, search bar center, 'Start creating' button and avatar menu right
- Category chip row (Music, Podcasts, Art, Writing, Gaming, Video) with active state
- Featured creators grid (3 cols desktop / 2 tablet / 1 mobile): banner thumbnail, avatar overlapping, name, category, member count, 'View' button

### 2. Creator page
- Wide banner with avatar, creator name, member count and a follow button overlaid
- Tier cards row: each card has a name, big monthly price, a checklist of perks with check icons, and a coral 'Join' button; the recommended tier gets a 'Popular' ribbon
- Post feed below: post cards with title, snippet, media thumbnail, timestamp; locked posts show a frosted-blur over the body with a centered lock icon and 'Join [tier] to unlock' pill

### 3. Tier checkout
- Two-column: left = tier summary card with perks, right = payment form (card fields), price breakdown rows (monthly price, processing fee, total/month), 'Subscribe' button, cancel-anytime reassurance line

### 4. Member feed
- Single-column feed of unlocked posts across all supported creators, each card showing the creator avatar + name, post title, body, media, and reactions row
- A left rail listing the creators the fan supports with their avatars; a top filter to show one creator or all

### 5. Creator studio - earnings
- Sidebar nav (Home, Posts, Members, Earnings, Settings)
- Stats row cards: MRR with mini area chart, active members, new this month, churned this month (red)
- A second chart: members over time as a stacked area by tier
- Members table: fan avatar, tier badge, joined date, status badge (active green / past due amber / cancelled gray), lifetime value

### 6. Post composer
- A clean editor: title input, rich-text body, a media attach button (image/audio/video link), and a 'Who can see this?' selector listing the creator's tiers plus 'Public'; a preview toggle showing the locked-teaser version; Save draft / Publish buttons

### 7. Manage memberships (fan)
- A list of the fan's subscriptions: creator avatar + name, current tier, monthly price, next billing date, and an Edit tier / Cancel action per row
- A small banner at the top for any past-due membership prompting the fan to update their card

Make every screen fully responsive. On mobile: tier cards become a horizontal swipe carousel, the studio sidebar collapses to a bottom tab bar, and the checkout becomes a single stacked column. Use realistic placeholder data - creator names, tier prices $3/$8/$15/$25, member counts 120–8,400, MRR figures like $1,240–$18,600.

Build a creator membership platform app (Patreon model) called FanCircle.

## Entities
- Creator: handle, displayName, bio, bannerImage, avatar, category (single-select: music/podcasts/art/writing/gaming/video), published (boolean), owner (user reference)
- Tier: creator reference, name, priceMonthly (number), perks (multi-line text list), rank (number, higher = more access)
- Post: creator reference, title, body (rich text), mediaUrl, mediaType (none/image/audio/video), requiredTier (tier reference), status (draft/published), publishedAt (date)
- Membership: fan (user), creator reference, tier reference, status (active/past_due/cancelled), currentPeriodEnd (date)
- Payment: membership reference, amount (number), fee (number), status (paid/failed), paidAt (date)

## Roles & permissions
- Any signed-in user can be a fan; a user who creates a Creator profile becomes a creator
- Creators can only edit their own page, tiers and posts, and only see members of their own creator
- Fans can only see and manage their own memberships
- Admin role: moderate any creator, view a revenue dashboard (sum of Payment.fee by month)

## Pages
1. Public home: search + category filter, grid of published creators (banner, name, member count)
2. Creator page: banner header, tier cards with Join buttons, feed of posts where locked posts show a blurred teaser plus the required tier
3. Tier checkout: tier summary, price breakdown (price + processing fee), subscribe action
4. Member feed (fan): aggregated unlocked posts across all the fan's active memberships
5. Creator studio: manage page + tiers, post composer with required-tier selector, members list, earnings summary
6. Admin dashboard: all creators with approve/remove, monthly platform-fee revenue chart

## Rules
- A fan can view a post only if they have an active membership whose tier rank >= the post's required tier rank
- Memberships renew monthly; a failed payment sets status to past_due and locks content after a 3-day grace period
- Cancelling keeps access until currentPeriodEnd, then sets status to cancelled
- One membership per fan per creator; changing tier updates the rank used for access
- Platform fee = 10% of each payment; creator payout = sum of payments minus fees
- Only published creators appear on the public home; drafts are private to their owner

## Look & feel
Patreon-inspired: cream background, coral-orange (#FF424D) primary buttons, card layouts with rounded corners, locked posts shown with a blur overlay and lock icon. Clean sans-serif typography. Mobile responsive throughout.

Seed with 6 sample creators across 4 categories, 2–3 tiers each, 4–6 posts each (mix of free and locked), 2 sample fans with active memberships, and a few payment records so every page has data.