How to vibe codeOmnisend

Prerequisites

• Node.jsfree

  Required for running the Next.js runtime and backend worker processes.

• GitHubfree

  Source control and integration with deployment platforms.

AI coding tools

• Claude Code

  Best-in-class multi-file agentic coding tool for scaffolding full-stack SaaS features and handling complex backend logic.

• Cursor

  AI-native editor for rapidly iterating on complex drag-and-drop UI components and React forms.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize a Next.js application with Supabase, configure better-auth, and set up the relational schema for contacts, campaigns, segments, and workflow steps.

   Scialize a new Next.js project using Tailwind CSS and TypeScript. Configure Supabase as the relational database and integrate `better-auth` for user authentication. Create the following database tables using SQL migrations: `contacts` (id, user_id, email, phone, status, tags, custom_properties jsonb, created_at), `campaigns` (id, user_id, type [email|sms], subject, content, status, sent_at), `segments` (id, user_id, name, filter_rules jsonb), and `workflows` (id, user_id, name, trigger_type, steps jsonb, active boolean). Ensure proper foreign key constraints, indexes on email and user_id, and Row Level Security (RLS) policies so users only access their own data. Provide clean TypeScript types for all database models.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Contact Management & CSV Import

   Build the contact list view, manual contact creation, and a CSV import pipeline with error validation and duplicate handling.

   Build a contacts management interface in Next.js under `/dashboard/contacts`. Include a data table displaying contact email, phone, status (subscribed, unsubscribed), and tags with pagination and search. Implement a CSV import modal that parses uploaded files using `papaparse`, validates email formats, checks for duplicates against existing records in the Supabase `contacts` table, and bulk-inserts valid rows using Supabase transactions. Add a manual 'Add Contact' form with validation via Zod and React Hook Form. Ensure all UI components match a clean modern SaaS aesthetic.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Dynamic Segmentation Engine

   Implement a visual segment builder that constructs dynamic audience filters based on contact properties and event history.

   Build a dynamic segmentation builder page at `/dashboard/segments/new`. Allow users to define compound filter rules (e.g., 'Email status equals subscribed' AND 'Tags contain VIP'). Save these rules as JSONB in the `segments` table. Create a server-side query builder function that translates these JSONB rules into optimized SQL WHERE clauses against the `contacts` table to compute and display the real-time matching audience count instantly when rules change. Include options to view the matching contacts list.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Campaign Creator & Resend Email Dispatch

   Create an email campaign composition view integrated with the Resend API for transactional and promotional dispatch.

   Build an email campaign creation studio at `/dashboard/campaigns/new`. Include fields for campaign name, subject line, preview text, and an HTML/Markdown editor. Integrate the Resend API (`resend` npm package) to handle email sending. When a user selects a target segment, fetch all matching contacts from Supabase, iterate over them securely in batches, and dispatch emails via Resend. Log each dispatch outcome (success, failure, timestamp) in a new `campaign_logs` table. Add a reporting dashboard at `/dashboard/campaigns/[id]` showing total sent, opened, and clicked metrics.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Multi-Channel Workflow Automation

   Implement automated triggers and multi-step workflows for welcome series and cart recovery using background processing.

   Build a workflow automation builder at `/dashboard/workflows`. Support triggers like 'Contact Subscribed' and actions like 'Send Email' or 'Wait X Hours' or 'Send SMS via Twilio'. Store workflow definitions in the `workflows` table. Implement a webhook endpoint at `/api/webhooks/events` that ingests external events (e.g., user signup, order created), evaluates active workflows matching that trigger, and queues execution steps. Use Supabase background functions or scheduled cron jobs to process delayed workflow steps (such as waiting 24 hours before sending a follow-up email).

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06AI Content Assistant

   Integrate the Anthropic API and Vercel AI SDK to generate email subject lines, body copy, and segment rules via natural language prompts.

   Incorporate AI-powered marketing assistants into the campaign and segment builders using the Vercel AI SDK and Anthropic API (`@ai-sdk/anthropic`). Create an API route at `/api/ai/generate` that accepts a prompt and a task type (`subject_line`, `email_body`, or `segment_rules`). Implement UI buttons in the campaign editor ('Generate with AI') and segment builder ('Describe audience in plain English') that call this endpoint and dynamically inject the generated text or filter rules into the form state. Handle loading states and error handling gracefully.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Omnisend