FeedbackFlow

Collect, prioritize, and ship product feedback. A minimalist open-source alternative to Canny / Frill.

Live demo · Public board · Roadmap

Demo account: demo@feedbackflow.app (magic link, no password)

---

Features

• Public feedback board — share a link, collect ideas
• One-click upvote with optimistic UI (useOptimistic)
• Comments on each post
• Status workflow: Open → Planned → In Progress → Done / Rejected
• Public roadmap auto-generated from post statuses
• Admin dashboard with stats, top posts, status breakdown
• Auth: GitHub OAuth + magic link (Resend)
• SEO: dynamic OG images per board, sitemap, robots
• Privacy toggle to switch a board to private
• TypeScript strict + Zod validation everywhere
• Server Actions (no REST API to maintain)

Stack

Layer	Choice
Framework	Next.js 16 (App Router, RSC)
Language	TypeScript (strict, noUncheckedIndex)
Auth	Auth.js v5 (GitHub + Resend)
Database	PostgreSQL on Neon (serverless)
ORM	Prisma
Validation	Zod
Styling	Tailwind v4 + shadcn/ui
Email	Resend
Deployment	Vercel
Testing	Vitest + Playwright
CI	GitHub Actions

Screenshots

Public board	Roadmap

Admin dashboard	Post detail

Architecture

src/
├── app/                  # App Router (routes, layouts, loading, error, OG)
│   ├── (auth)/           # public auth pages
│   ├── (dashboard)/      # protected admin pages
│   ├── (marketing)/      # landing
│   └── b/[slug]/         # public board + roadmap + post detail
├── components/
│   ├── ui/               # shadcn primitives
│   ├── posts/ board/     # domain components
├── lib/
│   ├── auth.ts           # Auth.js config
│   ├── db.ts             # Prisma singleton
│   └── validators/       # shared Zod schemas
└── server/
├── actions/          # Server Actions (mutations)
└── queries/          # Read functions for Server Components

Key decisions — see docs/decisions.md for the full log.

• Server Actions over REST: types end-to-end, less boilerplate, fewer files
• JWT sessions: required for Auth.js middleware on the Edge runtime
• Prisma over Drizzle: better interview signal, mature DX
• No global client store: RSC + Server Actions remove the need

Getting started

Prerequisites: Node 20+, npm, a free Neon database, a free Resend account, and a GitHub OAuth app.

git clone https://github.com/Yentec/FeedbackFlow.git
cd feedbackflow
npm install
cp .env.example .env.local
# fill in DATABASE_URL, AUTH_SECRET, AUTH_GITHUB_*, AUTH_RESEND_KEY, EMAIL_FROM, CRON_SECRET

npm run db:migrate
npm run db:seed
# Demo account: demo@feedbackflow.app
npm run dev

Then visit http://localhost:3000 and http://localhost:3000/b/demo.

Generate AUTH_SECRET & CRON_SECRET

openssl rand -base64 32

Scripts

npm run dev          # dev server
npm run build        # production build
npm run lint         # ESLint
npm run typecheck    # tsc --noEmit
npm test             # Vitest
npm run db:migrate   # apply migrations
npm run db:seed      # seed the demo board
npm run db:studio    # browse the DB

Testing

# Unit tests (Vitest) — Server Actions, validators
npm test

# E2E tests (Playwright) — full user flows
npm run e2e:db:up        # start Postgres in Docker
npm run e2e:db:reset     # apply migrations
npm run test:e2e         # run Chromium against a fresh build
npm run test:e2e:ui      # interactive mode

The e2e suite covers:

• Happy path: sign in → create post → vote → comment
• Authorization: guests redirected, private boards return 404
• Admin actions: status changes, post deletion, propagation to public board and roadmap

Both suites run on every PR in CI.

Deploy

One-click deploy on Vercel:

You will need to set all environment variables from .env.example in the Vercel project.

Roadmap

Out of scope for this MVP, but tracked as issues:

• Stripe billing
• Multi-user teams per board
• Slack / Discord webhooks on new post
• Email digests
• i18n (FR / EN)
• Full-text search

License

MIT — see LICENSE.