How to vibe codeSurveySparrow

Prerequisites

• Node.jsfree

  Required runtime for running the Next.js development server and build tools.

• GitHubfree

  Source control and deployment pipeline integration.

• Anthropic API Keypay-as-you-go

  Powers the conversational survey follow-ups and sentiment categorization.

AI coding tools

• Claude Code

  Best-in-class agentic coding tool for scaffolding full-stack features and debugging complex React state engines.

• Cursor

  Ideal for fine-tuning the conversational survey UI and responsive CSS styles.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js project with Tailwind CSS, configure Neon PostgreSQL via Drizzle ORM, and set up better-auth for single-user authentication.

   Scramble a new Next.js project using the App Router, TypeScript, and Tailwind CSS. Integrate Drizzle ORM configured for Neon PostgreSQL. Create database tables for users, surveys, questions, options, responses, and answer_items. Surveys should have a type field ('chat' or 'classic'), title, and status. Questions should support types like 'text', 'rating', 'multiple_choice', and store configuration JSON. Responses should link to a survey and contain respondent metadata and completion status. Set up better-auth for secure user login. Ensure all schema definitions are fully typed with TypeScript and include migration scripts.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Survey Builder Interface

   Build the dashboard and visual survey builder where creators can add, reorder, and configure survey questions with conditional branching rules.

   Build a dashboard page in Next.js displaying a list of user surveys with metrics (total responses, completion rate) and a button to create a new survey. Create a survey editor view with a sidebar to add questions of different types (Rating, Text, Multiple Choice). Implement drag-and-drop or up/down reordering for questions. For each question, allow setting a title, description, and mandatory flag. Add a conditional logic tab where creators can specify jump rules (e.g., if answer equals X, skip to question Y). Save survey definitions via server actions into the database.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Conversational & Classic Survey Renderer

   Implement the public respondent-facing survey runner that supports both chat-like single-question transitions and classic long-form layouts.

   Create a public survey-taking route at `/s/[surveyId]` that fetches the survey definition. Build a responsive survey runner component supporting two display modes based on survey settings: 'Classic' (all questions on one scrollable page) and 'Conversational' (one question at a time with smooth chat bubble slide-in transitions and automatic focus). Implement client-side skip logic and conditional branch evaluation. When the user progresses, store intermediate partial responses in local state and submit the final payload via an API endpoint upon completion, displaying a customized thank-you screen.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04AI Conversational Follow-Up ('Echo AI')

   Integrate the Vercel AI SDK and Anthropic API to dynamically evaluate text answers and trigger intelligent conversational follow-up questions in chat mode.

   Integrate the Vercel AI SDK and Anthropic API into the conversational survey runner. When a respondent submits a free-text answer on a designated 'Echo AI'-enabled question, send the question and answer context to a server action that invokes Claude Sonnet to evaluate if clarification is needed. If the AI determines a follow-up is warranted, dynamically insert a temporary clarifying prompt into the chat thread before moving to the next question. Store both the initial answer and the AI-prompted clarification in the answer_items table.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Analytics Dashboard & Text Sentiment Tagging

   Build the response analytics view featuring automated sentiment extraction for open-ended text responses and summary metrics.

   Build an analytics dashboard route at `/dashboard/surveys/[id]/analytics`. Display summary cards for total responses, average completion time, and average rating scores. Add a responses tab showing a table of individual submissions. For open-ended text responses, implement a background processing job using Anthropic API to automatically tag each response with sentiment ('Positive', 'Neutral', 'Negative') and extract key topic keywords. Render these aggregated insights using simple charts or summary breakdown lists.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Multi-Channel Distribution (Email & SMS)

   Implement automated survey distribution triggers via Resend for email and Twilio for SMS broadcasting.

   Create a distribution tab in the survey dashboard allowing users to input contact lists (emails and phone numbers). Implement backend server actions using Resend to dispatch email survey invitations containing unique respondent tokens, and Twilio REST API to send SMS survey links. Build webhook handler endpoints for Resend and Twilio to track delivery statuses, bounces, and click events, updating the contact engagement status in the database accordingly.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for SurveySparrow