BrainBug

Code, compete, conquer — master programming while having a blast with friends!

Comment

Inspiration

BrainBug isn't about fixing broken code — it's about leveling up your coding instincts, fast. We turned coding practice into a competitive game: spot the difference between two code snippets, or race to fill in missing pieces before time runs out. Challenge your friends or go solo — either way, you're sharpening real skills while having actual fun.

Jumping into coding can be tough, especially when you’re encountering syntax errors and debugging for the first time. BrainBug is designed to make that learning curve a little less scary (and a lot more fun!) by helping both new and experienced coders practice finding bugs and sharpening their syntax through engaging single-player and multiplayer experiences.

What it does

BrainBug currently features two games:

  1. Spot the Difference: Compare two code snippets and find the bugs hidden between them.

  2. Fill In the Blanks: Complete missing parts of a program to make it run correctly.

Players get immediate feedback to help reinforce their understanding, and the games are designed to be quick, challenging, and rewarding. We also offer multiplayer for some friendly competition between players!

How we built it

BrainBug was built using React.js with TypeScript and hosted on Vercel. We used the Gemini API to help generate coding challenges for the games. Our frontend development was powered by Vite for a faster and smoother development experience. We also experimented with 3D modeling to create an animated, friendly companion that follows players throughout the games with Omabuarts animals, making the experience feel more lively and interactive. Shoutout shadcn/ui for awesome components too!

Challenges we ran into

  • This was our first time working with 3D images — modeling a realistic and responsive companion character was definitely a steep but exciting learning curve.

  • Vite was new to us (shoutout to Ryan) and took some adjusting at the start.

  • WebSockets... are hard. Real-time multiplayer isn’t easy

  • UI/UX indecision — we kept coming up with new ideas and had to rework our design more than a few times.

  • Getting locked out of our friend's apartment, so we didn't have a change of clothes

Accomplishments that we're proud of

Learned so many new things! First time trying Three.js. as well, getting websockets to work. Building beautiful UI and testing out fun web feature (floating animal bubbles).

What we learned

Literally everything lol aside from knowing JavaScript, we've never used any of the other tools in our project lol.

  • How to rapidly prototype using Next.js and Vite.

  • Best practices for TypeScript and scalable frontend design.

  • Fundamental concepts in 3D rendering and real-time interaction using Three.js.

  • How UI/UX libraries like Shadcn can make frontend development cleaner and faster.

  • How to optimize for latency and user experience in real-time web apps.

What's next for BrainBug

  • Adding more games to cover additional coding concepts and challenges.

  • Implementing user authentication to track progress and introduce a competitive leaderboard.

  • Expanding our cast of animated companion characters to make the app even more fun and personalized.

  • Fine-tuning our real-time multiplayer experience for smoother gameplay.

See more here: https://youtu.be/7OvRpsglvgE (regular demo not for sponsor entry. Sponsor entry see attached to the slides on devpost)

Share this project:

Updates