Soapbox

An open-source Canny-style feedback board backed by this repository's GitHub Discussions. The app is a Vite + React + Tailwind frontend with Cloudflare Pages Functions for GitHub OAuth and GraphQL API calls.

Features

• Public feedback board sourced from a GitHub Discussions category
• GitHub OAuth sign-in
• Create ideas as GitHub Discussions
• Upvote and remove upvotes
• Comment on ideas
• Filter by product status labels
• Sort by top voted, newest, and recently updated

GitHub Setup

1. Enable GitHub Discussions for the repository.
2. Create a discussion category named Ideas, or set GITHUB_DISCUSSION_CATEGORY to another category name.
3. Add these labels for status tracking:
   • status:under-review
   • status:planned
   • status:in-progress
   • status:shipped
   • status:closed
4. Create a GitHub OAuth app:
   • Homepage URL: your Cloudflare Pages URL
   • Authorization callback URL: https://your-domain.com/api/auth/callback
5. Create a fine-grained or classic token for public browsing and set it as GITHUB_TOKEN. GitHub's GraphQL API requires authentication even for public repository data.

For private repositories, use broader token/OAuth scopes as required by GitHub.

Local Development

npm install
cp .env.example .env
npm run dev

Vite serves the frontend. For full Pages Functions testing, build once and run Wrangler Pages locally:

npm run build
npm run dev:pages

Environment Variables

GITHUB_OWNER=your-org-or-user
GITHUB_REPO=your-repo
GITHUB_DISCUSSION_CATEGORY=Ideas
GITHUB_CLIENT_ID=your-oauth-app-client-id
GITHUB_CLIENT_SECRET=your-oauth-app-client-secret
GITHUB_TOKEN=your-read-token-for-public-browsing
SESSION_SECRET=replace-with-random-32-byte-secret
PUBLIC_APP_NAME=Soapbox

Set GITHUB_CLIENT_SECRET, GITHUB_TOKEN, and SESSION_SECRET as Cloudflare secrets.

npx wrangler pages secret put GITHUB_CLIENT_SECRET
npx wrangler pages secret put GITHUB_TOKEN
npx wrangler pages secret put SESSION_SECRET

Deploy

Confirm Cloudflare auth:

npx wrangler whoami

Deploy:

npm run deploy

Scripts

• npm run dev - Vite dev server
• npm run build - typecheck and build frontend
• npm run test - Vitest tests
• npm run dev:pages - local Cloudflare Pages preview after a build
• npm run deploy - build and deploy dist to Cloudflare Pages