How to vibe codeYouform

Prerequisites

• Node.jsfree

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

• GitHubfree

  Version control and automated deployment trigger for hosting.

AI coding tools

• Claude Code

  Handles end-to-end full-stack scaffolding, complex state logic, and iterative debugging directly from the terminal.

• Cursor

  Ideal for fine-tuning the complex React state interactions in the drag-and-drop form builder and responsive respondent UI.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js application with Tailwind CSS, configure Turso database connection, and set up better-auth tables.

   Scaffold a new Next.js project with Tailwind CSS and TypeScript. Set up Drizzle ORM connected to Turso. Define database schemas for users, workspaces, forms, form_blocks (storing JSON field configurations and validation rules), submissions, and submission_answers. Implement better-auth for user authentication with email/password. Ensure all database migrations run cleanly and provide a seed script with a default user and sample form.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Visual Form Builder UI & Block Management

   Build the drag-and-drop form editor interface allowing users to add, reorder, delete, and configure question blocks.

   Create the form builder dashboard page in Next.js. Implement a sidebar listing available block types (short text, long text, email, number, select, rating, file upload, signature) and a central canvas where blocks can be added, reordered, and selected for editing. When a block is selected, display a properties panel to edit its label, placeholder, description, required status, and validation settings. Save changes instantly to the Turso backend via server actions with appropriate debouncing.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03AI Form Generator Integration

   Integrate the OpenAI API via Vercel AI SDK to generate structured form schemas from natural language prompts.

   Add an 'AI Form Generator' modal to the builder. Using the Vercel AI SDK and OpenAI API, create a server action that takes a plain-text prompt (e.g., 'Create a customer feedback form with an NPS score and comments') and returns a validated JSON structure matching our form blocks schema. Populate the form canvas automatically with the generated blocks upon successful generation. Handle API errors gracefully with loading indicators.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Conditional Logic & Answer Piping Engine

   Implement the conditional logic tree evaluator and answer piping system for both builder configuration and live respondent views.

   Build a conditional logic configuration modal for form blocks allowing rules like 'If Question X equals Value Y, show/hide Question Z'. On the live respondent view, implement a reactive evaluation engine that dynamically computes visible steps, evaluates arithmetic calculations, and replaces variable tokens (e.g. {{field_1}}) with previous answers in real time as the user progresses through the multi-step form.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Live Conversational Respondent View & Partial Submissions

   Create the responsive multi-step form respondent interface with partial submission tracking and file uploads.

   Create a public form-filling route /[formId] featuring a clean, full-screen conversational multi-step interface. Implement step navigation with smooth transitions and client-side validation. On every keystroke or blur event, debounce and send partial submission state to an API endpoint so dropped-off leads are captured in the database. Add file upload handling up to 10MB stored via server action.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Submissions Dashboard, Analytics & Webhook Dispatcher

   Build the submission management dashboard, drop-off analytics calculation, and webhook integration dispatcher.

   Build the form responses dashboard showing total views, starts, completions, completion rate, and average time. Create a drop-off analysis breakdown showing which question causes the highest abandonment rate. Implement a background webhook dispatcher that fires submission payloads to configured URLs, Google Sheets, or Slack endpoints whenever a form is completed.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Youform