How to vibe codeFormstack

Prerequisites

• Node.jsfree

  Required runtime for the Next.js full-stack framework and build tools.

• GitHubfree

  Source control and deployment pipeline integration.

• Supabase Accountfree

  Provides Postgres database, relational storage, and serverless auth.

AI coding tools

• Claude Code

  Best-in-class agentic coding tool for scaffolding full-stack features and executing multi-file changes across complex schemas.

• Cursor

  Ideal AI-native editor for iterative UI design and precise frontend component tweaking.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js project with Tailwind CSS, configure better-auth with Supabase Postgres, and establish the core relational tables for forms, fields, submissions, document templates, and e-signatures.

   Initialize a new Next.js project with TypeScript, Tailwind CSS, and App Router. Set up better-auth connected to a Supabase PostgreSQL database. Create database migrations and Prisma or Drizzle schema models for: users, forms (id, title, user_id, settings, created_at), form_fields (id, form_id, label, type, validation_rules, sort_order), submissions (id, form_id, data_json, ip_address, created_at), document_templates (id, user_id, name, file_url, schema_mapping), and signatures (id, document_id, signer_email, status, audit_trail_json). Verify the database connection and ensure authentication sign-up and sign-in flows operate correctly.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Drag-and-Drop Form Builder Interface

   Build an interactive form builder UI allowing users to add, reorder, and configure various field types (text, number, dropdown, file upload, payment) with live preview capabilities.

   Build a visual form builder page in Next.js using a sidebar of available field types (text, textarea, select, checkbox, file upload, stripe_payment) and a central drop canvas. Implement drag-and-drop reordering (or click-to-add with up/down controls). Clicking a field opens a configuration panel to edit its label, placeholder, required status, and conditional logic rules. Save the form configuration state back to the forms and form_fields tables via Server Actions. Provide a public form rendering view at `/f/[formId]` that dynamically renders the form fields, executes client-side validation, and stores form submissions as JSON payloads in the database.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Form Submissions Dashboard & Analytics

   Create a secure dashboard view for form owners to inspect incoming submissions, filter data, export to CSV, and view submission analytics.

   Create a form submissions management dashboard under `/dashboard/forms/[id]/submissions`. Build a responsive data table displaying form submission rows with pagination, sorting, and detail expansion drawers showing full JSON response objects. Add a CSV export action that streams submission data directly to the client. Include summary charts showing submission counts over time using lightweight chart libraries or custom SVG components.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Document Generation Template Engine

   Implement a document template upload and parsing engine that merges form submission data or custom JSON payloads into DOCX templates.

   Implement a document generation module using `docxtemplater` and `pizzip`. Allow users to upload standard `.docx` template files containing tag placeholders like `{client_name}` and `{submission_date}` via UploadThing storage. Build an execution endpoint that accepts a form submission ID or manual JSON input, fetches the associated template file, performs variable substitution using the payload, generates a rendered `.docx` or converted `.pdf` document, and stores the output in Supabase storage with a download link available on the dashboard.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05E-Signature Workflow & Audit Trail

   Build a multi-participant signing interface with drawing/typing inputs, automated status updates, and immutable audit trail logging.

   Create an e-signature request system where a generated document can be sent to one or more signers via email links. Build a secure signing view at `/sign/[token]` where recipients can review the document, draw or type their signature, and submit. Capture the signer's IP address, user agent, timestamp, and signature image data URL. Construct an automated audit trail summary appended to the final document record and trigger confirmation emails to all participants using Resend.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Integration Webhooks & Final Polish

   Add webhook trigger dispatching on form submission and document signing events, along with end-to-end UI polish and error handling.

   Build an outgoing webhook dispatch system. When a form is successfully submitted or a document is signed, look up registered webhook URLs for that user/form and dispatch an HTTP POST request with the payload, including signature verification headers and automated retry queues using background jobs. Polish the user interface with loading states, toast notifications, error boundaries, and comprehensive unit tests for form validation and document merging logic.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Formstack