ClashRoom

Main page
Create room
Bingo board
Win screen
Join room

Inspiration

We created ClashRoom after getting bored in long lectures and wanted a fun way to stay engaged. A bingo-style game seemed perfect to keep track of common events during class and make paying attention more interactive and competitive.

What it does

ClashRoom generates a bingo board with random scenarios from a lecture (like “professor mentions a quiz” or “Wi-Fi cuts out”). Players check off squares as things happen in real time. When a player fills a row, column, or diagonal, they win and can compete with others.

How we built it

We used HTML and Tailwind for the front-end design, with JavaScript to manage game logic. Firebase handled user authentication, real-time game data, and multiplayer functionality, allowing us to focus on the user experience without needing a server.

Challenges we ran into

The biggest challenge was creating a multiplayer game without hosting a server. We relied on Firebase’s real-time database but had to figure out how to manage game state and sync actions across players. We also had to work out the logic for defining what constitutes a bingo.

Accomplishments that we're proud of

We’re proud of the clean, mobile-friendly design and the multiplayer features that allow players to join rooms and interact in real-time. The Firebase integration made it possible to manage the game smoothly without needing a server.

What we learned

We learned how to work with Firebase Firestore for real-time data and multiplayer games. The project also taught us about structuring databases, user authentication, and handling dynamic data in an interactive app.

What's next for ClashRoom

Next, we plan to add more games and scenarios, improve the UI, and improve the function to create custom bingo boards. We’re also considering adding features like chat rooms and integrating with tools like Google Classroom or Zoom to enhance the experience.