How to vibe codeLoops

Prerequisites

• Node.jsfree

  Required runtime for TypeScript, Next.js, and backend automation worker loops.

• GitHubfree

  Source control and CI/CD pipeline triggers.

• 

  Amazon SES AccountPay-as-you-go ($0.10/1k)

  Underlying email delivery relay required for sending actual emails.

AI coding tools

• Claude Code

  Best-in-class coding agent for scaffolding multi-file full-stack systems and managing complex schema relations.

• Cursor

  Ideal for fine-tuning the visual workflow canvas and Lexical block editor UI components.

Build guide

1. 01Project Scaffolding and Database Schema

   Initialize the Next.js application with TypeScript, Tailwind CSS, Prisma or Drizzle ORM connected to Neon Postgres, and configure better-auth.

   Create a new Next.js full-stack application using TypeScript and Tailwind CSS. Configure a Drizzle ORM schema targeting Neon Postgres with tables for 'users', 'contacts' (storing email, first name, last name, subscribed boolean, custom JSON attributes, userGroup), 'audiences', 'events', 'campaigns', and 'workflows'. Integrate better-auth for user authentication. Create a clean dashboard shell with sidebar navigation for Audience, Workflows, Campaigns, and Settings.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Contact Management & Segment Engine

   Build the contact list view, contact import flows, and dynamic segmentation filtering based on properties.

   Build the Audience contact management interface in Next.js. Implement a data table displaying contacts with pagination, search, and filter capabilities based on custom contact properties and subscription status. Create backend API endpoints for creating, updating, and importing contacts via CSV or JSON payload. Add a saved segments builder allowing users to create dynamic filters (e.g., plan equals pro AND subscribed is true).

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Transactional API and Amazon SES Integration

   Implement the API endpoint for sending transactional emails and integrate Amazon SES for reliable message dispatch.

   Build a secure REST API endpoint at `/api/v1/emails/send` that accepts a recipient email, template identifier, and dynamic data variables. Integrate the AWS SDK (`@aws-sdk/client-ses`) to transmit emails via Amazon SES. Implement error handling, bounce tracking logging, and API key authentication per workspace. Ensure outgoing emails include compliant unsubscribe headers and footer settings.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Visual Workflow Automation Canvas

   Create a node-based visual canvas using React Flow to design lifecycle onboarding sequences and timed event triggers.

   Implement a visual workflow automation builder using React Flow in the Next.js app. Allow users to drag and drop trigger nodes (e.g., 'userCreated', 'eventReceived'), timer nodes (e.g., 'wait 3 days'), condition filter nodes (e.g., 'filter !activated'), and action nodes ('send email'). Store workflow graph topologies as JSON structures in the database and provide a visual configuration sidebar for each node type.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Durable Background Job Orchestration

   Wire up Inngest to execute asynchronous workflow step progressions, scheduled delays, and event listeners.

   Integrate Inngest into the Next.js backend to handle durable background workflow execution. When an app event hits `/api/v1/events/send`, trigger an Inngest background function that evaluates active workflows listening for that event name. Implement step functions that handle delays (e.g., `step.sleep('3d')`), evaluate branch conditions, and dispatch emails through the SES module when criteria are met.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Email Editor & MJML Compilation

   Build a markdown/block-based email composition interface and compile templates to responsive HTML using MJML.

   Build an email template editor interface using a block-based markdown approach. Integrate an MJML compilation library on the backend to translate component blocks into fully responsive HTML emails that render correctly across legacy email clients like Outlook. Add a preview mode showing desktop and mobile viewport toggles and test send functionality.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Loops