# 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. - Kind: Plan - Page: https://ownlyplans.com/bhaskar/feedback-board-with-voting/ - Licence: CC BY 4.0 (reuse with credit) ## Steps ### 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-board Copy .env.example to .env.local with your project URL and anon key, then npm run dev. Save CLAUDE.md in the root. Uses: CLAUDE.md, Next.js + Supabase starter Prompt: ```text 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. Uses: supabase-schema.sql, Supabase Row Level Security guide Prompt: ```text 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. Prompt: ```text 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). Prompt: ```text 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. Prompt: ```text 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. Prompt: ```text 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. Uses: Supabase Row Level Security guide Prompt: ```text 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. Uses: Supabase Row Level Security guide Prompt: ```text 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 - CLAUDE.md: https://ownlyplans.com/bhaskar/feedback-board-with-voting/claude/ (Project root. Cursor users: save as AGENTS.md.) - supabase-schema.sql: https://ownlyplans.com/bhaskar/feedback-board-with-voting/supabase-schema/ (Tables, vote view, triggers and RLS policies. Save as supabase/schema.sql.) - Next.js + Supabase starter: https://github.com/vercel/next.js/tree/canary/examples/with-supabase (Official starter with cookie-based auth.) - Supabase Row Level Security guide: https://supabase.com/docs/guides/database/postgres/row-level-security (Read once: it is what keeps votes honest.) ## About 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. --- Also available as JSON: https://ownlyplans.com/bhaskar/feedback-board-with-voting/?format=json MCP server: https://ownlyplans.com/mcp