How to vibe codeSurveyMonkey

Prerequisites

• Node.jsfree

  Required runtime environment for Next.js and TypeScript packages.

• GitHubfree

  Code repository hosting and CI/CD connection to deployment targets.

AI coding tools

• Claude Code

  Best-in-class multi-file agentic coding tool for scaffolding full-stack features, handling database schemas, and writing complex logic loops.

• Cursor

  Ideal for fine-tuning React components, survey editor drag-and-drop interactions, and chart rendering views.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js project with TypeScript, Tailwind CSS, shadcn/ui, and connect Neon Serverless Postgres using Drizzle ORM.

   Scaffold a new Next.js 16 project with Tailwind CSS, TypeScript, and configure Drizzle ORM to connect to a Neon PostgreSQL database. Set up the foundational database schema tables: users, surveys (id, title, description, user_id, status, created_at), questions (id, survey_id, type, title, options jsonb, order), logic_rules (id, question_id, condition jsonb, target_question_id), responses (id, survey_id, respondent_meta, completed_at, created_at), and answers (id, response_id, question_id, value jsonb). Ensure proper foreign key constraints, indexes on survey_id and response_id, and provide a database migration script. Verify everything compiles successfully with strict type checking.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication & Dashboard

   Implement authentication using better-auth and create the user dashboard for viewing, creating, and managing surveys.

   Configure better-auth in the Next.js application for email/password authentication backed by our Neon PostgreSQL database. Create a protected dashboard layout (`/dashboard`) that lists the authenticated user's surveys with status indicators (draft/live), response counts, and action buttons to edit, view results, or share. Build server actions for creating new empty surveys or deleting existing ones. Implement a clean, responsive UI using Tailwind CSS and shadcn/ui card components. Include proper error handling and form validation.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Visual Survey Builder & Skip Logic

   Build the core survey editor allowing users to add/reorder questions (multiple choice, rating, text) and define conditional branch routing rules.

   Build a robust survey editor interface at `/surveys/[id]/edit`. Allow users to add, delete, reorder, and edit questions of various types: multiple choice, checkboxes, dropdown, rating scale, and single/open text. Create a sidebar panel for each question where users can configure conditional skip logic (e.g., if Question 1 equals 'Option A', jump to Question 4). Save survey state atomically via Next.js Server Actions with debounced auto-saving. Handle optimistic UI updates smoothly and validate question structures before publishing.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04AI Survey Generator Integration

   Integrate the Anthropic API via the Vercel AI SDK to generate complete survey drafts and answer choices from natural language prompts.

   Implement an AI survey generator modal using the Vercel AI SDK and Anthropic API (`claude-3-5-sonnet`). When a user types a prompt describing their research goal (e.g., 'Create a customer satisfaction survey for a coffee shop'), send a structured request that returns a JSON object containing survey title, description, and an array of generated questions with appropriate types and options. Provide a button in the survey editor to populate the builder directly with the generated structure. Handle API token limits, stream responses gracefully, and sanitize the resulting JSON before inserting into the database.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Respondent Experience & Logic Engine

   Create the public respondent-facing survey view with dynamic conditional branching and answer submission handling.

   Build the public survey response page at `/s/[surveyId]`. Fetch published survey questions and evaluate skip logic in real time as the respondent progresses through the survey. Implement single-question-per-page or full-scroll views based on survey settings. Validate required fields, capture anonymous respondent metadata (user agent, timestamp), and securely store submitted answers in the responses and answers tables via a server action. Show a clean custom thank-you screen upon successful submission and handle edge cases where surveys are closed or deleted.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Results Dashboard & AI Analysis

   Develop the survey results analytics view with response metrics, visual charts, and AI-powered open-text thematic summarization.

   Build the survey results analysis dashboard at `/surveys/[id]/results`. Display summary metrics including total responses, completion rate, and average time. Render interactive charts (bar charts, pie charts) for closed-ended questions using a lightweight chart library. For open-ended text questions, add an 'AI Summary' feature that calls Claude to cluster responses into key themes, sentiment breakdowns, and actionable takeaways. Include a table view of individual responses with CSV export functionality.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for SurveyMonkey