How to vibe codeFlodesk

Prerequisites

• Node.jsfree

  Required runtime for running Next.js and frontend tooling.

• GitHubfree

  Code repository and deployment source control.

• Resend accountfree tier (3k emails/mo)

  Transactional email API to handle outbound delivery with managed DNS and DKIM.

AI coding tools

• Claude Code

  Best-in-class multi-file agentic coding tool for scaffolding the database, backend workflows, and drag-and-drop editor components.

• Cursor

  Ideal for fine-tuning the complex React-based visual layout editor and component CSS.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js 16 project with Tailwind CSS 4, shadcn/ui, better-auth, and Turso database client configured for user authentication and subscriber data models.

   Create a new Next.js 16 app with TypeScript, Tailwind CSS 4, and App Router. Set up Turso client connectivity using @libsql/client. Define Prisma or Drizzle schema models for users, subscribers (id, email, status, custom_fields, tags, created_at), forms (id, user_id, title, settings, layout_json), email_templates (id, user_id, name, json_blocks, html_content), and campaigns (id, user_id, template_id, subject, status, sent_at). Integrate better-auth for email/password authentication. Ensure proper environment variable configuration and clean project structure.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Audience & Segment Management Dashboard

   Build the subscriber management interface allowing users to view, tag, filter, import via CSV, and export their subscriber base.

   Build a dashboard page in Next.js App Router for managing subscribers. Create a data table component with shadcn/ui featuring pagination, search by email, filtering by status (active, bounced, unsubscribed), and batch tagging. Add a CSV import modal that parses uploaded files using PapaParse and bulk-inserts subscribers into Turso with server actions. Implement a metrics summary header showing total active subscribers, growth rate, and unsubscribe counts.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Visual Drag-and-Drop Email Builder

   Develop a minimalist visual builder interface where users can stack layout blocks (text, images, buttons, countdown timers, polls) and compile them into responsive email HTML.

   Build a visual email builder component in React. Provide a sidebar of content blocks: Header, Paragraph, Image, Button, Countdown Timer, and Poll. Allow users to drag or click to add blocks into a central canvas, reorder them, and edit their properties (colors, padding, font family, link URLs) in a right-side inspector panel. Implement an export function that compiles the block state tree into clean, responsive HTML email markup using nested <table> structures for maximum email client compatibility (Outlook, Gmail, Apple Mail).

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Forms & Lead Generation Embeds

   Implement public-facing hosted landing pages and embeddable form snippets that collect subscriber data and assign them to specific tags.

   Create a form builder module where users can design inline, pop-up, and link-in-bio capture forms linked to specific tags. Build a public route `/f/[formId]` that renders the hosted form with custom branding colors and fonts. Implement form submission handling via Server Actions that validates email input, checks for duplicates, creates the subscriber record in Turso, and redirects to a success message or optional downloadable asset.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Workflow Automation Engine with Inngest

   Set up an asynchronous event-driven workflow engine using Inngest to handle multi-step automated email sequences with timed delays.

   Integrate Inngest into the Next.js app to handle email automation workflows. Create an event listener for `subscriber.created` that triggers a multi-step workflow sequence. Build a workflow step definition interface where users can configure triggers, time delay steps (e.g., 'wait 2 days'), condition checks (e.g., 'did they click link X?'), and send email actions. Write the Inngest background function handler that executes these steps reliably, interacting with the Resend API to deliver scheduled emails.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Campaign Broadcast & Resend Integration

   Connect the campaign scheduler to the Resend transactional email API to deliver newsletters to segmented audience lists.

   Implement the campaign dispatch system. Build a campaign review screen where users select an email template, choose target subscriber segments or tags, and schedule or instantly broadcast the email. Write a server action that queries matching active subscribers from Turso, batches them in chunks, and sends them via the Resend API using the compiled HTML content and personalized merge tags (e.g., {{subscriber.email}}). Track delivery success and log campaign stats in the database.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

7. 07Stripe Checkout & Digital Product Sales

   Integrate Stripe Checkout sessions to enable creators to sell digital products and subscriptions directly inside the platform.

   Implement e-commerce checkout support using Stripe. Create a products table in Turso and a UI for creators to set up digital product listings with price, title, and delivery file URL. Build an API route using Stripe Checkout SDK to create payment sessions. Set up a Stripe webhook handler endpoint that listens for `checkout.session.completed`, records the transaction, and automatically triggers an email via Resend containing the product download link to the buyer.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Flodesk