CFL Wiki

~3 min read Jan 24, 2026

CFL Task Dashboard

Volunteer task management system for Chico Fab Lab. Real-time task board with Discord auth, volunteer tracking, and public TV display.

Features

  • Real-time task board with PocketBase subscriptions
  • Discord OAuth authentication
  • Public TV display mode (kiosk)
  • Volunteer hours and completion tracking
  • Community project showcase
  • Learning goals and certifications
  • QR code task completion

Tech Stack

  • Next.js 15.5.7, React 19, Tailwind CSS 4
  • PocketBase (SQLite + REST API)
  • Discord OAuth (NextAuth)
  • Real-time updates via WebSocket

Quick Start

1. Install

npm install

2. PocketBase Setup

Download from https://pocketbase.io/docs/ and place binary in this directory.

chmod +x pocketbase
./pocketbase serve --http=127.0.0.1:8090

Create collections using pb_schema.json (import via Admin UI at http://127.0.0.1:8090/_/)

3. Environment Variables

Create .env.local:

# PocketBase
NEXT_PUBLIC_POCKETBASE_URL=http://127.0.0.1:8090
[email protected]
POCKETBASE_ADMIN_PASSWORD=yourpassword

# Discord OAuth (https://discord.com/developers/applications)
DISCORD_CLIENT_ID=your_client_id
DISCORD_CLIENT_SECRET=your_secret
DISCORD_GUILD_ID=your_server_id

# Discord Bot
DISCORD_BOT_TOKEN=your_bot_token
DISCORD_ANNOUNCEMENTS_CHANNEL_ID=your_channel_id

# NextAuth
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=random_string_here

# App
NEXT_PUBLIC_BASE_URL=http://localhost:3000

# Optional: Invite code for registration (leave empty to disable)
# NEXT_PUBLIC_INVITE_CODE=your_invite_code

4. Run

npm run dev

Open http://localhost:3000

Key Routes

Route Description Auth
/ Home page No
/display TV kiosk display No
/volunteer/tasks Task dashboard Yes
/task/create Create task Yes
/claim Quick complete (QR) No
/creations Project gallery No
/admin Admin panel Yes

Database

Collections: (see pb_schema.json)

  • volunteers - User accounts
  • tasks - Task management
  • completions - Completion tracking
  • creations - Project showcase
  • goals - Learning paths
  • goal_progress - User progress

Discord Setup

  1. Create app at https://discord.com/developers/applications
  2. OAuth2 redirect: http://localhost:3000/api/auth/discord/callback
  3. Create bot, invite to server
  4. Bot permissions: Send Messages, Read Messages

Production

npm run build
npm start

Update .env.local with production URLs.

File Structure

├── src/
│   ├── app/           # Pages & API routes
│   ├── components/    # React components
│   └── lib/           # Utilities & PocketBase
├── public/            # Static assets & PDFs
├── pb_schema.json     # Database schema
└── README.md          # This file

Troubleshooting

PocketBase not connecting:

curl http://localhost:8090/api/health

Discord auth fails:

  • Check redirect URI matches exactly
  • Verify client ID/secret in .env.local
  • Clear browser cookies

Real-time updates not working:

  • Check WebSocket connection in browser DevTools
  • Verify PocketBase is running
  • Check firewall settings

Repository

https://github.com/ChicoFabLab/tasksdashboard

License

MIT