How to vibe codeSurvicate

Prerequisites

• Node.jsfree

  Required runtime for building and running the Next.js full-stack application.

• GitHubfree

  Version control and repository hosting for your codebase.

AI coding tools

• Claude Code

  Best-in-class terminal agent for scaffolding complex multi-file database schemas, API routes, and frontend survey widgets.

• Cursor

  Ideal for iterative refinement of React UI components, widget layouts, and Tailwind styling.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js application with TypeScript, Tailwind CSS, Shadcn/ui, and configure Neon Postgres with Drizzle ORM.

   Initialize a new Next.js 16 project with Tailwind CSS, TypeScript, and Shadcn/ui components. Set up Drizzle ORM connected to a Neon Postgres database using the @neondatabase/serverless driver. Define the initial database schema tables in TypeScript: 'surveys' (id, title, description, type, settings, created_at), 'questions' (id, survey_id, type, label, options, order), 'responses' (id, survey_id, respondent_id, metadata, completed_at, created_at), and 'answers' (id, response_id, question_id, value). Ensure all tables have proper foreign key constraints, indexes on survey_id, and UUID primary keys. Create a db connection helper file and write a basic migration script.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication & Workspace Management

   Implement user authentication using better-auth and establish multi-tenant workspace structures.

   Integrate better-auth into the Next.js project to support secure email/password and GitHub OAuth sign-in. Create corresponding database tables for users, sessions, and accounts. Build protected dashboard layout routes under /dashboard that require authentication. Add a workspace context switcher so users can organize surveys and feedback repositories into distinct projects. Implement middleware to redirect unauthenticated users away from private routes and ensure proper session validation on all API endpoints.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Visual Survey Builder & Management

   Build an intuitive survey creation interface supporting multiple question types, branch logic, and styling.

   Build a visual survey builder page at /dashboard/surveys/new. Allow users to add, reorder, and configure various question types including NPS, CSAT, rating scales, single select, and open text. Implement state management for survey configuration and branch logic rules. Create a backend API endpoint (POST /api/surveys) to save survey definitions, questions, and logic rules to Neon Postgres. Add a survey listing page with edit, toggle active status, and delete capabilities.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Embeddable Widget & Survey Renderer

   Develop a lightweight, vanilla JavaScript embed snippet and React runtime to render surveys as pop-ups or embedded widgets on external sites.

   Create a standalone survey runner component and compile it into a lightweight, self-contained JavaScript script bundle (widget.js) that can be embedded on external websites via a script tag. The script should read a survey ID from its attributes, fetch survey JSON from our backend API, inject an isolated Shadow DOM container into the host page to prevent CSS collisions, render the survey questions sequentially with smooth transitions, and submit responses back to a public POST /api/surveys/[id]/submit endpoint with CORS enabled. Handle thank-you screens and close interactions gracefully.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Research Hub & AI Sentiment Pipeline

   Build the centralized feedback repository and integrate OpenAI for automatic sentiment classification and topic clustering.

   Build a Research Hub dashboard page at /dashboard/hub that aggregates all text responses and uploaded feedback items into a searchable table. Integrate the OpenAI API using the Vercel AI SDK to automatically process new open-text responses upon submission: classify sentiment as positive, neutral, or negative, assign categorical topics, and generate text embeddings stored in a pgvector column. Build filtering controls on the dashboard to slice feedback by sentiment, score range, date, and assigned topic.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Conversational AI Research Assistant

   Implement a RAG-powered chat interface that queries the feedback repository and provides verifiable quote citations.

   Build a conversational 'Research Assistant' chat interface at /dashboard/assistant. Implement a backend RAG pipeline using Neon's pgvector extension to perform cosine similarity search over stored feedback embeddings given a user query. Use the Vercel AI SDK with Anthropic or OpenAI models to generate a synthesized answer citing exact verbatim quotes and respondent metadata. Enforce strict prompt instructions requiring the model to only use retrieved context and provide verifiable primary key citations back to source feedback records to prevent hallucinations.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

7. 07Analytics Dashboards & Webhooks

   Create metric visualizations for NPS/CSAT scores over time and outbound webhook triggers for external notifications.

   Build analytics dashboard widgets at /dashboard/analytics displaying key metrics including Net Promoter Score (NPS), Customer Satisfaction (CSAT) averages, response volume trends over time, and sentiment breakdown charts using Recharts. Implement an outbound webhook engine: when a new survey response is submitted, queue a background HTTP POST request delivering the payload to configured webhook URLs (e.g. Slack or custom endpoints) with signature verification headers.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Survicate