Mailchimp

Prerequisites

• Node.js LTSfree

  Required runtime for running Next.js and backend scripts.

• GitHubfree

  Source control and deployment pipeline connection.

• 

  Resend Accountfree tier available

  Provides a reliable API layer for sending emails and handling webhooks.

AI coding tools

• Claude Code

  Best-in-class multi-file agentic coding tool for scaffolding full-stack features.

• Cursor

  Ideal for fine-tuning the drag-and-drop email builder interface and visual components.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js project with Tailwind CSS, configure Supabase for authentication, and establish the foundational database schema using Drizzle ORM.

   Initialize a new Next.js project with Tailwind CSS and TypeScript. Set up Drizzle ORM to connect with a Supabase PostgreSQL database. Create database tables for users, audiences (lists), contacts (email, first_name, last_name, status, custom_fields), campaigns (subject, content, status, sent_at), and campaign_analytics (opens, clicks, bounces). Configure Supabase Auth middleware to protect dashboard routes and ensure secure user sessions. Implement a clean layout structure with a sidebar navigation for Audience, Campaigns, Automations, and Analytics.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Audience and Contact Management Module

   Build the interface and backend logic for importing contacts, managing subscriber lists, and handling custom field mapping.

   Build the Audience management module in Next.js. Create an interface to view, add, edit, and delete contacts within specific audience lists. Implement a CSV import utility that parses uploaded files on the server side, maps columns to contact fields (email, tags, status), and bulk-inserts records into the database with duplicate email handling. Add filtering capabilities to segment contacts by subscription status (subscribed, unsubscribed, cleaned).

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Email Campaign Builder Interface

   Create a visual email designer or a structured block-based editor to draft HTML marketing emails.

   Develop an email campaign creation wizard with a multi-step form (Recipient selection, Campaign Details, Content Designer, Review & Send). For the content editor, implement a block-based system where users can add text blocks, image links, buttons, and footers, generating a responsive HTML template string on save. Include a live preview pane that toggles between desktop and mobile viewport sizes.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Email Sending & Resend Integration

   Integrate the Resend API to handle transactional and bulk campaign broadcasting with proper error catching and rate limiting.

   Integrate the Resend API into the campaign execution pipeline. Create a background server action or queue handler that iterates through active subscribers of a selected audience list, personalizes the email content with merge tags (e.g., *|FNAME|*), and dispatches batch requests via Resend. Implement proper error handling for failed deliveries, logging status updates directly to the campaign_analytics table.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Tracking Pixels & Analytics Dashboard

   Implement open tracking pixels, link redirection handlers, and an analytics reporting dashboard.

   Build tracking features for sent campaigns. Create an API endpoint that serves a 1x1 transparent tracking pixel which logs email opens when loaded, updating the campaign analytics. Build a link redirection endpoint that rewrites outgoing campaign links through your server to track click events before redirecting users to the destination URL. Design a reporting dashboard displaying total sends, open rates, click rates, and bounce logs with visual charts.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Automated Drip Workflows

   Implement a basic event-triggered automation workflow engine for welcoming new subscribers.

   Implement a basic marketing automation engine. Create a database schema for automation workflows and trigger steps (e.g., 'When a contact joins an audience list, wait 1 day, then send Campaign X'). Build a cron-triggered API route that evaluates active workflow states, checks execution timestamps, and automatically queues follow-up emails using the Resend API.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Mailchimp