How to vibe codeReform

Prerequisites

• Node.jsfree

  Runtime environment for Next.js development.

• GitHubfree

  Source control and deployment pipeline integration.

AI coding tools

• Claude Code

  Handles end-to-end scaffolding of the form builder UI, database schema, and server actions from terminal prompts.

• Cursor

  Best for iterative frontend work on complex drag-and-drop form step editors and embed scripts.

Build guide

1. 01Project Scaffolding & Database Setup

   Initialize the Next.js project with Tailwind CSS, configure Turso database connectivity, and set up better-auth for single-user or team authentication.

   Create a new Next.js project using App Router, TypeScript, and Tailwind CSS. Configure Turso (libSQL) as the database client with Drizzle ORM. Set up better-auth for secure user authentication with email and password. Create database schemas for users, forms, form_blocks, submissions, and partial_submissions. The forms table should store form title, branding colors, settings (JSON), and slug. The form_blocks table should store block type (text, email, textarea, select), label, placeholder, required status, and step order. Implement migration scripts and verify database connection.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Form Builder UI & Block Configuration

   Build an intuitive form builder dashboard allowing users to add, reorder, and configure blocks across multiple steps.

   Build a dashboard page in Next.js App Router for managing forms (/dashboard/forms/[id]). Create a visual form builder component where users can add blocks (text, email, choice, textarea), reorder them using drag-and-drop state, and organize them into multi-step pages. Implement real-time auto-saving of form configuration changes to the backend using server actions with proper debouncing. Add a brand customization sidebar to tweak primary colors, fonts, and logo URLs.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Public Form Renderer & Multi-Step Logic

   Create the public-facing respondent view that renders forms cleanly with step navigation and client-side validation.

   Implement the public form rendering page at /s/[slug]. Build a multi-step form runner component that renders one or more blocks per step based on the form configuration. Add client-side validation using Zod before allowing users to proceed to the next step. Include progress bars, smooth page transition animations, and a customizable 'Thank You' redirect page upon successful completion.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Partial Submissions & Draft Saving

   Capture partial data and abandoned submissions incrementally as respondents type or progress through steps.

   Implement partial submission tracking for the public form runner. As respondents type into fields or transition between steps, debounced background requests should incrementally update a partial_submissions table in Turso with the current state and metadata (IP, user agent, timestamps). Create a dashboard view for form owners at /dashboard/forms/[id]/submissions to review both completed submissions and abandoned partial responses.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Embeddable Widgets & Webhook Dispatcher

   Build lightweight embed scripts and iframe wrappers so forms can be embedded on external websites, alongside a basic webhook dispatcher.

   Build a JavaScript embed snippet generator that hosts an iframe pointing to the public form renderer, complete with automatic height resizing via window.postMessage to prevent scrollbars on host sites. Implement a webhook dispatch system using Next.js server actions that fires form submission payloads to configured destination URLs with signature verification headers upon completion.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Reform