How to vibe codeSendFox

Prerequisites

• Node.jsfree

  Runtime environment for building and executing the full-stack web application.

• GitHubfree

  Source code repository and deployment pipeline integration.

AI coding tools

• Claude Code

  Agentic coding tool to scaffold database schemas, API routes, and frontend views iteratively.

• Cursor

  AI-native editor for refining the rich text email composer and landing page UI components.

Build guide

1. 01Project Scaffolding and Database Schema

   Initialize the Next.js project with Tailwind CSS, configure Turso database client, and set up better-auth tables for user authentication.

   Initialize a new Next.js project with TypeScript and Tailwind CSS. Configure Turso (libSQL) as the database provider and set up better-auth for secure user login with email/password and Google OAuth. Create migration scripts for tables: users, contacts, lists, campaigns, forms, and automations. Ensure proper foreign key constraints and indexes on contact email addresses and list IDs.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Contact Management & Tagging System

   Build the audience dashboard, list segmentation views, CSV import utility, and contact activity timeline.

   Build the Audience and Contacts dashboard in Next.js. Create API routes for importing contacts via CSV upload, manual single-contact addition, and updating contact tags. Implement a responsive table view with search by first name, last name, and email, list filtering, and batch actions (bulk delete, bulk tag). Create a contact profile detail view showing a chronological activity timeline of subscriptions, opens, and clicks.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Email Editor & Campaign Composer

   Develop the rich-text email editor with merge tags, test email dispatch, and campaign scheduling.

   Build the email campaign composer with a clean rich-text and block-based editing interface. Support merge tags like {{contact.first_name}} that interpolate subscriber data. Add a 'Send Test Email' feature using the Resend API and a scheduling engine that saves campaigns as drafts or queued states. Ensure generated email output compiles into clean, cross-client compatible HTML markup.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Smart Pages & Embeddable Forms

   Create hosted Smart Pages and customizable embeddable lead-capture forms with multiple display triggers.

   Implement public Smart Pages and form builder views. Allow users to configure form themes, color schemes, and display types (inline, popup, slide-in, sticky bar). Build public endpoints that render hosted landing pages from a unique slug, handle form submissions securely with validation, add subscribers directly to the assigned list, and display a clean confirmation thank-you page.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Background Queues & Email Delivery Engine

   Wire up Inngest background job processing to handle asynchronous campaign dispatches and tracking pixels.

   Configure Inngest to handle background job execution for sending scheduled email campaigns and processing automation sequence delays. Build the email sending worker that loops through list subscribers, replaces merge tags per recipient, and dispatches via Resend API. Implement open and click tracking endpoints using transparent tracking pixels and redirect URL wrappers to record recipient engagement metrics.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for SendFox