How to Clone Substack

Create a full-stack Substack-style newsletter platform called Letterloft using Next.js (App Router), TypeScript, Tailwind CSS, Prisma and SQLite (swappable to Postgres later).

## What to build
A publishing platform where writers run publications with free and paid posts. Posts publish to a public site and (simulated) email. Readers subscribe free with an email or paid via Stripe test mode. Platform fee: 10% of paid revenue, visible in the writer's dashboard math.

## Key screens
- Landing page pitching writers: 'Keep 90% of what you earn', featured publications, CTA to start a publication
- Onboarding: create account → name your publication → set slug → optional paid pricing (monthly/annual) → publication is live
- Publication home /pub/[slug]: header with logo/name/tagline, subscribe box, paginated post list with lock badges on paid posts
- Post page /pub/[slug]/p/[postSlug]: 680px reading column, serif typography, like button, comments (subscriber-only); server-enforced paywall that truncates paid posts to a teaser + subscribe wall for non-payers
- Editor at /write: title + TipTap rich-text body (headings, bold, italic, blockquote, image upload, divider), audience selector (free/paid), draft autosave, Preview, and a Publish modal that confirms 'Send to N subscribers'
- Writer dashboard: subscriber and MRR stat cards, growth chart (recharts), posts table with status and views, earnings panel showing gross → minus 10% fee → net
- Subscribers table with free/paid filter and CSV export; reader inbox page listing new posts from subscriptions

## Schema (Prisma)
User (id, name, email, passwordHash, avatarUrl), Publication (id, ownerId, name, slug unique, tagline, logoUrl, about, monthlyPriceCents, annualPriceCents), Post (id, publicationId, title, slug, subtitle, bodyJson, bodyHtml, audience free|paid, status draft|published, publishedAt, views, likes), Subscription (id, publicationId, email, userId?, tier free|paid, interval?, status active|cancelled, currentPeriodEnd?, startedAt), Comment (id, postId, authorId, body, createdAt), EmailLog (id, postId, subscriptionId, sentAt, opened)

## Logic that must work
- Paywall enforced in the server component: query the reader's subscription tier before rendering; non-payers get bodyHtml truncated at a <!--paywall--> marker (default: after the second block) - full content never ships to the client
- Publish flow: set publishedAt, then create EmailLog rows for every active subscriber (full content for paid-tier readers of paid posts, teaser otherwise); simulate sends and show them in a dev /outbox page
- Stripe test mode Checkout for paid upgrade; webhook marks the subscription paid and sets currentPeriodEnd; cancellation keeps access until period end
- Revenue math in one util: gross = sum of active paid subs, platformFee = 10%, net = 90% - used by dashboard and admin alike
- Free signup is email-only (no account needed); claiming an account later links subscriptions by email
- Comments are gated to subscribers of that publication; the writer can pin one comment to the top
- Draft autosave every few seconds with a 'saved' indicator; closing the editor never loses work

## Nice touches
- Per-publication RSS feed at /pub/[slug]/feed.xml
- 'Share' button on posts copying the canonical URL with a toast
- Writer dashboard nudge card suggesting the next post when nothing has been published for 7+ days

## Style
Editorial reading experience: warm white (#FCFBF8) background, ink text, deep teal (#0F766E) accents, Lora serif for headings and post bodies, Inter for UI, max-w-[680px] article column, comfortable 1.7 line height. Publication pages feel like an elegant magazine, the dashboard like a quiet tool.

Seed with 3 publications, 6 posts each (2 paid, with paywall markers), ~300 subscribers across free and paid tiers, comments and likes, so paywalls, dashboards and the inbox all demonstrate with real-looking data.

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

## Stack
- Next.js 14 App Router, TypeScript strict, Tailwind CSS, shadcn/ui for dashboard chrome; custom editorial styles for reading surfaces
- PostgreSQL via Prisma; Supabase auth (email + Google) and storage for images
- TipTap editor producing JSON, rendered to web HTML and to email HTML via React Email; Resend for delivery
- Stripe Connect Express: each publication's owner onboards a connected account; paid subscriptions use subscription mode with application_fee_percent = 10

## Architecture requirements
- The paywall is a server-side trust boundary: post body for paid posts is fetched only after verifying an active paid subscription in the same server component; the teaser is a separately stored/derived field. Write a test proving paid content never appears in the HTML response for an anonymous request
- Email fan-out is a background job, not a request handler: publishing enqueues batched sends (100/batch) with retry and an EmailLog per recipient for idempotency - re-running a failed job must never double-send
- Renderer parity: one TipTap-JSON → HTML pipeline with two targets (web, email-safe tables/inline styles); snapshot-test both
- Multi-tenancy by publication: every query scoped by publication_id; slugs unique globally; reserved slug list

## Data model
users, publications, posts (body_json, body_html, teaser_html, audience, status), subscriptions (email-first identity, tier, interval, status, current_period_end, stripe ids), comments, likes, email_logs, payouts. Indexes: posts(publication_id, published_at desc), subscriptions(publication_id, tier, status), email_logs(post_id, subscription_id unique).

## Implementation order
1. Scaffold + Prisma schema + auth; create-publication onboarding (name, slug claim, pricing optional)
2. Editor: TipTap with image upload, autosave drafts (debounced server action), preview route; the paywall-break node insertable by the writer with a sensible default position
3. Public surfaces: publication homepage and post page with ISR; SEO - generateMetadata, OG image route per post, RSS feed per publication at /pub/[slug]/feed.xml
4. Subscriptions: email-only free signup with double-opt-in confirmation link; account claim flow that adopts prior email subscriptions
5. Stripe: Connect Express onboarding for writers, Checkout subscription with 10% application fee, webhooks (checkout.session.completed, invoice.paid, customer.subscription.deleted) updating tier and current_period_end; access until period end on cancel
6. Paywall enforcement + upgrade wall component with monthly/annual toggle showing the annual discount
7. Email pipeline: publish → confirm modal with audience counts → queued fan-out via Resend batches → open tracking pixel updating email_logs; dev mode writes to a local /outbox viewer instead of sending
8. Dashboard: subscriber growth chart, MRR and net-after-fee earnings, per-post performance (views, opens, likes); subscribers table with export and comp; subscriber-only comments with writer pinning

## Quality bar
- Reading pages: 95+ Lighthouse, ink-on-warm-white editorial typography (Lora headings, 680px column), zero CLS from images via stored dimensions
- All money in integer cents; fee math (gross, 10% platform fee, Stripe fees note, net) centralized in lib/revenue.ts with unit tests
- Empty states: new publication gets a 'write your first post' card; zero-subscriber chart shows a friendly baseline
- Unsubscribe links in every email footer (one-click, no login) and a suppression list the fan-out respects
- Rate-limit free-signup submissions per IP and require double-opt-in before any email is sent
- Seed: 3 publications, 18 posts (6 paid), 300 subscribers with varied tiers and histories, comments, email logs

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

Design the complete UI for a paid-newsletter platform called Letterloft (Substack model). React + Tailwind, shadcn/ui for app chrome, lucide-react icons. Editorial aesthetic: warm white background (#FCFBF8), ink-black text, deep teal (#0F766E) accent, Lora serif for headings and article bodies, Inter for UI, generous whitespace.

## Screens to generate

### 1. Landing page
- Minimal header: Letterloft wordmark (serif), Sign in, teal 'Start writing' button
- Hero: serif headline 'Own your audience. Keep 90%.', subhead about web + email + payments in one, dual CTAs (Start writing / Explore publications)
- Featured publications: 3-col grid of cards (logo, name, tagline, subscriber count, Subscribe button)
- How-it-works: three numbered editorial steps with thin rules between

### 2. Publication homepage
- Centered masthead: square logo, serif publication name, tagline, subscriber count in small caps
- Subscribe module: email input + teal Subscribe button, with a Free / Paid ($8/mo) segmented toggle and 'or save with annual' microcopy
- Post list: date in small caps, serif title, two-line teaser, thin divider between items; paid posts get a small lock icon + 'Paid' chip
- About section and a 'Recommended by this writer' row of mini publication cards

### 3. Post reading page
- 680px centered column: serif title, subtitle in gray, byline row (avatar, author, date, read time), body with elegant blockquotes and image captions
- Sticky minimal top bar appearing on scroll: publication name + Subscribe button
- Paywall state: article fades into a gradient after two paragraphs; centered wall card with lock icon, 'This post is for paid subscribers', monthly/annual price buttons and 'Already paid? Sign in' link
- Footer: like button with count, share icon, then a comments section - subscriber avatar threads, one comment showing a 'Writer' badge and pinned state

### 4. Editor
- Distraction-free surface on warm white: oversized serif title placeholder ('Title'), subtitle line, floating formatting toolbar on text selection (B, I, H2, H3, quote, link, image, divider)
- Top bar: back arrow, 'Draft - saved 2m ago' indicator, Preview button, teal Publish button
- Publish modal: audience radio (Everyone / Paid subscribers only), recipient summary ('Sends to 1,204 free + 87 paid subscribers'), schedule option, confirm button

### 5. Writer dashboard
- Sidebar: Posts, Subscribers, Earnings, Settings; publication switcher on top
- Stats row: Subscribers (with +delta), Paid subscribers, MRR, Open rate - each a quiet card
- Subscriber growth area chart (teal fill), posts table (title, status chip, sent date, views, opens, likes)
- Earnings panel: gross revenue, a subtle '−10% platform fee' line, net in bold serif, next payout date

### 6. Reader inbox
- Logged-in home: left rail of subscribed publications (logos with unread dots), main feed of post cards (publication chip, serif title, teaser, time), right column 'Discover' suggestions

Make every screen responsive - the reading column and paywall must be flawless on mobile, the dashboard collapses its sidebar to a bottom tab bar. Use realistic placeholder data: publication names like 'The Margin Call' and 'Pan & Flame', believable subscriber counts and earnings.

Build a paid-newsletter publishing platform (Substack model) called Letterloft.

## Entities
- Publication: owner (user reference), name, slug (unique), tagline, logo (image), about (long text), monthlyPrice (number), annualPrice (number)
- Post: publication reference, title, subtitle, body (rich text), audience (free/paid), status (draft/published), publishedAt (datetime), views (number), likes (number)
- Subscription: publication reference, readerEmail, reader (user reference, optional), tier (free/paid), interval (monthly/annual, optional), status (active/cancelled), startedAt, periodEnd (datetime, optional)
- Comment: post reference, author (user), body, createdAt, isPinned (boolean)
- EmailSend: post reference, subscription reference, sentAt, opened (boolean)

## Roles & permissions
- Writers manage only their own publications, posts, and subscriber lists; they can comp (gift) paid access to any email
- Readers can subscribe to any publication; paid post bodies are visible only to that publication's active paid subscribers (and the writer)
- Anyone, logged out included, can read free posts and the teaser portion of paid posts
- Comments: only subscribers of the publication may comment; the writer can pin or delete comments on their posts
- Admin role: platform dashboard of publications, total paid subscriptions, gross subscription revenue and the 10% platform-fee total

## Pages
1. Public landing: pitch ('Keep 90% of what you earn'), featured publications, start-a-publication CTA
2. Publication homepage at /pub/[slug]: masthead, subscribe box (email + free/paid choice with prices), chronological post list with lock badges on paid posts, about section
3. Post page: clean serif reading layout, like button, comments; paid posts show two paragraphs then a subscribe wall with monthly/annual buttons for non-payers
4. Editor: title, subtitle, rich-text body with images and quotes, audience selector (free/paid), save draft, preview, and publish with a 'send to N subscribers' confirmation
5. Writer dashboard: subscriber count, paid count, monthly recurring revenue, growth chart, posts table with views and opens, earnings showing gross minus 10% fee = net
6. Subscribers page: table with tier filter and CSV export, comp-access button
7. Reader inbox: latest posts from publications the logged-in reader subscribes to, with unread indicators
8. Publication settings: name, slug, logo, tagline, about, paid prices, welcome message

## Rules
- Publishing a post records EmailSend entries for every active subscriber: paid posts go in full to paid subscribers and as teaser + upgrade link to free ones; free posts go to everyone
- Enforce the paywall at data level: never expose a paid post's full body to a reader without an active paid subscription to that publication
- Paid checkout (test mode) sets tier=paid and periodEnd one month or one year out; cancelling keeps access until periodEnd, then the subscription reverts to free
- Platform fee is always 10% of paid revenue - show gross, fee and net consistently on writer and admin dashboards
- Free subscriptions need only an email; if that email later creates an account, link the subscriptions automatically
- One like per user per post; pinned comments sort first

## Look & feel
Editorial and warm: off-white (#FCFBF8) background, ink text, deep teal (#0F766E) buttons and links, serif headlines with clean sans-serif UI, narrow centered reading column. The product should feel like a literary magazine, not a CMS.

Seed with 3 sample publications (tech analysis, cooking, local news), 6 posts each including 2 paid, around 300 mixed free/paid subscribers, comments and likes so paywalls, dashboards and the inbox all show realistic data.