CLUEMINATI 3.0 : Unfolding The Tech In The Realms Of Hell and Earth

It was the night before launch. Everything was tested. Everything was ready. Or so we thought. After all, the stakes were very high this time.

Clueminati 3.0 was a fully immersive, tech-driven treasure hunt with over 700+ participants that brought the thrill of puzzles, maps, and strategic decisions to life. It was a chaotic, beautiful mashup of cardio, decryption and pure adrenaline. The team at CodeChef-VIT crafted this entire experience, centralized around a custom-built web app that seamlessly bridged participants and the club members into one system.

Clueminati 3.0 revolved around the theme of Hell and Earth. Each team of 3-5 players had to split up.

Hell: Trapped indoors. Their job was to play a customized game built by CodeChef-VIT, as an attempt to break free.

Earth: The outdoor runners.They had to sprint across the massive campus, finding physical stations, scanning QR codes, and solving riddles while trying not to pass out.

Here’s a behind the scenes of how we engineered our web app’s frontend to control the pace of play and the strategic decisions made in the backend’s tactical room to turn them into an epic matchday experience for the participants.

The View From The Stands - Building the frontend between the two realms

To control the midfield traffic of hundreds of concurrent users, we subbed in Next.js 16. Our main aim was to just render pages while maintaining formation. We used a global RoundContext which stores the current round’s state (such as timer, round number, questions, player status, etc.) as our playmaker, passing data between the backend and the client with custom hooks. This kept the visual timers ticking in perfect harmony across every device, ensuring no one could blame latency for losing the match.

We used Tailwind CSS for styling to maintain consistent responsiveness across devices. Axios managed the passing game, delivering API requests with precision. But in a match this intense, players slip up. That’s where localStorage came in as our goalkeeper. It managed the credentials for our various squads (Hell, Earth, and Core members) and ensured session persistence. If a player accidentally refreshed the page there was no foul, no penalty. They picked up exactly where they left off, keeping the momentum alive.

Onboarding Flow: The Pre-Match build up from the Ticket Gate to the Home and Away Ends

The entry point to the app was a clean login page, where participants authenticated using their registered email and password. When a captain formed a new team, the frontend sent a pass (a POST request) to the backend, which generated a unique team ID and code. This code was later converted into a QR code using the qrcode.react library and displayed it on the team’s profile page. Throughout the game, the core members acting as referees would scan the QR to blow the whistle and assign the next set of questions.

With the squad assembled, it was time to set the tactical formation. Players had to choose their position: selecting the indoor role redirected the user to a specifically designed game to escape hell. The outdoor wingers, on the other hand, unlocked the full pitch view, complete with station maps, question feeds, the live league table or leaderboard, ready to sprint for more points.

The Build-Up Play : Kickoff, Scans, and Screamers

All the pre-match prep ultimately led to kickoff. When a squad pressed high up the pitch and reached a station, a core member (acting as the referee) would scan the team’s QR code. This signaled the backend to generate a specific question based on logic we’ll break down later.

To receive the pass, the team used the app’s built-in scanner, implemented via react-qr-reader, to scan the station's code. A clean scan meant a perfect first touch, and the question instantly appeared on screen. At this stage, the interface was all about the final touch. Faced with the question, the user had the ball at their feet with two clear options: commit to the finish (Submit) or lay it off to keep the momentum going (Skip).

Hitting "Submit" fired a POST request straight at the backend. We used Toast notifications as our instant VAR check. A correct answer triggered a green notification, a goal !! Toast notifications made the feedback experience feel instant and rewarding.

Manager Mode: Admin Tools and Live Standings

While the players were sprinting, the Core Members were in the Technical Area. We built them a dedicated UI, allowing them to generate questions on demand and even toggle the match difficulty for the second round. This meant the entire officiating loop, identifying the squad, blowing the whistle, and assigning the play, could be executed in seconds. This dashboard was the ultimate sideline management tool, preventing stoppage time delays and keeping the match flowing seamlessly.

The app featured a leaderboard displaying the top 10 teams, turning every refresh into a battle for a spot at the top of the table. We also gave every team access to the submission history, where they could review their points tally, thereby providing them an easy way to track their progress and strategize during the competition.

Tactical Awareness & The Golden Goal

To ensure our wingers didn't get caught in the offside trap of the massive campus, the app featured a dedicated tactical board, a map of the campus with all stations clearly marked. We didn’t want them getting lost in a system that makes no sense, but we didn't just show them the field, we played the perfect long ball. We embedded a button that linked directly to Google Maps coordinates. This lightweight method ensured smooth navigation without adding extra dependencies or API calls.

Extra Time : The Additional Phase of Play

The gameplay shifted from possession to a high-stakes puzzle. Here is when just scoring sufficient points wasn’t enough and the goal difference came to play. Answering specific questions unlocked a hidden letter, which the frontend tracked in the state like a manager counting subs on the touchline. As the clock ticked down, teams had to assemble these letters into a final defensive splitting cipher. Entering this code into the final input field was the Winning Goal, validating the win in the backend and blowing the final whistle on their campaign.

While the frontend was playing on the surface, the backend was playing a high line defense against a counterattack of numerous concurrent requests. It’s time to leave the pitch, head down the tunnel, and inspect the tactical room that turns raw, chaotic data into a proper game plan.

The View From The Tactical Room : Building The Backend

Managing a real-time treasure hunt for 700+ participants isn't your typical CRUD app. When teams are racing between physical stations, scanning QR codes, and competing for live rankings, every API call matters. This is the story of how we built the Clueminati 2025 backend using Next.js API routes, MongoDB, and JWT authentication-complete with near-disasters and last-minute saves.

Core Collections: Users, Teams (scores + progress), Questions (bank with difficulties), Stations (QR locations), GameStat (global round timestamps) The Security Protocol - Authentication Done Right Before writing a single line of code, we went into full pre-season training mode on JWT. Tutorials, docs, edge cases, everything. That upfront investment paid off (like/the way) a well-drilled backline always does. Zero JWT related bugs throughout the entire run.

Before writing code, we spent days learning JWT thoroughly through tutorials. This upfront investment paid off-we had zero JWT-related bugs throughout development.

Development and production behave differently. Never hardcode security settings.

The touchline substitution : Email Catastrophe (and Recovery)

We planned to send login credentials to 700+ participants using three Gmail accounts with round-robin distribution. Testing went perfectly. Then came launch night, and the match turned on us.

The disaster: Mid-send, one email account got flagged by Gmail's security. The referee pulled out a red card we never saw coming. Result? 200 participants never received credentials before the 8 AM event started. Just three weeks before, we were arguing over a simple question: do we leave the signup endpoint up after pre-registration ends?

Board: "Send the emails by tonight."

Junior Core: "Script is up and running. Let's meet tomorrow morning everyone."

Next Morning: "Two of the emails crashed, bring up the plan B"

That “Plan B” became our salvation. The 200 affected participants registered on-the-spot without crashes thanks to the distributed load. Those who still faced issues were helped by our support desks up-front. External services will fail, always have a Plan B. Listen to your team's concerns about edge cases. Redundancy isn't paranoia, it's wisdom.

The Perfect Formation : Game Logic that actually works!!

Question Assignment: No Duplicates, No Sharing Two rules governed the question assignment, and both were non-negotiable. No team gets duplicate questions within a round, and no two teams have the same question simultaneously. The second rule was our offside trap, cutting off any chance of cheating without anyone noticing.

The top spot mentality : Our Leaderboard Philosophy

We made a call that felt like a controversial choice: show rankings (#1, #2, #3) but hide actual scores. Why? The reasoning was simple- Seeing a 200-point gap demoralizes teams. They stop pressing. They accept the result before the final whistle. So by hiding the gap, everyone fought until the end. Teams ranked #8 didn't know they were only 50 points behind #3. As a result, the competition stayed fierce. Sometimes the best technical decision is to hide information, not expose it.

Schema Evolution

Database schemas evolved constantly as the tournament’s demands shifted. A Question model gained a difficulty field to balance out the points and places. Meanwhile, the team split scoring into indoorScore and outdoorScore to satisfy business logic separation and data modeling constraints. The rule was simple: notify the entire dev team before any schema change. No one finds out mid-match that the formation shifted without them.

Testing with Senior Devs

Our senior developers attacked our APIs looking for edge cases like they were trying to knock us out of the tournament

• Joining a team mid-question assignment

• Leaving a team while holding an active question

• Rapid-fire requests to test race conditions.

Most bugs were caught pre-deployment. By kickoff, there was nowhere to hide. Recruit your sneakiest developers for QA. They'll find the exploits you never imagined.

The Final Whistle

700+ participants. Two rounds. Zero downtime. Clean sheet.

The email mishap taught us humility. Our seniors taught us resilience. The fallback signup system was the substitute that won us the match when the starting eleven couldn’t. Participants raced across campus, solved riddles, scanned QR codes, and competed fiercely. The backend held its line through rapid question submissions, instant score updates, and concurrent team management without breaking a sweat. Not a single goal conceded.

Key Takeaways

1. Learn your tools thoroughly before kickoff.

2. JWT mastery prevents auth bugs. Always have a Plan B warming up on the touchline. Fallback signup saved 200 users.

3. External services will fail. Email, APIs, everything. Plan for it.

4. Seek mentorship during crises. Senior devs turn panic into learning.

5. Product decisions matter. Hiding score gaps kept competition alive till the end.

6. Communicate schema changes. Team sync prevents bugs.

7. Test with sneakiest developers. They'll find exploits you never imagined.

8. Simplicity scales. Atomic operations beat transactions when possible.

9. Redundancy isn't paranoia. It's the difference between lifting the trophy and watching from the stands.

Summary

Built a real-time treasure hunt backend for 700+ concurrent users using Next.js API routes, MongoDB, and JWT. Survived an email provider failure that blocked 200 registrations because we had a substitute ready on the touchline. Learned to never trust external services, measure performance before optimizing, and listen to experienced developers. Two rounds. Zero downtime. Countless lessons about production systems, team communication, and the value of defensive architecture. Want to explore the codebase? Check out our GitHub repository and see how we handled these challenges in practice.