How to vibe codeMailchimp

Prerequisites

• Node.jsfree

  Runtime environment for the Next.js full-stack application.

• GitHubfree

  Version control and repository hosting for your AI coding agents.

• 

  Amazon SES accountPay-as-you-go (~$0.10 per 1k emails)

  Reliable transactional email sending infrastructure required for bulk campaign delivery.

AI coding tools

• Claude Code

  Unmatched capability to scaffold complex multi-file Next.js apps, handle database schemas, and debug background queue states.

Build guide

1. 01Project Scaffolding and Database Schema

   Initialize the Next.js project with Tailwind CSS, configure Turso SQLite via Drizzle ORM, and set up better-auth for single-user authentication.

   Create a new Next.js project using TypeScript and Tailwind CSS. Configure Drizzle ORM to connect to Turso SQLite. Define schemas for users, contacts (with email, name, status, custom tags), campaigns (subject, content, status, send_at), and automation_flows. Implement better-auth for email/password authentication. Ensure proper database connection pooling and index creation for contact lookups.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Audience and Contact Management

   Build the audience dashboard UI and API endpoints to import, segment, and manage subscriber lists.

   Build a full-stack Audience management section in Next.js. Create a UI page showing a data table of contacts with pagination, search, and filtering by tags. Implement CSV contact import parsing via PapaParse on the backend, validating email formats and deduplicating records. Create API routes for adding, editing, and deleting individual contacts.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Campaign Editor and Template Builder

   Implement an HTML/text campaign creation interface with live preview and variable substitution.

   Build a Campaign creation workflow in Next.js. Create a multi-step form: Step 1 sets campaign name, subject line, and sender details; Step 2 provides an HTML code editor and a live preview pane supporting template variables like *|FNAME|*. Save campaign drafts to the database and list all campaigns with status indicators (Draft, Sending, Sent).

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Bulk Email Sending Engine with Amazon SES

   Integrate Amazon SES and set up background queues to process bulk email blasts safely.

   Integrate the AWS SDK v3 for SES into the application. Create a background execution route or server action that takes a campaign ID and an audience segment, batches contacts into chunks of 50, and dispatches personalized emails via Amazon SES while handling rate-limiting and tracking send failures. Update campaign status to 'Sent' upon completion and log delivery metrics.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Marketing Automation Engine

   Build an event-driven workflow engine using Inngest to handle delayed trigger sequences.

   Integrate Inngest into the Next.js application to power marketing automation workflows. Create an event listener that triggers when a new contact subscribes. Build a state machine workflow that waits for a specified delay (e.g., 2 days), checks if a specific condition is met, and then automatically dispatches a designated follow-up email campaign.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Analytics and Unsubscribe Handling

   Implement open/click tracking webhooks and public-facing unsubscribe pages to maintain compliance.

   Build campaign reporting analytics tracking open rates, click rates, and bounce counts using transparent pixel tracking and tracked link redirects. Create a public-facing unsubscribe route that updates a contact's status to 'unsubscribed' in the database when clicked, adding them to a global suppression list to prevent future sends.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Mailchimp