How to vibe codeEmailOctopus

Prerequisites

• Node.jsfree

  Runtime environment for Next.js development

• 

  Amazon AWS Accountpay-as-you-go ($0.10 per 1k emails)

  Required for Amazon SES email sending and SNS bounce/complaint webhooks

• GitHubfree

  Version control and repository hosting

AI coding tools

• Claude Code

  Best-in-class multi-file reasoning agent for scaffolding complex full-stack Next.js applications and worker pipelines

• Cursor

  AI code editor for iterative UI polish on campaign builders and dashboard views

Build guide

1. 01Project Scaffolding and Database Schema

   Initialize the Next.js application with TypeScript, Tailwind CSS, and shadcn/ui components. Set up Turso database connection and define Prisma/Drizzle schemas for users, lists, subscribers, custom fields, campaigns, and tracking events.

   Initialize a new Next.js project with TypeScript, Tailwind CSS, and better-auth integration. Configure Drizzle ORM to connect to a Turso SQLite database. Create database migrations and tables for users, mailing lists, subscribers (with custom JSON fields), campaigns (title, subject, html_content, status), and event logs (opens, clicks, bounces). Set up the dashboard layout with sidebar navigation for Campaigns, Lists, Automation, and Reports.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Subscriber Management & Custom Fields

   Build the subscriber list manager allowing CSV imports, single subscriber creation, and dynamic custom field definitions.

   Build subscriber list management pages in Next.js App Router. Implement a table view with pagination, search, and filtering by list and custom fields. Create a CSV import form that parses uploaded files via PapaParse, maps columns to subscriber fields, and bulk-inserts records into Turso using batch transactions. Add an export CSV feature.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Campaign Editor and Preview

   Create an email campaign creation interface supporting rich HTML editing and template variables.

   Develop the campaign creation workflow. Build a form for subject line, sender name, and preview text. Integrate a rich text / HTML editor alongside a live preview pane that replaces merge tags like {{subscriber.first_name}} with mock data. Save drafts and completed campaigns to the database.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Amazon SES Integration & Dispatch Engine

   Integrate AWS SES SDK to send bulk email campaigns using background workers for throttling.

   Implement the email dispatch engine using the AWS SDK for JavaScript (SES v3). Configure Inngest to handle background job execution for campaigns. When a campaign is scheduled or sent, fetch subscribers in chunks, compile personalized HTML for each subscriber with tracking pixels and rewritten link URLs, and send via SES respecting rate limits. Update campaign status to 'sent' upon completion.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Tracking Pixels & Link Click Telemetry

   Build tracking endpoints to capture email opens via invisible 1x1 pixels and clicks via redirect URLs.

   Create API route handlers for email tracking. Implement GET /api/track/open?c={campaignId}&s={subscriberId} that logs an open event and returns a 1x1 transparent GIF. Implement GET /api/track/click?c={campaignId}&s={subscriberId}&url={destinationUrl} that logs a click event, increments click counters, and issues an HTTP 302 redirect to the destination URL. Store all telemetry in the event logs table.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Automation & Welcome Drips

   Implement a simple automation sequence trigger when a new subscriber joins a list.

   Build a basic marketing automation workflow engine using Inngest. When a subscriber is added to a list with an active welcome automation, trigger a durable background workflow that waits for a configured delay (e.g., 1 hour) and then dispatches a welcome email campaign using the SES integration. Log all workflow execution steps.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

7. 07Reporting & Analytics Dashboard

   Aggregate open, click, bounce, and unsubscribe metrics into a visual reporting dashboard for each campaign.

   Build a campaign analytics report view displaying total sent, open rate percentage, click rate percentage, bounce count, and unsubscribe count over time. Use Recharts to render time-series charts of opens and clicks. Display a paginated event log table for individual subscriber activity.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for EmailOctopus