Haunted House of Bugs

Inspiration

The inspiration for Haunted House of Bugs came from the challenge I, and many others, faced when beginning to learn code — debugging can feel scary, frustrating, and overwhelming. I wanted to make that experience fun by creating an interactive escape-room style game where fixing code errors becomes an adventure, with spooky storytelling. The goal is to make debugging less intimidating and help learners build confidence in their coding skills while having fun, or just challenge some friends and see who can debug faster.

Problem

Traditional coding education can be dry and intimidating. Debugging especially is often seen as frustrating.

Solution

Transform debugging into an adventure! By adding narrative, gamification, and a spooky theme, learning becomes engaging and memorable.

What it does

Presents 10 progressively harder coding puzzles as "rooms" to escape. Tracks per-room times and total completion time. Saves player profile, score, and completion time. Public leaderboard sorted by score then time. Replay and share your victory.

How it works

• Auth: user signs in.
• Player starts with the 1st room or proceeds. Entering a room starts a timer
• Solve the puzzle — you immediately see how long that room took.
• Total time: All room times add up to your final completion time.
• Leaderboard: Your name, score and total time go on the public leaderboard so others can compare.
• After finishing you can play again (reset progress) or share your victory.

Tech stack

• Frontend: Next.js + React + TypeScript, Tailwind CSS.
• Editor: Monaco Editor embedded for editable code puzzles.
• Backend: Firebase and Firestore.
• Deployment: Vercel.

What's next for Haunted House of Bugs

• Add server-side validation / sandboxing for user-submitted code to increase safety.
• Expand puzzles (new rooms), social sharing integrations, and localized content.
• Add optional guest play mode.

Built With

• css
• firebase
• next.js
• react
• typescript