How to vibe codeFormsite

Prerequisites

• Node.jsfree

  Required runtime for the Next.js full-stack application framework.

• GitHubfree

  Source control and deployment pipeline integration.

• Cloudflare Accountfree

  Hosting backend database and edge functions.

AI coding tools

• Claude Code

  Best-in-class multi-file agentic coding tool for scaffolding complex form schemas and database models.

• Cursor

  Ideal for fine-tuning the interactive drag-and-drop form builder UI and React component states.

Build guide

1. 01Project Scaffolding and Database Schema

   Initialize the Next.js application, set up Tailwind CSS, configure better-auth with SQLite via Turso, and define core database tables for users, forms, form_fields, submissions, and submission_answers.

   Scaffold a new Next.js project with TypeScript, Tailwind CSS, and App Router. Set up better-auth for user authentication connected to a Turso SQLite database using Drizzle ORM. Create database schemas for users, forms (storing JSON field configurations), form_fields, submissions, and submission_answers. Ensure proper foreign key constraints and indexing for fast query performance on response lookups.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Form Builder UI and Schema Editor

   Build an interactive form editor interface allowing users to add, reorder, and configure various question types (text, dropdown, radio, file upload, calculation fields) with conditional logic rules.

   Build a form builder dashboard page in Next.js using shadcn/ui components. Implement a drag-and-drop or item-addition sidebar that lets creators append question blocks (Text, Textarea, Dropdown, Checkbox, Radio, File Upload, Number/Calculation) to a form state array. Store the configuration as a structured JSON schema in the forms table. Add a modal or drawer for configuring basic field validation and conditional display rules.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Dynamic Form Renderer and Submission Engine

   Create the public-facing responsive form runner that parses form schemas, enforces client-side validation, evaluates conditional visibility rules, and securely records submissions to the database.

   Create a public dynamic form rendering route at `/f/[formId]`. The page must fetch the form JSON schema from Turso, render the form fields dynamically, handle multi-page step navigation, evaluate conditional display logic in real-time, and validate inputs. On submission, securely validate server-side, save form responses into the submissions and submission_answers tables, handle file uploads via Cloudflare R2, and display a confirmation screen.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Email Notifications and Webhooks

   Implement an asynchronous notification system using Resend to dispatch structured email summaries upon successful form submissions, along with webhook triggers for external integrations.

   Implement a notification service using Resend that triggers immediately after a form submission is successfully saved. The email template must format the form question labels and corresponding answers into a clean HTML table. Additionally, add a webhook dispatch engine that sends a JSON payload of the submission data to any configured external URLs or Slack webhook endpoints defined by the form owner.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Results Dashboard, Charts, and Analytics

   Build a comprehensive results dashboard featuring tabular data views, summary charts for survey answers, and CSV export capabilities.

   Build a results management dashboard for form owners under `/dashboard/forms/[id]/results`. Display submitted entries in a sortable, filterable data table with pagination. Include a visual analytics tab that aggregates choice-based question responses into basic charts and graphs. Implement a server action that compiles all submission records into a downloadable CSV export file.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Document Generation Pipeline

   Develop a backend utility to merge form submission data into uploaded Word (.docx) document templates and attach or store the resulting file.

   Implement a document generation feature allowing users to upload a Word (.docx) template containing placeholder tags matching form field keys (e.g., `{{first_name}}`). When a form is submitted, use a Node.js docx template engine library to replace placeholders with actual submission answers, generate the personalized document, and store it securely in Cloudflare R2 while providing a download link in the results dashboard.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Formsite