How to vibe codeUserVoice

Prerequisites

• Node.jsfree

  Runtime environment for Next.js full-stack development

• GitHubfree

  Code repository and deployment source control

• 

  OpenAI API accountpay-as-you-go (~$5/mo)

  Required for automated AI theme clustering and idea summarization

AI coding tools

• Claude Code

  Autonomous multi-file scaffolding and complete feature builds from the terminal

• Cursor

  IDE-based iterative component design and refactoring

Build guide

1. 01Project Scaffolding and Database Schema

   Initialize the Next.js project with Tailwind CSS, configure Neon PostgreSQL via Drizzle or Prisma, and set up better-auth for workspace access.

   Scaffold a new Next.js 16 project with Tailwind CSS and TypeScript. Set up a Neon PostgreSQL connection using Drizzle ORM. Create database schemas for users, accounts (with ARR fields), feedback_items (title, description, status, votes count, customer_id, category, ai_theme), and signals (source type like support ticket or sales call, raw text, mapped account_id). Configure better-auth for email/password authentication securing the internal dashboard while leaving the public portal accessible.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Public Feedback Portal and Widget

   Build the public-facing feedback submission board with upvoting, categorization, and a script-embeddable feedback widget.

   Build a public feedback portal page in Next.js with a list of feedback items, search input, category filters, and sorting by upvotes or revenue impact. Add a modal for submitting new feedback with title, description, and user email. Create an embeddable widget script (/widget.js) that injects a trigger button on external pages, opening a lightweight iframe or shadow-DOM form to capture feedback and post it back to the API.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03AI Theme Detection and Summarization Engine

   Implement a background service using the OpenAI API to cluster incoming feedback descriptions into thematic buckets.

   Create a backend utility that runs via cron or on feedback batch insert, calling the OpenAI API with structured JSON output mode. Pass recent feedback items and support signal blobs to extract overarching themes, assign tags, generate a concise 1-sentence summary, and calculate urgency scores. Store the generated themes back in the database and link related feedback items to their respective theme IDs.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Revenue-Weighting and CRM Account Mapping

   Develop the data enrichment layer linking customer accounts and their respective ARR to prioritize feedback items by business value.

   Build an admin dashboard view in Next.js that displays feedback items ranked not just by vote count, but by 'Revenue Weighting' (sum of ARR from accounts linked to that feedback or related themes). Create a CRM accounts management table where admins can manually add or import accounts with name, domain, and ARR value, and associate feedback submissions to specific accounts.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Signal Ingestion API and Webhook Receivers

   Build API endpoints to ingest external signals (support tickets, notes) and enrich them with account metadata.

   Implement secure API endpoints (/api/v1/signals) that accept incoming JSON payloads representing support tickets or sales call notes from external services like Zendesk or custom webhooks. The endpoint must parse the text, match the customer email to an existing CRM account, store the raw signal, and trigger an asynchronous AI analysis job to surface potential feature requests or churn risks.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Stakeholder Prioritization Dashboard and Polish

   Finalize the internal prioritization view for product managers and customer success teams with filters, status updates, and customer loop closing.

   Build a polished internal prioritization dashboard with multi-column kanban or list views categorized by AI themes. Add filters for account ARR tiers, churn risk indicators, and feedback status (Under Review, Planned, Completed, Declined). Implement a status update action that allows PMs to send closure notifications to users who submitted feedback via Resend email templates.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for UserVoice