How to vibe codeAudienceful

Prerequisites

• Node.jsfree

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

• GitHubfree

  Version control repository and CI/CD deployment pipeline hook.

• 

  Mailgun or Resend Accountfree tier available

  Mandatory underlying email sending infrastructure to ensure domain authentication (SPF/DKIM) and actual inbox placement.

AI coding tools

• Claude Code

  Unmatched ability to scaffold multi-file database schemas, API routes, and complex frontend block editors autonomously from detailed prompts.

• Cursor

  Ideal for fine-tuning the Notion-style rich text editor UI components, drag-and-drop blocks, and visual workflow canvas nodes with instant visual diff reviews.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js project with Tailwind CSS, configure better-auth for workspace user management, and set up the Neon Postgres schema for subscribers, tags, campaigns, and automations.

   Scaffold a new Next.js application with TypeScript, Tailwind CSS, and App Router. Set up Drizzle ORM connected to Neon Postgres. Create database tables for users, workspaces, subscribers (email, name, status, custom_fields, unsubscribed_at), tags, subscriber_tags (many-to-many), campaigns (title, subject, content_json, html_body, status, scheduled_at), and automated_journeys. Implement better-auth with email/password and workspace organization plugins. Ensure all database relations and foreign keys are cleanly configured with proper indexes on subscriber emails and campaign IDs.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Notion-Style Collaborative Rich-Text Editor

   Build the campaign composition interface using a block-based editor framework integrated with Liveblocks for real-time multi-user presence and live cursors.

   Build a campaign creation and editing page in Next.js featuring a block-based rich text editor (using Tiptap or BlockNote) that mimics Notion. Implement slash commands (/heading, /image, /button, /divider) and per-block styling controls. Integrate Liveblocks to enable real-time multi-user collaboration with live cursors, active collaborator avatars in the header, and inline comments. Add a preview toggle that compiles the block JSON document into clean, mobile-responsive HTML suitable for email clients, complete with dark-mode variable support.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Subscriber CRM, Segments & CSV Import

   Implement the audience management dashboard, tag assignment system, dynamic filtering, and CSV contact list importer with error handling.

   Create an Audience CRM dashboard page that lists subscribers with pagination, search, status filters (active, bounced, unsubscribed), and tag filters. Build a CSV import wizard that parses uploaded contact sheets, maps columns to custom fields, checks for duplicate emails, and bulk-inserts records into Neon Postgres while assigning selected tags. Implement dynamic segmentation rules where users can save segment filters based on tags and custom field criteria for targeted email blasts.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Visual Marketing Automation Workflow Engine

   Develop a visual node-based drip sequence builder backed by Inngest durable background jobs to handle triggers, time delays, and branching logic.

   Build a visual workflow automation builder interface where users can design drip sequences. A sequence starts with a trigger node (e.g., 'New subscriber added' or 'Tag added'), followed by action nodes ('Send email') and delay nodes ('Wait 2 days' or 'Wait 4 hours'). Implement backend execution using Inngest step functions to handle durable background execution, ensuring timed delays wait reliably without timing out serverless execution limits. Handle state persistence so subscribers progress through steps accurately and can exit upon conversion or unsubscription.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Email Sending Pipeline & Domain Authentication

   Connect the campaign dispatcher and transactional endpoints to Resend/Mailgun, tracking open/click webhooks and delivery metrics.

   Implement the email dispatch engine using the Resend API SDK. Create backend API routes to process bulk campaign sends against targeted subscriber segments, personalizing merge tags (e.g., {{subscriber.name}}) before dispatch. Set up webhook ingestion endpoints to receive delivery, open, click, bounce, and complaint events from the email provider, updating campaign analytics counters and automatically marking hard-bounced or unsubscribed emails in the database to protect sender reputation.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06AI Assistant Integration & Final Polish

   Integrate Anthropic or OpenAI API endpoints to generate campaign copy and outline automated sequences directly from a chat prompt drawer.

   Add an AI assistant slide-over drawer to the campaign editor powered by the Anthropic API. Allow users to prompt the AI to draft newsletters or subject lines matching a specified brand voice. Include confirmation previews so users can inspect generated blocks before inserting them into the editor document. Polish the application dashboard with summary metrics cards (total subscribers, average open rate, delivery health) and comprehensive error boundaries.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Audienceful