Feedback Board with Voting and a Public Roadmap
Let users post ideas, upvote once each and comment, while you set statuses that feed a public roadmap. Next.js + Supabase with RLS.
Use it with Claude or any AI tool. Copy the prompt and paste it in. The link inside gives the AI the whole page as Markdown.
Overview
The tool every product team ends up paying for: a place where users suggest ideas, vote on what matters and see what you are working on. This plan builds your own, with the important rules enforced in the database: one vote per person, only admins change status, and nobody can fake a vote count.
Ready-made SQL is included, so the security model is right from the first step.
Before you start: Node.js 20+, a free Supabase project and Claude Code or Cursor. About 2.5 hours.
Build it step by step
Sign in to tick steps off-
1
Start from the official starter
Create a free Supabase project first. Then run:
npx create-next-app -e with-supabase feedback-board
cd feedback-boardCopy .env.example to .env.local with your project URL and anon key, then npm run dev. Save CLAUDE.md in the root.
Read CLAUDE.md and the starter README. In 5 bullets, explain where the Supabase clients live and how the session is refreshed. Do not change files yet.
Done when You can sign up and sign in at localhost:3000.
-
2
Create the database
Paste supabase-schema.sql into Supabase SQL Editor and run it. Sign up once in the app, then run the commented line at the bottom with your email to make yourself admin.
Save the schema as supabase/schema.sql. Generate TypeScript types into lib/database.types.ts and use them in the Supabase clients. Then explain in plain words what each RLS policy allows, table by table.
Done when Four tables and the idea_scores view exist with RLS on, and npm run build passes.
-
3
Board: list and sort ideas
The home page is the board. Read from idea_scores so vote counts always come from the database.
Build / as the board: tabs Top (most votes), New (newest) and a status filter. Each card shows title, first line of body, status badge, vote count and comment count. Server-render the list from idea_scores. Add simple pagination (20 per page).
Done when Seeded ideas appear sorted correctly in Top and New.
-
4
Post an idea
Signed-in users can post. New ideas always start as Under review (the database policy enforces it).
Add a "Suggest an idea" dialog (shadcn/ui) for signed-in users: title (5 to 120 chars) and details. Save with a Server Action, then go to the new idea page. Signed-out users see "Sign in to post" instead. Before saving, search existing titles and show up to 3 similar ideas with a "Vote on this instead" link.
Done when Posting works, and typing a title like an existing one shows the similar ideas.
-
5
Voting with optimistic UI
One vote per user is guaranteed by the primary key. The UI just has to feel instant and recover if the server says no.
Add a vote button on cards and the idea page: toggles insert/delete on votes for the current user. Update the count optimistically, roll back on error, and show "Sign in to vote" for signed-out users. Make sure a double click cannot create two requests.
Done when Voting feels instant; trying to insert a second vote for the same idea via the API fails.
-
6
Idea page and comments
Each idea gets its own page with the full text, votes and a simple comment thread.
Build /ideas/[id]: title, status, author, date, full body, vote button and comments (oldest first). Signed-in users can comment and delete their own comments; admins can delete any. Show relative times like "3 days ago".
Done when You can comment, and a second account cannot delete your comment.
-
7
Admin: statuses and the public roadmap
Admins move ideas through statuses. The roadmap shows that progress to everyone.
For admins only, add a status select on the idea page (Server Action, check is_admin on the server too). Build /roadmap: three columns Planned, In progress and Done, each listing ideas with vote counts, newest status changes first.
Done when Changing an idea to Planned moves it onto the roadmap; a non-admin cannot change status even with a direct API call.
-
8
Security check and deploy
Prove the rules with two normal accounts and one admin, then deploy to Vercel.
Write a test checklist and walk me through it: user A cannot vote twice, cannot set a status, cannot delete B's idea or comment, cannot make themselves admin by updating profiles; signed-out users can read but not write. Then list the env vars for Vercel and the Supabase Auth URL settings for production.
Done when Every check passes and the board runs on your Vercel URL.
Files and links
-
-
Next.js + Supabase starter (opens in a new tab) vercel/next.js › examples/with-supabase Official starter with cookie-based auth.
-
Supabase Row Level Security guide (opens in a new tab) supabase.com Read once: it is what keeps votes honest.
What people built
Show yoursNobody has shared a build yet. Yours could be the first.
Show what you built
Built this plan? Sign in to share your demo video, live app and screenshots.