How to vibe codeConstant Contact

Prerequisites

• Node.jsfree

  Required runtime for the full-stack web application framework

• GitHubfree

  Version control and deployment pipeline source

• Resend AccountFree tier (3k emails/mo)

  Transactional and marketing email sending API with managed DKIM

AI coding tools

• Claude Code

  Agentic terminal coding tool capable of building out full-stack Next.js features and database schemas across multiple files

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize a Next.js 16 project with Tailwind CSS, shadcn/ui, and better-auth. Set up the Neon Postgres database schema to model users, contact lists, individual contacts, campaign drafts, and tracking events.

   Create a new Next.js 16 full-stack web application using TypeScript and Tailwind CSS. Initialize Drizzle ORM configured for a Neon Serverless Postgres database. Define SQL schemas for users, contact_lists, contacts (with custom metadata JSON fields), campaigns (subject, html_content, status), and campaign_events (sent, opened, clicked, bounced). Integrate better-auth for secure email/password authentication. Create a clean dashboard shell layout featuring navigation for Contacts, Campaigns, Automations, and Analytics.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Contact Management & CSV Import

   Build contact list management interfaces and CSV parsing logic to handle bulk subscriber imports with validation and duplicate handling.

   Build a contact management module in Next.js. Create server actions to add individual contacts, view segmented lists, and upload/parse CSV files containing contact lists. Implement duplicate email handling and field mapping. Build a responsive data table using shadcn/ui showing contact status (subscribed, unsubscribed, bounced) with filtering and search capabilities.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Email Campaign Builder & AI Content Generation

   Create an email campaign editor equipped with AI-assisted copywriting via the OpenAI API and template storage.

   Implement an email campaign creation studio. Build a visual drag-and-drop or block-based email template editor that outputs clean responsive HTML. Integrate an AI assistant panel powered by the OpenAI API that takes user prompts to generate engaging email subject lines and body copy directly into the editor canvas. Store draft campaigns in the database.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Email Dispatch Engine via Resend API

   Integrate the Resend API to handle outbound batch email dispatch, tracking pixels, and link click-through redirects.

   Build the email campaign dispatch engine using the Resend API. When a campaign is sent, iterate through the target contact list, personalize merge tags (e.g., {{First Name}}), and dispatch via Resend. Embed a 1x1 tracking pixel image URL in the HTML email and rewrite links to point to a tracking redirect route to capture opens and clicks in the campaign_events table.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Automation Workflows & Durable Background Jobs

   Set up Inngest to manage trigger-based background sequences, such as welcome email series upon contact creation.

   Integrate Inngest into the Next.js backend to handle durable marketing automation workflows. Create an automation trigger for when a new contact is added to a list, executing a multi-step sequence (e.g., immediate welcome email, wait 3 days, send follow-up email) with built-in retry and pause handling.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Constant Contact