Breadbox

Welcome screen
Setup screen from the answerer's perspective
Guesser entering a question
Answerer receiving a guess
Game over! Answerer can choose the next person to think of something

Inspiration

Is it bigger than a breadbox? Twenty Questions is one of the quintessential party games, requiring nothing more than a couple friends and some time on their hands. We, Adam and Cale, play Twenty Questions with our friends in person all the time, so we figured it would be the perfect experience to recreate online. That's why we created Breadbox. In a time when people are connecting virtually from all over the world, playing Breadbox over Zoom or Discord is the ultimate way to rekindle connections with friends!

What it does

Breadbox allows players on any device to create a new Breadbox room, or join an existing Breadbox room using a short code. One player (the answerer) thinks of something that the rest of the players (the guessers) try to figure out using only yes or no questions. As the guessers ask their questions and venture their guesses, the answerer's answers appear in each player's answer log. Once a guesser finally guesses the correct answer, the game is complete and a new answerer can be chosen!

How we built it

We used a React front-end styled with SCSS, and a Firebase back-end that keeps track of game state and enables communication between guessers and answerers. We also used Git and GitHub for collaboration and version control.

Challenges we ran into

We ran into lots of errors with component lifecycles in React, as we needed to continually call the Firebase database to listen for realtime updates.

Accomplishments that we're proud of

Designing the game was surprisingly quick, as we were able to efficiently wireframe the entire user interface beforehand. The whole process was pretty smooth, and we got over any major humps by the power of collaboration!

What we learned

This project was a great oppurtunity for us to learn how to create real-time web apps, allowing us to learn both Firebase and React Routers. It also gave us further means to hone our skills in front-end web development with React and SCSS, in addition to being a great exercise in using version control.

What's next for Breadbox

There are tons of features we plan on implementing outside the duration of HackIllinois, including but not limited to:

Using WikiData to allow the answerer to randomly generate a topic for others to guess for endless fun
Adding a turn-based game mode for more structured play
Adding challenge modes like guessing within a certain time limit and having a cap on the total number of questions for guessers to ask
Scaling the project to work for a much larger number of simultaneous players