How to vibe codeCanny

Prerequisites

• Node.js LTSfree

  Runtime environment for Next.js and backend TypeScript execution.

• GitHubfree

  Source code repository and CI/CD deployment connection to Vercel.

• Supabase Accountfree

  Hosted Postgres database with vector capabilities for AI embeddings and built-in auth.

AI coding tools

• Claude Code

  Handles end-to-end scaffolding, database schema migrations, and complex server action logic efficiently.

• Cursor

  Ideal for rapid iterative UI styling of boards, roadmaps, and changelog components with live file diff views.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize a Next.js project with Tailwind CSS and configure the Supabase database schema for organizations, users, feedback boards, posts, votes, comments, and AI ingestion logs.

   Scaffold a new Next.js 16 application with TypeScript, Tailwind CSS, and App Router. Set up a Supabase client connection using environment variables for NEXT_PUBLIC_SUPABASE_URL and SUPABASE_SERVICE_ROLE_KEY. Write a SQL migration script via Supabase client or raw SQL to create tables: `organizations`, `users` (linked to orgs with role flags), `boards` (id, title, url, is_private, org_id), `posts` (id, board_id, title, description, status, author_id, arr_impact, created_at), `votes` (id, post_id, user_id, created_at), `comments` (id, post_id, user_id, body, is_internal, created_at), and `changelog_entries` (id, org_id, title, body, published_at). Ensure proper foreign key constraints, indexes on board_id and post_id, and row-level security policies where applicable.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication & Multi-Tenancy

   Implement authentication using better-auth and establish organization multi-tenancy so users belong to isolated workspaces.

   Install and configure better-auth in the Next.js application to support email/password authentication and magic links backed by our Supabase PostgreSQL database. Create authentication middleware that protects dashboard routes (`/app/[orgSlug]/*`) and extracts the current user session and active organization. Build sign-in, sign-up, and workspace switcher UI components using Tailwind CSS and shadcn/ui primitives. Ensure unauthenticated users are redirected to login and users without an organization are prompted to create one during onboarding.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Public Feedback Boards & Voting Engine

   Build the public-facing feedback board interface where users can create posts, upvote ideas, leave internal or public comments, and filter by status.

   Build a public feedback board view at `/b/[boardSlug]` featuring a list of feedback posts sorted by vote count or ARR impact. Implement interactive upvoting with optimistic UI updates using Next.js Server Actions. Create a detailed post view modal or page showing the post description, author details, vote count, status badge, and a comment thread supporting both public customer comments and internal team-only notes. Add filter tabs for post status (Under Review, Planned, In Progress, Complete) and category tags.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04AI Autopilot Ingestion Pipeline

   Create an API endpoint and background ingestion service using the Anthropic API to parse unstructured text transcripts, detect feature requests, deduplicate against existing posts, and calculate ARR impact.

   Implement an AI Autopilot ingestion service in `/app/api/autopilot/ingest/route.ts` that accepts unstructured customer conversation text or support ticket transcripts along with account metadata (such as customer name and ARR value). Use the Anthropic API (Claude 3.5 Sonnet) with structured JSON output to analyze the text, extract distinct feature requests, determine sentiment and urgency, and match them against existing posts in the organization's boards to suggest deduplication or merging. Store the ingestion log and update corresponding post ARR impact sums automatically when new customer accounts are linked.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Product Roadmap & Prioritization Matrix

   Develop a Kanban and timeline roadmap view that categorizes posts by status and allows product teams to filter by cumulative ARR impact.

   Build a roadmap dashboard view at `/app/[orgSlug]/roadmap` featuring columns for each post status (Planned, In Progress, Complete). Fetch posts grouped by status and product area, displaying total cumulative ARR impact and vote counts on each card. Implement drag-and-drop or status-dropdown updates to move items across roadmap columns via Server Actions. Add filter controls for product areas, owner, and minimum ARR impact threshold so leadership can prioritize engineering work based on revenue data.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Changelog Publishing & Notifications

   Build a release notes and changelog manager that allows publishing updates with markdown support and dispatching email notifications via Resend.

   Create a changelog management module at `/app/[orgSlug]/changelog` allowing team members to author release notes with markdown formatting, custom labels, and scheduled publish dates. Build a public changelog view at `/changelog/[orgSlug]` and an embeddable widget component that can be injected into external web applications. Integrate the Resend API to automatically email subscribers and voters when a changelog entry linked to a completed feedback post is published.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

7. 07Model Context Protocol (MCP) Server

   Implement a Model Context Protocol (MCP) server endpoint that allows external AI tools like Claude, ChatGPT, and Cursor to query feedback boards, analyze themes, and update post statuses securely.

   Implement a Model Context Protocol (MCP) server handler using `@modelcontextprotocol/sdk` exposed via an API route or server-sent events endpoint in Next.js. Expose tools that allow authenticated LLM clients to query feedback posts, summarize customer comments, search themes by keyword, retrieve roadmap items with ARR weights, and update post statuses or add internal replies. Secure the MCP endpoints using OAuth token verification mapped to the user's Canny workspace permissions and log all actions in an audit trail table.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Canny