How to Clone Mailchimp

Create a full-stack Mailchimp-style email-marketing app called InboxBloom using Next.js (App Router), Tailwind CSS, Prisma and SQLite (swappable to Postgres), sending through Resend.

## What to build
Users manage contact lists, build and send email campaigns, run simple automations and view open/click reports. Plans are tiered by contact count; free up to 500 contacts.

## Key screens
- Dashboard: contact/growth/open-rate stat cards, recent campaigns, create-campaign CTA
- Audience: contacts table with tags and status, CSV import, add contact, segments
- Signup forms: create an embeddable form with a copyable snippet
- Campaign builder: choose audience, subject/sender, block-based editor (text/image/button/divider), preview, send or schedule
- Automations: trigger -> ordered email steps with delays
- Reports: per-campaign delivered/opens/clicks/unsubscribes/bounces with a links table
- Settings: sender identity, billing tiers, team

## Schema (Prisma)
- User (id, name, email, role, plan)
- Audience (id, ownerId, name)
- Subscriber (id, audienceId, email, name, tags Json, status)
- Campaign (id, ownerId, audienceId, subject, fromName, fromEmail, contentJson, status, scheduledAt, sentAt)
- EmailEvent (id, campaignId, subscriberId, type, url, createdAt)
- Automation (id, ownerId, trigger, stepsJson, active)

## Logic that must work
- Sending enqueues per-subscriber emails through Resend, writing a 'delivered' EmailEvent per recipient; open/click tracking via Resend webhooks (or simulate events if no webhook)
- Sending happens in a queued job, not the web request, and is rate-limited to respect the provider; the request just kicks off the run
- Every email contains a working unsubscribe link that flips status to 'unsubscribed' and excludes the contact from future sends (legally required)
- Campaigns only go to 'subscribed' contacts; skip unsubscribed/bounced
- Open/click rates are computed from EmailEvent rows at read time, not stored as static counts
- Free plan caps contacts at 500; enforce on import and add

## Style
Mailchimp-like: warm yellow (#FFE01B) primary with dark text, white canvas, rounded cards, friendly-but-clean, Inter font. Campaign builder = left controls + centered email preview. Fully responsive.

## Seed & fallback
Seed 1 audience (~40 subscribers), 3 sent campaigns with realistic event data, and 1 active automation, plus a demo user. If a Resend key isn't available, mock sending and generate plausible open/click events so reports render.

You are building a production-quality email-marketing app (a focused Mailchimp clone). Work iteratively: scaffold, build audiences and the campaign builder, then add the send pipeline, 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)
- Resend (or Postmark / Amazon SES) for delivery; a job queue (BullMQ on Redis, or a serverless queue) for sends and automations
- Zod for validation; money in integer cents

## Architecture requirements
- Sending NEVER happens in a web request: enqueue a job per recipient (or batched), rate-limited to respect the provider; the request just creates the campaign run
- Idempotency: each (campaign, subscriber) send is recorded so retries don't double-send; webhook handlers are idempotent too
- Tracking: process provider webhooks (delivered, open, click, bounce, complaint, unsubscribe) into an append-only email_events table; compute rates at read time
- Compliance is non-negotiable: inject an unsubscribe link and a physical-address footer into every email; honor unsubscribes and hard bounces by excluding those contacts permanently
- Automations = a small state machine: a subscriber enters a flow on a trigger and advances through timed steps; persist enrollment state

## Data model
users, audiences, subscribers(status, tags), segments, campaigns, campaign_sends(campaignId, subscriberId, status), email_events(append-only), automations, automation_enrollments(step, nextRunAt). Index subscribers(audienceId, status), email_events(campaignId, type), automation_enrollments(nextRunAt).

## Implementation order
1. Scaffold + Prisma schema + Supabase auth; audiences + subscribers CRUD with CSV import and tag management
2. Signup forms: create + hosted/embeddable endpoint that double-opt-ins new subscribers
3. Campaign builder: block-based editor (contentJson), audience/segment selection, preview, save draft
4. Send pipeline: enqueue per-recipient jobs through Resend, write campaign_sends + delivered events, inject unsubscribe + footer
5. Tracking: webhook endpoint -> email_events; reports page computing delivered/open/click/unsub/bounce rates
6. Segmentation: filter subscribers by tag/activity/field; target campaigns to a segment
7. Automations: trigger enrollment + a scheduled worker that advances enrollments by nextRunAt
8. Plans/billing limits by contact count; team roles

## Quality bar
- Provider-agnostic email module so Resend/Postmark/SES are swappable behind one interface
- Strict suppression list (unsubscribes, complaints, hard bounces) enforced before every send
- Loading/error boundaries; a worker dashboard or logs for queued/failed sends
- Seed script: 1 user, 2 audiences (~60 subscribers total), 4 campaigns with events, 1 automation with enrollments

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

Design the complete UI for a Mailchimp-style email-marketing app called InboxBloom. React + Tailwind, shadcn/ui components, lucide-react icons. Friendly, approachable aesthetic: white background, warm yellow (#FFE01B) primary with dark text, rounded cards, playful-but-clean, Inter font.

## Screens to generate

### 1. Dashboard
- Top bar: logo, account menu
- Stat cards row: total contacts, new this month, average open rate, average click rate (each with a small trend sparkline)
- Recent campaigns table: name, audience, sent date, opens %, clicks % (with a colored progress bar), status badge
- A prominent 'Create campaign' button

### 2. Audience / contacts
- Contacts table: checkbox, email, name, tag chips, status badge (subscribed green / unsubscribed gray / bounced red), date added
- Toolbar: search, Import CSV, Add contact, filter by tag/segment; a list-growth mini chart on top

### 3. Campaign builder (the hero screen)
- Three zones: left panel of draggable blocks (text, image, button, divider, social), center = a centered email canvas (max ~600px) showing the email with selectable blocks, right = settings for the selected block (and a top bar for subject line, from name/email, audience selector)
- Footer with Preview, Save draft, and a primary Send / Schedule button

### 4. Reports
- A single campaign report: big metric tiles (delivered, opened, clicked, unsubscribed, bounced), an opens-over-time line chart, a 'top clicked links' table, and a subscriber-activity list

### 5. Automations
- A simple vertical flow builder: a trigger node ('Subscribes to list') followed by email step cards with delay labels ('Wait 2 days') and an 'Add step' button between them

### 6. Signup form builder
- A two-pane editor: left controls (fields, button text, success message, double opt-in toggle), right a live form preview, plus a 'Copy embed code' snippet box

## Components to include
- A reusable email-block component for the builder (text, image, button, divider) with a selected-state outline
- A status badge used across tables (subscribed/unsubscribed/bounced, draft/scheduled/sent)
- A send/schedule modal with an audience summary ('Sending to 412 subscribers') and a confirm button

## Responsive behavior
Make every screen responsive. On mobile, the campaign builder stacks (blocks in a bottom sheet, canvas full width) and tables become stacked cards.

Use realistic placeholder data - campaign names ('March Newsletter', 'Welcome Email'), open rates 18%–47%, contact counts, and subscriber emails/names.

Build an email-marketing app (Mailchimp model, scoped to a niche) called InboxBloom.

## Entities
- Audience: name, owner (user reference), createdAt
- Subscriber: audience reference, email, name, tags (multi-select), status (subscribed/unsubscribed/bounced), createdAt
- Campaign: owner (user), audience reference, subject, fromName, fromEmail, content (json blocks), status (draft/scheduled/sent), scheduledAt, sentAt
- EmailEvent: campaign reference, subscriber reference, type (delivered/open/click/unsubscribe/bounce), url, createdAt
- Automation: owner (user), trigger, steps (json: ordered emails with delays), active (boolean)

## Roles & permissions
- Account owner: full access to audiences, campaigns, automations and billing
- Teammate: can build and send campaigns but cannot change billing
- A user only sees their own audiences, subscribers and campaigns

## Pages
1. Dashboard: total contacts, list growth, average open rate, recent campaigns, create-campaign CTA
2. Audience: contacts table (email, name, tags, status), CSV import, add contact, segments
3. Signup forms: build an embeddable form that adds subscribers
4. Campaign builder: choose audience, set subject/sender, block-based email editor, preview, send or schedule
5. Automations: trigger plus ordered email steps with delays
6. Reports: per-campaign delivered/opens/clicks/unsubscribes/bounces and clicked links
7. Settings: sender identity, billing tiers, team

## Rules
- Every email includes a working unsubscribe link; unsubscribing sets the subscriber's status and excludes them from all future sends (legally required)
- Campaigns send only to subscribed contacts; unsubscribed and bounced are skipped
- Open and click rates are computed from EmailEvent records, not stored as fixed numbers
- Free plan caps at 500 contacts; prompt to upgrade beyond that
- Sending a campaign creates per-subscriber EmailEvent records as emails are delivered/opened/clicked

## Look & feel
Mailchimp-inspired: white background, warm yellow (#FFE01B) primary with dark text, rounded cards, friendly-but-clean, clean sans-serif. Campaign builder = left controls plus a centered email preview. Mobile responsive throughout.

Seed with 1 audience of ~40 subscribers, 3 past campaigns with realistic open/click stats, and 1 active automation so every page has data.