Campus Quest

Before you start
Quests
Pop up
Complete one quest
Conplete all

InspirationInspiration

How many times have you wandered across campus and wondered, “Where am I supposed to go next?” Orientation can feel like information overload: maps, pamphlets, club stalls — all useful, but passive. Students leave their first week with bits of knowledge but few memorable connections to place or people. At the same time, apps are great at capturing attention, but they too often promote habits that don’t actually help us thrive. We wanted to flip that script: take students’ natural curiosity, add a little playful motivation, and turn campus discovery into something genuinely useful and enjoyable.

CampusQuest was born to answer a simple question: how do we make learning a campus intuitive, social, and rewarding — not boring or brittle?

What it does

CampusQuest transforms campus orientation into a short, satisfying game loop: Explore → Scan → Reward → Progress. A student opens the app, picks an on-campus quest, visits the location, and scans a QR code to complete the quest. Completing quests grants XP, collectible puzzle pieces that slowly reveal a campus illustration, and animated reward popups that make progress feel tangible.

We designed quests around real campus landmarks — for example Baillieu Library, Arts West, Old Quadrangle, Student Pavilion, South Lawn and MSD Building. Each location ties a small narrative or tip to the quest so students learn why a place matters, not just where it is.

For quick testing and printing, we suggest generating QR codes via QRCode-Monkey. The project code lives on GitHub and the live demo is hosted on Vercel.

How we built it

We kept the stack lightweight so iteration was fast: React + Vite, html5-qrcode for scanning, and localStorage for simple persistence. Custom CSS animations make the reward moments feel satisfying without heavy asset costs. Key parts of the workflow were: building a reliable scanner flow, creating an easy manual code-entry fallback (so demos and testing don’t rely on perfect lighting), and designing the small collectible puzzle system that visually represents progress.

On the engineering side we focused on modularity: a quest service, a scan/verification flow, a reward/XP manager, and a UI layer that’s optimized for both mobile and desktop. That allowed frontend polish to proceed in parallel with logic and state work.

Challenges we ran into

Integration was the top pain point. The app uses several small libraries and browser APIs that behave differently across devices, so getting QR scanning to be robust required edge-case handling (camera permissions, autofocus failures, and fallback to manual entry). Local state synchronization was another issue: because the app is client-side-first, we had to carefully design how quest completion, puzzle progress, and XP persist across sessions without a server.

We also discovered that a demo-ready experience needs preloaded states. Trying to complete multiple QR scans live during a short video is brittle, so we created “before/after” states and a manual test flow to showcase the loop reliably.

Accomplishments we’re proud of

Delightful reward UX. The animated reward popup, floating XP numbers, and puzzle-piece reveal are small touches that make each success feel earned.

Reliable demo flow. The manual-code entry and preloaded demo states let us show the whole user journey in a short video without depending on perfect camera conditions.

Polished visuals and motion. Smooth custom CSS animations and micro-interactions make the app feel cohesive and intentional.

Real-world-ready structure. The simple QR-per-quest model makes it easy for any campus admin to add quests and print codes; the app doesn’t require complex backend setup to start running orientation activities.

What we learned

Working fast meant learning to break the project into independently deliverable slices. Parallelized tasks (UI, scanning logic, demo scripting) kept momentum high. We also learned the value of demo-first engineering: design the experience you want to show, then build the minimum to deliver it reliably. Finally, small UX details — sound cues, animation timing, and a clear success state — matter more than extra features when you want users (and judges) to feel that something “works.”

What’s next

We see several natural extensions: a dedicated mobile app (native camera + push notifications) to allow timed or location-based nudges; an admin dashboard so student services or clubs can add quests and track engagement; richer social features (teams, leaderboards, event-driven scavenger hunts); and analytics to measure which quests help students learn the most. We also want to enable richer content on each quest (short historical notes, micro-challenges, or AR overlays) and to make printing and deploying QR campaigns even easier for campus staff.

Try it out

If you want to play with the demo, check out the live site on our deployment platform and the source on our code repo — everything is in the repo and ready to run locally for testing.