How to vibe codeHeyflow

Prerequisites

• Node.jsfree

  Runtime environment for building and executing the Next.js web application.

• GitHubfree

  Source control and automated deployment trigger for hosting.

AI coding tools

• Claude Code

  Best-in-class terminal coding agent for scaffolding multi-file React architectures, handling complex state management logic, and debugging API routes.

• Cursor

  Ideal AI code editor for fine-tuning visual drag-and-drop block components and editing Tailwind styles interactively.

Build guide

1. 01Database Schema & Project Scaffolding

   Initialize the Next.js project with Tailwind CSS, Prisma or Drizzle, and Neon PostgreSQL, setting up relational schemas for funnels, pages, blocks, variables, and responses.

   Initialize a new Next.js project with TypeScript, Tailwind CSS, and shadcn/ui components. Configure Drizzle ORM to connect to a Neon PostgreSQL database. Create database migrations and schema definitions for: `funnels` (id, title, settings, user_id, created_at), `steps` (id, funnel_id, title, order_index), `blocks` (id, step_id, type, config_json, position), and `responses` (id, funnel_id, data_json, completed_at). Include proper foreign key constraints, indexes on funnel_id, and Zod validation schemas for all table inserts.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication & Dashboard Foundation

   Implement self-hosted authentication with better-auth and build the main dashboard listing user funnels, response analytics counters, and creation modals.

   Integrate better-auth into the Next.js application supporting email/password sign-up and session management. Build a protected dashboard layout with a sidebar and main content area. Create a funnels list view showing active funnels, total submission counts, and conversion rates fetched from the database. Add a modal and server action to create a new empty funnel with default settings.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Visual Funnel Builder Editor

   Build an interactive multi-step visual canvas where users can add, reorder, and configure various block types (headings, multiple-choice options, input fields, buttons).

   Build a visual funnel editor page in Next.js where users can manage multi-step flows. Implement a sidebar component catalog (Text, Input, Multiple Choice, Button, Calender, Stripe) and a central canvas showing the active step. Allow users to add blocks to a step, reorder them, configure block properties (labels, placeholders, options) in a right-side inspector panel, and save changes back to the database via server actions with optimistic UI updates.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Conditional Logic & Variable State Engine

   Implement the core runtime evaluation engine that tracks user inputs, populates system variables, and computes branching rules to navigate between steps.

   Implement a client-side execution engine for rendering published funnels. Maintain a reactive state store (using React Context or Zustand) tracking user input variables across steps. Build a conditional logic builder UI in the editor allowing rules such as 'If Answer X equals value Y, jump to Step Z'. In the runtime player, evaluate these conditions dynamically on next-step navigation to route users correctly.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Published Web Component & Embed Script

   Create a standalone web component or embed script output that renders published funnels instantly on external websites without style leakage.

   Create a publish route in Next.js that compiles a funnel into a standalone, lightweight JavaScript bundle packaged as a Custom Element (Web Component). Ensure the component encapsulates its styles using Shadow DOM to prevent CSS pollution on host websites, loads in under 300ms, communicates with backend API endpoints to submit responses, and supports inline rendering as well as popup triggers via a simple script tag snippet.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Analytics, Webhooks & Response Management

   Build the response viewing interface, analytics drop-off tracking per step, and webhook dispatching on form submission.

   Build a responses tab in the funnel dashboard showing submitted lead data in a tabular view with CSV export capability. Implement step-by-step drop-off analytics tracking by recording funnel view and step progression events in the database. Add a webhook configuration section allowing users to supply an endpoint URL that triggers a background fetch POST request containing payload data whenever a funnel response is successfully completed.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Heyflow