How to Clone beehiiv

Create a full-stack newsletter platform called HiveMail using Next.js (App Router), Tailwind CSS, Prisma and SQLite (swappable to Postgres), with a background job for sends.

## What to build
A beehiiv-style platform: writers create a publication, write block-based posts, and send them to email subscribers. Posts also publish to a public web archive. Includes signup forms, basic analytics and a referral program.

## Key screens
- Public publication home with latest posts and a signup form
- Public post page with a clean reading layout and subscribe CTA
- Writer dashboard: subscriber/open/growth stat cards and a posts list (draft/scheduled/sent)
- Post editor: block-based content, subject line, Send / Schedule / Save-draft
- Subscribers table: email, status, source, joined date; import and filter by status
- Analytics: open/click rates and a growth chart over time
- Referral widget (subscriber-facing): unique link and a milestone reward tracker
- Settings: publication details, from-name, custom domain

## Schema (Prisma)
Publication (id, ownerId, name, slug, description, fromName)
Post (id, publicationId, title, content Json, status, scheduledAt, sentAt)
Subscriber (id, publicationId, email, status, source, referredById, createdAt)
Event (id, postId, subscriberId, type, createdAt)

## Logic that must work
- Sending enqueues a job that emails all active subscribers, records the send, and flips the post to 'sent'; never send in the request thread
- A scheduler checks for due 'scheduled' posts and sends them; sends are idempotent so a retry can't double-send
- Unsubscribe links carry a signed token; clicking sets the subscriber to 'unsubscribed' and excludes them from future sends
- Open/click tracking writes Event rows; the dashboard aggregates open rate = unique opens / delivered
- The signup form (hosted + embed) creates an active subscriber and records its source
- Each post renders to both an HTML email and a public web page from the same content blocks
- A subscriber's referral link attributes new signups via referredById and increments their reward milestone
- Only the publication owner can edit its posts and subscribers; drafts never appear on the public site

## Style
Modern media look: white canvas, #FBBF24 amber primary, rounded-xl cards, serif for reading + Inter for the UI, skeleton loaders on fetch. Fully responsive - the editor toolbar becomes a sticky bottom bar on mobile.

Wire sends to an email API (Resend/Postmark) via env key; if absent, mock the send (log recipients, mark sent) so the flow works offline. Use Stripe test mode for plan upgrades. Seed one publication, 4 posts (2 sent, 1 scheduled, 1 draft) and ~30 subscribers with some open/click events.

You are building a production-quality newsletter platform (beehiiv-style) called HiveMail. 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
- Email via Resend or Postmark (verified domain, SPF/DKIM); a job queue (Inngest or BullMQ) for bulk and scheduled sends
- Stripe Billing (subscriber-count tiers); Zod for all input validation

## Architecture requirements
- Sends are ALWAYS background jobs: enqueue per-recipient (or batched) jobs with retries and idempotency keys so a retry can't double-deliver; the request only enqueues
- Deliverability is first-class: per-subscriber suppression list, one-click List-Unsubscribe header, bounce/complaint webhooks that auto-unsubscribe - treat reputation as the product
- Public archive routes are server-rendered with generateMetadata + JSON-LD Article schema; the app routes are auth-gated via middleware
- lib/audience.ts: single source of truth for resolving the active, non-suppressed recipient set for any send

## Data model
publications, posts (content as JSON blocks), subscribers, events (open/click/bounce/complaint), referrals, send_jobs. Index subscribers(publicationId, status), events(postId), subscribers(referredById).

## Implementation order
1. Scaffold + Prisma schema + Supabase auth + create-publication onboarding
2. Block editor + post CRUD; render a post to both HTML email and a public web page from the same content
3. Subscribers: import (CSV), hosted signup form + embed, status management, signed unsubscribe links
4. Sending pipeline: enqueue → provider send → record delivery; scheduled-post worker; idempotent and retry-safe
5. Tracking + analytics: open pixel, click redirects, bounce/complaint webhooks; dashboard with open/click/growth
6. Referral program: per-subscriber link, referral attribution on signup, milestone rewards
7. Monetization: Stripe Billing tiers by subscriber count; (optional) paid subscriptions with a gated post type

## Quality bar
- Idempotent send jobs keyed on (postId, subscriberId); never double-send on retry or re-deploy
- Honor unsubscribes and suppressions on EVERY send with no exceptions; log why each recipient was included or skipped
- Loading/error states everywhere; CSV import validates and reports bad rows instead of failing silently
- Public archive pages are SEO-correct (canonical, og:image, sitemap) since they're your organic-traffic asset
- Open/click aggregation counts unique subscribers, not raw events, so rates aren't inflated
- Seed script: 2 publications, 6 posts across statuses, ~80 subscribers, sample events and 1 referral chain

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

Design the complete UI for a beehiiv-style newsletter platform called HiveMail. React + Tailwind, shadcn/ui components, lucide-react icons. Clean modern media aesthetic: white background, a warm amber (#FBBF24) primary, rounded-xl cards, soft shadows, a serif font for reading and Inter for the app UI.

## Screens to generate

### 1. Public publication home
- Centered header: publication name, one-line description, and an inline email signup field with an amber Subscribe button
- A clean list of recent posts: title, date, short excerpt, and a subtle divider between entries
- Footer with a second subscribe prompt and social links

### 2. Public post page
- Generous reading layout: large serif headline, byline + date, hero image, comfortable measure for body text
- A sticky subscribe bar that appears as you scroll, plus an end-of-post subscribe card

### 3. Writer dashboard
- Sidebar nav (Posts, Subscribers, Analytics, Monetize, Settings)
- Stat cards row: total subscribers, average open rate, 30-day growth with a small line chart
- Posts table: title, status badge (Draft gray / Scheduled blue / Sent green), sent date, opens, clicks, and a kebab menu

### 4. Post editor
- Top bar: subject-line input, and Save / Schedule / Send buttons (Send is amber)
- Center: a block-based editor canvas (heading, paragraph, image, button, divider blocks) with a floating add-block control
- Right panel: send settings (audience, schedule date/time) and a live email-preview toggle

### 5. Subscribers + referral
- Subscribers: a table with email, status pill, source, joined date, plus Import and a status filter; a growth sparkline header
- Referral widget (subscriber-facing): the unique referral link with a copy button and a milestone reward progress bar (e.g. 3 / 5 / 10 referrals unlock rewards)

### 6. Analytics
- A header row of metric cards (subscribers, open rate, click rate, 30-day net growth) each with a sparkline
- A larger growth chart over time and a top-posts table ranked by opens

### 7. Monetize
- Cards for the revenue levers: Paid subscriptions (set tier prices), Recommendations/Boosts (toggle which publications you recommend), and an Ad-network placeholder, each with a short explainer and an enable toggle

Make every screen fully responsive. On mobile: the editor's right settings panel becomes a bottom sheet; the dashboard sidebar collapses to a bottom tab bar. Use realistic placeholder data - a publication name, post titles, open rates 38–62%, subscriber counts in the low thousands.

Build a newsletter publishing platform app (beehiiv model) called HiveMail.

## Entities
- Publication: name, slug, description, fromName, owner (user reference)
- Post: publication reference, title, content (long text / blocks), status (draft/scheduled/sent), scheduledAt (date), sentAt (date)
- Subscriber: publication reference, email, status (active/unsubscribed), source, referredBy (subscriber reference), createdAt
- Event: post reference, subscriber reference, type (open/click), createdAt

## Roles & permissions
- Writers own and manage only their own publication, posts and subscribers
- The public can read published posts and subscribe via the signup form
- Admin role: view all publications and a platform-wide totals dashboard

## Pages
1. Public publication home: name, description, list of sent posts, and an email signup form
2. Public post page: clean reading layout with a subscribe CTA
3. Writer dashboard: subscriber/open/growth stats and a posts list by status
4. Post editor: write content, set a subject line, and Send / Schedule / Save-draft
5. Subscribers: table with status and source; import and filter by status
6. Analytics: open and click rates plus a subscriber-growth chart over time
7. Settings: publication name, description, from-name, custom domain

## Rules
- Sending a post delivers it (email step) to all active subscribers and marks the post 'sent'
- Scheduling sets status 'scheduled' with a time; it sends automatically once that time passes
- Clicking an unsubscribe link sets the subscriber to 'unsubscribed' and removes them from future sends
- Each subscriber has a referral link; signups through it set referredBy and count toward reward milestones
- A signup form submission creates an active subscriber and records its source
- Open rate is unique opens divided by delivered, not raw event counts

## Look & feel
Modern media aesthetic: white background, amber (#FBBF24) primary buttons, rounded cards, a serif font for post reading and a clean sans-serif for the app. Mobile responsive throughout.

## Data note
The email step should be a single action that takes a post and its active subscriber list; real deployments route this through a managed email provider for deliverability.

Seed with one publication, 4 posts (2 sent, 1 scheduled, 1 draft) and about 30 subscribers with a few open/click events, so every page has data on first load.