QR-Based Treasure Hunt Web Appfor CelcomDigi
We collaborated with CelcomDigi to deliver a fun and immersive treasure hunt experience designed for event attendees. Participants scanned QR codes placed around the venue to collect virtual Z-coins. Each valid scan triggered an animated reward, while invalid codes returned playful feedback messages. Once all coins were collected, the platform enabled staff to verify completion and grant access to a special projection room. Designed to be responsive across devices and optimized for fast scanning and smooth navigation, this gamified solution delivered high engagement and seamless operation.
Project Overview
An interactive event solution designed to engage participants through gamified QR code scanning.
CelcomDigi’s event required an innovative web platform to support a treasure hunt experience. Users progressed by scanning QR codes at designated locations to collect virtual Z-coins. A responsive web app was built to guide users through the hunt, confirm scan success or failure with animations and messages, and track their progress. Once the user completed the journey, staff could verify and confirm their eligibility to access an exclusive reward area. The entire experience was engineered for responsiveness, intuitive use, and performance across devices.
Industry
Others
Services We Provided
Web Development, Web Hosting Solutions
Project Duration
0 Months
Technologies We Use
React
Material-UI
TypeScript
Styled Component
AWS
SCSS
Project Challenges
Designing a gamified, fast-loading QR-based system for a high-traffic event environment.
The project required building a web experience that was not only interactive but also intuitive, secure, and scalable. Each step of the user journey—from scanning QR codes to validating progress - had to be seamless and visually engaging. With time constraints and the need for data accuracy, real-time validation and user feedback became critical priorities.
Designing an intuitive interface for scanning and navigating through the experience.
Preventing duplicate scans and ensuring real-time progress tracking.
Managing invalid scan feedback while keeping the experience enjoyable.
Creating a simple verification system for staff to confirm coin completion.
Delivering within a strict 2-week timeline with full handoff documentation.
How We Delivered the Experience
A responsive and engaging solution developed with performance and flexibility in mind.
Gamified QR Logic
Built a dynamic backend using Firebase Functions to validate QR scans and store coin progress in real time.
Real-Time Progress Tracking
Users could view their progress visually, with smooth animations confirming each Z-coin collected.
Invalid Scan Messaging
Displayed fun "Not a real coin!" alerts for invalid QR codes to keep the experience light and engaging.
Responsive Interface
Developed a fully responsive UI using TailwindCSS, ensuring great performance across phones, tablets, and desktops.
Deployment & Documentation
Deployed on AWS with detailed documentation for future use and internal team training.
