XHUNT — TEDxCUSAT 2025

Location-based AR Mystery Game that turned the CUSAT campus into a live crime scene

Tech Stack

Next.js

TypeScript

Tailwind CSS

Supabase

FastAPI

Python

Framer MotionLeaflet.jsA-FrameAR.jsNodemailer

Key Highlights

• Built GPS-anchored AR that runs entirely in a mobile browser. AR.js places 3D GLB models at real campus GPS coordinates using gps-new-entity-place, with no native app required. Handled iOS camera permission quirks and A-Frame SSR conflicts via dynamic imports.
• Implemented two-stage zone verification. First, an AI vision backend hosted on Modal.run (Python FastAPI) compares the player's live camera screenshot against a reference image for that zone. Second, the server validates a physical unlock code against the database. The code is never sent to the client.
• Supported up to 5 concurrent team members, each with their own 4-digit login code and independent session state. The game timer starts on the first login and stops only when the team completes all zones. Rejoining mid-game restores state cleanly.
• Made zone progression race-condition safe using atomic Supabase updates. Each zone advance sets current_zone to the next in the sequence and pops it from remaining_zones in a single operation. Every player action is logged to a progress audit table.
• Shuffled the 6 campus zones into a unique order per team at registration using Fisher-Yates. This meant no two teams followed the same path, which helped avoid crowding at real physical locations during the live event.
• Built a real-time map interface with Leaflet and OpenStreetMap. Shows live GPS position, walking routes via OSRM, a proximity indicator that changes color as the player approaches the target, and a compass that rotates based on device heading.
• Deployed on Vercel. Used Supabase (PostgreSQL) for all team and progress state, and Nodemailer with Gmail SMTP to deliver individual access codes to each team member at registration.