MyCampusQuest, a Next.js treasure hunt PWA

MyCampusQuest is a treasure hunt PWA that turns exploring a campus into a game: quests are tied to places, and students complete them by scanning the QR code posted on site. The project was built during a course module on Progressive Web Apps.

The app therefore had to behave like an installed mobile app while remaining a Next.js site deployed on Vercel.

A treasure hunt means moving around, often through corridors or buildings with poor reception. Completing a quest could not depend on the connection.

Cheating also had to be prevented: a quest only counts if you are actually near the spot, and the same quest cannot be counted twice.

I set the app up as a PWA and wired QR code scanning to the phone’s rear camera. On each scan, the user’s position is compared with the quest’s using geolib, within a one-kilometre radius, then progress is saved to MongoDB. Authentication is handled by Clerk.

Offline, completions are cached with localForage and synced as soon as the connection returns; the location check is skipped in that case. I also added push notifications (including on Safari), a dark mode and a contact form.