How to Clone Ghost

Create a full-stack publishing + membership platform called Phantom using Next.js (App Router), Tailwind CSS, Prisma and SQLite (swappable to Postgres).

## What to build
A Ghost-style platform: writers publish posts to a public site, gate some behind free-member or paid access, and can send posts as newsletters. Readers subscribe and pay via Stripe; the platform takes no cut (revenue would come from hosting plans).

## Key screens
- Public site home: post feed with lock badges on gated posts and a subscribe box
- Post page with a server-enforced paywall for gated content
- Writer dashboard: members / paid members / MRR stat cards and a posts list with visibility tags
- Post editor: title, body, visibility selector (Public/Members/Paid), Publish / Save-draft / Send-newsletter
- Members table: email, tier, status, joined; free vs paid counts
- Analytics: member growth and free-to-paid conversion over time
- Member account: reader-facing page to upgrade, cancel and manage email preferences
- Tiers & settings: define paid tiers and edit site details

## Schema (Prisma)
Site (id, ownerId, title, slug, description, fromName)
Post (id, siteId, title, content, visibility, status, publishedAt)
Member (id, siteId, email, tier, status, source, createdAt)
Subscription (id, memberId, tier, price, status, startedAt)

## Logic that must work
- Server-side access control: the post API returns full content only if the post is public, OR the requester is a member (for 'members'), OR an active paid member (for 'paid'); otherwise return a teaser + locked flag
- Stripe Checkout success (webhook) sets the member's tier to paid and creates a Subscription; cancellation flips status back
- 'Send as newsletter' emails the post to the eligible member set based on visibility
- Drafts are never publicly visible; only the site owner/staff can edit posts
- Free signup creates a free member; the public feed shows lock badges on gated posts without leaking their content
- MRR on the dashboard is computed from active paid subscriptions in one shared util
- Webhooks are the only thing that mutates a member's tier, and they're idempotent on the Stripe event id
- The teaser sent to ineligible readers must never contain the gated portion, even in the HTML source

## Style
Editorial and minimal: near-white canvas, #15171A ink primary, a serif for reading + Inter for the UI, generous whitespace, a tasteful paywall card. Skeletons on fetch. Fully responsive - editor publish controls become a sticky bottom bar on mobile.

Use Stripe test mode for paid memberships; if no key is set, mock a successful upgrade that flips the member to paid. Wire newsletters to an email API or mock the send. Seed one site, 6 posts (mixed visibility, 2 drafts) and ~25 members (several paid) so the paywall and dashboard both have data.

You are building a production-quality publishing + membership platform (Ghost-style) called Phantom. Work iteratively: scaffold, then build 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
- Stripe (Billing + Customer Portal) for reader memberships and tiers - no platform cut, mirroring Ghost
- Email via Resend or Postmark for newsletters; Zod for all input validation

## Architecture requirements
- Content access is enforced on the SERVER for every fetch: a resolveAccess(viewer, post) function is the single source of truth deciding full content vs teaser+paywall; never gate by hiding DOM
- Route groups: (site) public reader experience (SSR + SEO), (admin) writer dashboard/editor (auth-gated). Public post pages use generateMetadata + JSON-LD Article schema
- Subscriptions driven entirely by Stripe webhooks (checkout.session.completed, customer.subscription.updated/deleted); webhook handlers are idempotent on the event id and are the only thing that mutates member tier
- Newsletter sends are background jobs with retries and per-member idempotency; honor unsubscribes and List-Unsubscribe

## Data model
sites, posts (visibility enum), members, subscriptions, newsletter_sends, events. Index posts(siteId, status, visibility), members(siteId, tier, status).

## Implementation order
1. Scaffold + Prisma schema + Supabase auth + create-site onboarding
2. Post editor + publishing; public SSR post pages with SEO metadata; visibility field on posts
3. Membership: free signup, member accounts, members dashboard
4. Access control: resolveAccess gating on every post fetch; teaser + paywall card for ineligible readers
5. Payments: Stripe Checkout for paid tiers, Customer Portal for self-serve management, webhooks as the source of truth for tier
6. Newsletters: send a post to the eligible member set as a background job; track delivery and unsubscribes
7. Analytics: member growth, free→paid conversion, MRR and churn on the dashboard

## Quality bar
- A paid post's full content must NEVER reach a non-paying reader, even via the API or a guessed URL - verify server-side every time
- Money in integer cents; MRR computed from active subscriptions in one shared util; idempotent webhooks
- Loading/error states on every async route; SEO-correct public pages (canonical, og:image, sitemap)
- The teaser length is consistent and never includes the gated portion, even in the page source
- Newsletter sends honor unsubscribes and the post's visibility when resolving the recipient set
- Seed script: 1 site, 10 posts across visibilities, ~50 members (~15 paid), sample subscription history

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

Design the complete UI for a Ghost-style publishing + membership platform called Phantom. React + Tailwind, shadcn/ui components, lucide-react icons. Editorial, minimal aesthetic: near-white background, near-black ink (#15171A) with one restrained accent, a refined serif for reading and Inter for the app UI, generous whitespace and a confident type scale.

## Screens to generate

### 1. Public site home
- Minimal masthead: site title (serif), tagline, and a subscribe button
- A post feed: large featured post card on top, then a clean two-column list; gated posts show a small lock icon and a 'Members' or 'Paid' pill
- A footer subscribe section with an email field

### 2. Public post page (with paywall)
- Editorial reading layout: big serif headline, byline + date, hero image, comfortable measure
- For a gated post: show the first two paragraphs, then a gradient fade into a centered paywall card ('This post is for paying members') with tier prices and a Subscribe button

### 3. Writer dashboard
- Sidebar nav (Posts, Members, Tiers, Analytics, Settings)
- Stat cards: total members, paid members, MRR, new members this month, each with a tiny sparkline
- Posts table: title, status badge (Draft gray / Published green), visibility pill (Public / Members / Paid), date, and a kebab menu

### 4. Post editor
- Distraction-free canvas: a large serif title field and a clean body editor, lots of margin
- A right settings panel (or popover): visibility selector (Public / Members only / Paid only), publish date, feature-image upload, and Publish / Send-as-newsletter buttons

### 5. Members + tiers
- Members: a table (email, tier badge, status, joined date) with free vs paid summary cards and a search field
- Tiers: cards for a Free tier and one or two Paid tiers showing monthly/annual price and a benefits list, with an Edit affordance

### 6. Analytics
- A metric row (total members, paid members, MRR, churn) and a member-growth chart over time
- A small funnel visual for free-to-paid conversion, kept clean and editorial

### 7. Member account (reader-facing)
- A simple settings page where a member sees their tier, can upgrade or cancel (Stripe portal), and manages email preferences
- A clear current-plan card with renewal date and a tasteful upgrade CTA for free members

Make every screen fully responsive. On mobile: the editor's settings panel becomes a bottom sheet; the dashboard sidebar collapses to a bottom tab bar; the paywall card stays full-width and tasteful. Use realistic placeholder data - a publication name, post titles, MRR like $2,140, member counts in the hundreds, paid prices $5–$10/mo.

Build a publishing and membership platform app (Ghost model) called Phantom.

## Entities
- Site: title, slug, description, fromName, owner (user reference)
- Post: site reference, title, content (long text), visibility (public/members/paid), status (draft/published), publishedAt (date)
- Member: site reference, email, tier (free/paid), status (active/cancelled), source, createdAt
- Subscription: member reference, tier, price (number), status (active/cancelled), startedAt (date)

## Roles & permissions
- Writers (site owner/staff) manage only their own site, posts and members
- Members are readers who get access based on their tier; the public can read public posts
- Admin role: view all sites and a platform totals dashboard

## Pages
1. Public site home: post feed with lock badges on gated posts and a subscribe box
2. Post page: reading layout; gated posts show a teaser plus a paywall/upgrade card to non-eligible readers
3. Writer dashboard: members / paid members / MRR stats and a posts list with visibility tags
4. Post editor: title, body, visibility selector (Public/Members/Paid), Publish / Save-draft / Send-as-newsletter
5. Members page: table of members with tier and status; free vs paid counts
6. Member account: reader-facing page to upgrade, cancel and manage email preferences
7. Tiers & settings: define paid tiers and edit site details

## Rules
- Access: public posts are open; 'members' posts require a logged-in member; 'paid' posts require an active paid subscription
- A non-eligible reader sees only a teaser plus a paywall, never the full gated content
- Upgrading (paid checkout) sets the member's tier to paid and unlocks paid posts; cancelling reverts access
- 'Send as newsletter' emails the post to the eligible members for its visibility
- Free signup creates a free member; only the site owner/staff can edit posts
- Drafts never appear in the public feed regardless of visibility

## Look & feel
Editorial and minimal: near-white background, near-black (#15171A) primary, a serif for post reading and a clean sans-serif for the app, generous whitespace, a tasteful paywall card. Mobile responsive throughout.

## Data note
MRR on the dashboard is the sum of active paid subscriptions; the platform takes no cut of what readers pay, mirroring the real model.

Seed with one site, 6 posts (a mix of public/members/paid plus a couple of drafts) and about 25 members (several paid with active subscriptions) so the paywall and dashboard both have data.