How to vibe codePaperform

Prerequisites

• Node.jsfree

  Required runtime for running Next.js and package manager tooling.

• GitHubfree

  Repository hosting and CI/CD connection for deployment platforms.

AI coding tools

• Claude Code

  Best-in-class agentic coding tool for scaffolding full-stack features and complex React state machines directly from the terminal.

• Cursor

  AI-native editor ideal for fine-tuning the rich block-based form builder interface and complex Tailwind UI components.

Build guide

1. 01Project Scaffolding and Database Schema

   Initialize the Next.js application with Tailwind CSS, configure better-auth, and set up the Turso SQLite database schema for users, forms, fields, and submissions.

   Scavenge and initialize a fresh Next.js project using App Router, TypeScript, and Tailwind CSS. Install better-auth configured with email/password authentication backed by a Turso SQLite database via libSQL. Set up the core database migration schema containing tables for users, forms (storing JSON configuration blocks), fields, and submissions. Implement a clean dashboard layout shell with navigation sidebar and authentication protection middleware.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Document-Style Form Editor

   Build a block-based WYSIWYG form editor supporting slash commands to add questions, images, headings, and layout elements.

   Build a document-style form builder interface in Next.js using a block editor architecture (or TipTap extension model). Users should be able to type '/' to invoke a slash command menu to insert various question types (text, long text, dropdown, multiple choice, file upload, date, header, image). Each block should be stored in form state with configurable properties such as label, placeholder, required status, and help text. Ensure blocks can be reordered, duplicated, and deleted seamlessly.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Conditional Logic and Dependency Engine

   Implement a real-time condition evaluation engine that alters question visibility and requirements based on prior responses.

   Implement a conditional logic rules builder and real-time evaluation engine for form blocks. Allow creators to define rules on any field (e.g., 'Show this question if Question X equals Value Y'). On the form respondent view, evaluate the dependency tree dynamically on every input change, updating field visibility, requirement validation states, and layout flow without page reloads.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Calculations and Pricing Formula Engine

   Create a calculation field component and parser that computes dynamic scores and pricing totals based on form inputs.

   Build a Calculation Field and custom pricing rule engine. Allow form creators to write mathematical formulas referencing other field IDs (e.g., [field_1] * [field_2] + 15). Implement a secure math expression parser on both the client (for live preview feedback) and server (for secure submission verification) to calculate final scores, totals, and quote amounts dynamically.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Respondent Form View and Submission Handling

   Develop the public-facing respondent view supporting both classic and guided (one question at a time) modes with secure submission storage.

   Create a public form rendering route [slug] where respondents can fill out published forms. Support two layout viewing modes toggled by form settings: 'Classic' (all questions on one scrollable page) and 'Guided Mode' (stepping through one question at a time with smooth transitions and progress indicator). Validate required fields, handle file uploads via Cloudflare R2, execute calculations, and securely store the resulting submission payload in the Turso database.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06AI Form Generation and Submission Insights

   Integrate the Vercel AI SDK and Anthropic API to enable natural language form creation prompts and automated submission summarization.

   Integrate the Vercel AI SDK with Anthropic API to add two AI features: 1) 'AI Form Generator' where a user types a prompt (e.g., 'Create a client intake form for a real estate agency') and the AI generates the complete JSON form block structure. 2) 'AI Submission Insights' on the submissions dashboard that analyzes stored submission rows and generates a summarized executive report of trends and feedback in plain text.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Paperform