CFL Wiki

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

Create app at https://discord.com/developers/applications
OAuth2 redirect: http://localhost:3000/api/auth/discord/callback
Create bot, invite to server
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