How to vibe codeSavio

Prerequisites

• Node.jsfree

  Required runtime for executing the Next.js full-stack application and package manager.

• GitHubfree

  Source code repository and deployment pipeline integration with Vercel.

• CursorFree tier / $20/mo Pro

  AI-native code editor used to scaffold and iterate on the Next.js application codebase.

AI coding tools

• Cursor

  Essential for rapid full-stack iteration, database schema management, and UI component styling.

• Claude Code

  Useful in the terminal for executing complex multi-file refactors and generating database migration scripts.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js application with Tailwind CSS, shadcn/ui, and set up the Neon Postgres database schema for accounts, customers, feedback verbatims, feature requests, and roadmaps.

   Scaffold a new Next.js 16 application using App Router, TypeScript, Tailwind CSS, and standard directory structure. Configure Drizzle ORM to connect with Neon Postgres. Create the initial database schema supporting the following tables: 'accounts' (id, name, mrr, plan_tier, lifecycle_stage), 'feedback_items' (id, account_id, verbatim_text, source, author_email, created_at), 'feature_requests' (id, title, description, status, product_area, created_at), 'feedback_mappings' (id, feedback_id, feature_request_id), and 'roadmaps' (id, title, description, feature_id, target_quarter). Ensure proper foreign key constraints, indexes on account MRR and feature request statuses, and run initial migrations.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication & Team User Roles

   Implement authentication using better-auth with support for multi-tenant workspace roles (Admin, Manager, Contributor, Viewer).

   Install and configure better-auth in the Next.js application with email/password authentication backed by the Neon Postgres database. Implement user roles ('owner', 'admin', 'manager', 'contributor', 'viewer') following Savio's permission model where managers and admins have write access while contributors and viewers have scoped view/logging permissions. Build a clean login and signup page layout using Tailwind CSS and shadcn/ui components.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Feedback Inbox & Ingestion API

   Build the Feedback Inbox interface and an inbound webhook/API endpoint to ingest customer feedback verbatims and associate them with customer accounts.

   Create a secure API endpoint (/api/v1/feedback) that accepts incoming JSON payloads containing customer feedback verbatims, account telemetry (MRR, plan tier, account name), and source metadata. Automatically match or create account records in the database and insert the feedback into an unassigned 'Feedback Inbox' queue. Build a React dashboard page displaying the Feedback Inbox with filtering by source and date, allowing users to select individual verbatims and assign them to existing Feature Requests or create new ones on the fly.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Feature Request Prioritization & Segmentation Dashboard

   Develop the core prioritization engine and UI allowing product managers to sort and filter feature requests by aggregated customer MRR, plan tier, and request count.

   Build the Feature Request prioritization dashboard page in Next.js. Create a server-side query and UI table that aggregates feature requests, showing total linked feedback count, total unique accounts, and cumulative MRR from associated accounts. Implement multi-dimensional filtering controls in the sidebar allowing users to filter feature requests by plan tier (e.g., Enterprise, Pro, SMB), customer lifecycle stage (Active, Churned, Prospect), and minimum account MRR threshold. Ensure responsive table sorting by MRR and request volume.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Roadmap Builder & Voting Board

   Implement the internal product roadmap view and a customer-facing public voting board with status tracking.

   Build a kanban-style Product Roadmap view where feature requests can be dragged or assigned to status columns ('Backlog', 'Planned', 'In Progress', 'Shipped'). Create a public voting board page (/board) where external users or internal colleagues can view public feature requests, vote on them, and submit new feedback verbatims directly. Add a toggle in the admin settings to hide vote counts or display features in alphabetical order to avoid popularity bias.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Close-the-Loop Email Broadcasting & Polish

   Integrate Resend to allow product managers to broadcast personalized 'feature shipped' notification emails to all customers who requested a specific feature.

   Integrate Resend SDK into the Next.js backend. Create a 'Close the Loop' feature action on shipped feature requests that compiles a list of unique requester emails from all linked feedback items. Build an email composition modal allowing product managers to write a personalized update message, preview recipient counts, and dispatch batch notification emails asynchronously via server actions with error handling and delivery status logging.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Savio