BurstBalloon

Inspiration

Inspired by the trending game "guess the second and burst the balloon". I decided to create a virtual version of it on Reddit. You can either play against the system or a real reddit user. This is perfect for a fast, fun, "beat your friend's guess" kind of game.

What it does

Burst Balloon is a small reflex game with 20 balloons standing in a row.

A number flashes on your screen say, "6.8 seconds" and that's your target.

You hold down a button, and you let go exactly when you think 6.8 seconds has passed. No clock is showing you the time, you're just using your own feeling for time (this is the fun part, and also the hard part ).

Whoever guesses closer to the number either you or your opponent gets to burst 3 balloons before time runs out. You can play:

• Against the System (the computer, in Easy, Medium, or Hard mode)
• Against a real person. Devvit matches you with another real Reddit user who's also waiting to play the game right there on the post! The person with the highest number of balloon burst wins. There's also a daily streak (come back and play every day to keep your fire burning) and a leaderboard so you can see who's the champion.

How we built it

• React built the balloons, buttons, and "YOU WIN!" screen including all the pretty colors.
• The referee inside the house (which is the brain that decides who's right) was built with Node.js and Hono. This is very important because that way, nobody can cheat by changing their own phone's clock or lying about their score. The referee is the ONLY one who decides who won.
• Redis helps the game to remembers the users daily streak, leaderboard position, and who's currently waiting for a match.
• Devvit Web which is Reddit's own platform for building real apps that live directly inside Reddit posts was used to build the app.
• TypeScript was used everywhere in the app to catch any small mistakes before they even happen.
• Vite help to bundle everything neatly.
• Tailwind CSS make the colors and shapes look nice quickly.

Challenges we ran into

1. Matching two real reddit users. The FIRST person to arrive had no way of knowing when the second person showed up. It's like you're waiting for your friend that might never arrive so we fix it so the first person is always "listening" properly for when a match is found.

2. Uploading the game onto Reddit's platform was NOT smooth at all. We hit login errors, permission errors, "app doesn't exist" errors and plenty of back and forth before it finally worked.

3. Screen problems: the "YOU WIN!" screen was cutting off the buttons at the bottom, so people couldn't even click "Play Again." Small thing, but very annoying if you experience it.

Accomplishments that I'm proud of

• We built a game where two real strangers on Reddit can be matched together and play fair, live, with no cheating possible because the server checks everything.
• We caught and fixed real bugs that would have made the game feel broken or unfair, even after it "looked" finished.
• The daily streak and leaderboard actually save your progress properly, using real Reddit usernames not just pretend data that disappears when you close the tab.
• It runs smoothly with fast animations, confetti, sound effects and small touches that make it feel like a "real" game.

What we learned

• Building something that LOOKS finished is not the same as building something that WORKS correctly. Many of our bugs were invisible until we actually tested with a real second player, or on a real Reddit post, not just on our own computer.
• Trusting the server, not the phone, is the only safe way to build a fair multiplayer game.

What's next for BurstBalloon

• Weekly streak rewards: special balloon skins for people who keep their streak alive.

Built With

• devvit
• hono
• node.js
• react
• redis
• tailwind
• typescript
• vite