How to vibe codeDrip

Prerequisites

• Node.jsfree

  Required runtime for building the Next.js full-stack application.

• GitHubfree

  Source control and deployment pipeline integration.

• Resend Accountfree

  Transactional and marketing email API gateway for sending campaign emails.

AI coding tools

• Claude Code

  Terminal agent best suited for handling multi-file scaffolding, database schemas, and background job logic.

• Cursor

  IDE for fine-tuning the visual drag-and-drop email builder and workflow canvas components.

Build guide

1. 01Project Scaffolding and Database Schema

   Initialize the Next.js project with Tailwind CSS, Drizzle ORM, and Turso. Define database schemas for customers, events, segments, campaigns, and workflows.

   Scaffold a new Next.js project using TypeScript and Tailwind CSS. Set up Drizzle ORM configured for Turso SQLite. Create the database schema with tables for: 'contacts' (id, email, first_name, last_name, attributes JSON, created_at), 'events' (id, contact_id, event_name, properties JSON, timestamp), 'campaigns' (id, name, subject, body_html, status, sent_at), 'workflows' (id, name, definition JSON, active boolean), and 'workflow_enrollments' (id, workflow_id, contact_id, current_node_id, status, next_run_at). Add Zod validation schemas for all table inserts.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication and Dashboard Shell

   Implement authentication using better-auth and build the core dashboard layout with sidebar navigation, metrics overview, and contact list management.

   Integrate better-auth into the Next.js application supporting email/password sign-in. Build a clean SaaS dashboard layout with a sidebar (Contacts, Campaigns, Workflows, Analytics) and a main content area. Create a contacts management view with a data table showing contact list size, attributes, and search functionality. Implement API endpoints to list, create, and delete contacts.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Ecommerce Webhook Ingestion Engine

   Build ingestion endpoints to receive real-time webhook events from stores (orders placed, cart updates, product views) and store them against customer records.

   Create a secure API route '/api/webhooks/store' that accepts incoming JSON payloads representing store events (e.g., order_placed, cart_updated, product_viewed). The endpoint must validate incoming request signatures, locate or create the contact record by email address, and insert an event record into the 'events' table. Ensure it handles high-throughput concurrency safely and logs all unhandled event formats.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Dynamic Segmentation Engine

   Build an interface and query engine for creating dynamic customer segments based on custom event histories, tags, and purchase attributes.

   Build a dynamic segmentation builder interface where users can define rules (e.g., 'Total spent greater than $100 AND Event order_placed occurred in the last 30 days'). Implement a backend query evaluator in Next.js that translates these segment rule criteria into SQL queries against the contacts and events tables, returning the real-time count and list of matching subscribers whenever a segment is viewed.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Visual Email Builder & Campaign Dispatcher

   Implement a drag-and-drop or visual block-based email editor using Tailwind and integrate the Resend API to dispatch broadcast campaigns.

   Implement an email campaign creation view with a visual template editor allowing users to add text blocks, buttons, and dynamic tag insertion (e.g., {{contact.first_name}}). Integrate the Resend SDK to handle email dispatch. Create a dispatch route that queries a selected dynamic segment, compiles personalized email content for each recipient, and sends them via Resend while tracking delivery status.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Stateful Automation Workflow Engine

   Build a visual workflow automation canvas using React Flow and integrate Inngest to manage time-delayed multi-step trigger sequences.

   Integrate React Flow to build a visual workflow automation builder where users can connect trigger nodes (e.g., 'Joined Segment'), action nodes (e.g., 'Send Email'), and delay nodes (e.g., 'Wait 3 Days'). Configure Inngest to handle background execution of workflow steps, ensuring delayed transitions (like waiting 3 days before checking if an item was purchased) resume reliably without timing out serverless execution limits.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Drip