How to vibe codeWufoo

Prerequisites

• Node.js LTSfree

  Required runtime for building and executing the Next.js application locally.

• GitHub Accountfree

  Repository host for version control and continuous deployment pipelines.

AI coding tools

• Claude Code

  Best-in-class terminal agent for multi-file scaffolding and iterating through complex React state logic.

• Cursor

  Ideal for fine-tuning the drag-and-drop form builder UI and inspecting visual component diffs.

Build guide

1. 01Project Scaffolding and Database Schema

   Initialize a Next.js project with Tailwind CSS, configure Turso SQLite via Drizzle ORM, and set up better-auth for single-user or lightweight multi-user authentication.

   Create a new Next.js 16 project using TypeScript and Tailwind CSS. Initialize Drizzle ORM configured for Turso SQLite. Define relational database schemas for Users, Forms, Fields, Entries, and EntryValues. Forms should store JSON configuration for fields, theme styles, and rules. Entries should store submission metadata, timestamps, and key-value payload data. Set up better-auth with email/password authentication linked to the Turso database. Ensure all migrations run smoothly and include a robust seed script with a sample contact form and sample fields.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Drag-and-Drop Form Builder Interface

   Build an interactive form builder dashboard enabling users to add, reorder, delete, and configure various field types (text, dropdown, checkboxes, paragraph, file upload).

   Build a comprehensive form builder dashboard page in Next.js using dnd-kit or react-beautiful-dnd. Implement a sidebar containing available field types (Single Line Text, Paragraph, Dropdown, Checkboxes, File Upload). Allow users to drag fields onto a central canvas, reorder them dynamically, and select a field to open an inspector panel. The inspector panel must allow editing the field label, placeholder, required status, CSS class names, and answer choices for selection fields. Save form configurations as a structured JSON object back to the Turso database via server actions.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Public Form Renderer and Submission Engine

   Create the public-facing dynamic form rendering route that parses form schemas, applies field validations, handles file attachments, and records entries.

   Create a public dynamic form view route at `/f/[formId]`. Fetch the form schema from Turso and render each field using accessible form inputs with React Hook Form and Zod validation. Implement multi-page form pagination using page break fields. Handle file upload fields by uploading attachments directly to Cloudflare R2 object storage and storing secure file URLs in the entry data payload. Upon submission, validate all constraints server-side, increment entry counts, and write the submission values into the database. Display a customizable success confirmation message or handle redirect configurations.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Conditional Logic Rule Builder

   Implement a conditional logic rules engine that allows form owners to show, hide, or skip fields dynamically based on respondent inputs.

   Implement a rule builder interface under a 'Form Rules' tab where users can configure triggers (e.g., 'If Field X equals Value Y, show Field Z'). Store these rules in the form schema JSON. On the public form renderer (`/f/[formId]`), implement a reactive client-side rule evaluator that monitors form state changes in real-time, dynamically toggles field visibility, and evaluates validation rules accordingly. Ensure hidden fields are excluded from server-side validation and final submission storage.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Theme Designer and Custom Branding

   Add visual customizer controls enabling users to modify color palettes, fonts, header images, and custom CSS injections for their forms.

   Build a Theme Designer interface allowing users to customize form aesthetics including header background color, font family, button styles, and custom logo uploads. Save theme settings in the form record. Update the public form renderer to dynamically inject these styles into the DOM layout using CSS variables or inline styling blocks, giving the form a polished, branded appearance matching Wufoo's theme designer capabilities.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Entries Manager, Analytics, and Export

   Develop an administrative entries viewer with data export capabilities, summary counts, and out-of-the-box reporting analytics.

   Build an entries management dashboard for authenticated form owners. Display a data table listing all submissions for a selected form with pagination, sorting, and search filtering. Include a summary analytics view showing submission counts over time, bounce rates, and field distribution charts using lightweight charting libraries. Implement a CSV export route that compiles entry data rows into a downloadable spreadsheet format.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

7. 07Notifications and Email Dispatching

   Integrate Resend to automatically send confirmation receipts to respondents and real-time alert notifications to form administrators upon new submissions.

   Integrate Resend into the form submission server action workflow. Add settings in the form builder for notification preferences (admin alert email address and customizable confirmation emails sent to respondents). When a form submission succeeds asynchronously trigger a transactional email dispatch via Resend containing the submitted summary details. Handle errors gracefully so email failures do not block form entry persistence.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Wufoo