The Story Behind The Quad
### The Problem We Lived
We've all been there. It's Week 3 of a new semester, you tell yourself "this is the year I actually get involved" — and then you open the UVic clubs page, stare at a wall of logos and PDF links, and close the tab.
It's not that students don't want to volunteer. It's that the discovery process is exhausting. You don't know who to email, what the commitment actually looks like, or whether your skills even fit. So most students do nothing — and graduate wishing they had done more.
We wanted to fix that. Not with another spreadsheet or portal. With something that actually felt worth opening.
### The Idea
We asked: what if finding a volunteer role felt like exploring a world, not filling out a form?
That's how The Quad was born — a retro pixel-art campus you can walk through. Five real UVic organizations. Five buildings you can enter. Each one has a coordinator you can actually talk to, a bulletin board of open roles, and a calendar of upcoming events.
The game wraps everything a student needs — discovery, conversation, and application — into one seamless experience that takes less than 5 minutes from start to submission.
### How AI Makes It Real
The Quad isn't just a game skin on top of a static list. Claude powers three layers of intelligence:
Role Matching — The moment you save your profile, the system reads your interests, availability, and goals and ranks every volunteer position across all five orgs. You don't hunt for the right role. It finds you.
Coordinator Conversations — Each AI coordinator knows their organization's personality. Alex at EngSoc is excitable and technical. Maya at the Food Bank is warm and community-focused. River at Sustainability is driven by climate urgency. You're not chatting with a generic bot — you're talking to someone who actually sounds like they work there.
Cover Letters on Demand — When you hit Apply, Claude writes a genuine, specific, 3-sentence application from your profile. You read it, edit it if you want, and send it. The coordinator gets a real email with your letter attached.
### What We Built
We built the entire game in a single React component on a raw HTML5 Canvas — no game engine, no physics library, just pixels and math. Every building has a hand-drawn silhouette. Every path is hand-tiled cobblestone. Every sound effect is synthesized in real-time with the Web Audio API — no audio files, no external assets.
On the backend, three Claude API endpoints handle matching, cover letter generation, and coordinator chat — all streamed, all fast, all running on Haiku for low latency.
We also built a points system, a live leaderboard, email delivery via Resend, and a full profile system — all persisted in localStorage with graceful fallbacks.
### The Moment It Clicked
We knew we had something when we ran the matching for the first time. We typed in "I love music and I have 2 hours a week" — and CFUV Radio's Radio Host position came back as the #1 match, with the reason: "Perfect fit for your musical passion and minimal time commitment."
That's not a search algorithm. That's a recommendation that understands you.
### Who It's For
Every UVic student who ever meant to get involved but didn't know where to start. The ones who would have thrived as a Garden Steward or a Radio Host or a Robotics Strategist — if only someone had pointed them in the right direction.
The Quad gives them that nudge. Wrapped in nostalgia, powered by AI, and built with the belief that the right opportunity, presented the right way, can genuinely change someone's university experience.
Log in or sign up for Devpost to join the conversation.