Wizard Quest
💡 Inspiration
We were inspired by classic adventure stories and the dream of turning everyday spaces into a playable quest. We wanted to blur the lines between reality and fantasy, transforming a simple walk through the neighborhood into a high-stakes magical journey.
🎮 What it does
Wizard Quest is a location-based AR experience that turns the real world into a magical game board. Players use their smartphones to:
- Explore: Navigate physical spaces using GPS-anchored spawning to find hidden magical nodes.
- Collect: Discover and gather rare enchanted items rendered in immersive AR.
- Battle: Engage in duels using a custom, Computer Vision (CV)-powered fight screen that reacts to player movements and spells in real-time.
🛠️ How we built it
The project was built on a Next.js foundation to create a cohesive UX that manages real-time camera feeds and sensor inputs.
Technical Highlights:
- Multi-Platform AR: We integrated AR.js for interactive web elements and for high-fidelity 3D model viewing.
- Geospatial Logic: We implemented GPS-anchored spawning to ensure magical items appear at precise real-world coordinates.
- CV Engine: A live camera overlay processes user input for the battle system.
We designed the game loop around a specific equation for engagement: $$Exploration + Collection + Battle = Immersion$$
🧗 Challenges we ran into
- Platform Fragmentation: Handling the functional differences between WebXR and iOS AR capabilities required robust platform detection.
- 3D Pipeline: Navigating strict model format requirements and perfecting the AR pipeline for mobile was a steep learning curve.
- Mobile UX: Fitting a rich UI (inventory, maps, and battle HUD) onto small screens without obstructing the AR view required multiple design iterations.
🏆 Accomplishments that we're proud of
We are incredibly proud of successfully stitching together a live CV overlay with GPS-based spawning. Overcoming the "drift" in AR and seeing a digital item remain anchored to a real-world landmark was a massive milestone for us.
📖 What we learned
This project taught us how to balance ambitious game design with the physical constraints of the real world. We gained expertise in cross-platform AR deployment, 3D asset optimization, and how to utilize device sensors to create a seamless user experience.
🚀 What's next for Wizard Quest
We hope to expand the "Bestiary" of monsters, implement multiplayer dueling via web sockets, and refine our CV gestures for more complex spell-casting.
Built With
- ar.js-(ar.js)
- css-frameworks/libraries:-next.js
- framer-motion
- javascript
- languages:-typescript
- leaflet.js
- react
- socket.io
- tailwind-css
- three.js

Log in or sign up for Devpost to join the conversation.