Our team desired a collaborative website where users could interact with each other. An idea was sparked by a live round of icebreaker bingo that one of our teammates experienced at their internship. It was a fun and quick way to meet their coworkers and break the ice. A digital icebreaker platform is yet to exist and with the breadth of applications available--from schools to clubs to the workplace--we're hopeful that this will break the ice and the internet!
What it does
Icebreaker bingo creates a digital bingo sheet and tracks your progress until you hit bingo. The website starts by filling in a bingo sheet with default prompts. The user then tries to mark off prompts and 'X out squares' by finding people who relate to each prompt. The goal is to be the first to get five squares in a row to hit bingo!
Users can generate a default bingo card by pressing the Randomize button. User can customize their cards by editing content in individual squares. Create a playable bingo card by clicking the Create a Bingo Card button. A link is generated below that can be distributed to all participants. Load the link to play bingo. The site tracks each prompt that is marked off with an 'X' and congratulates you when you reach bingo!
How we built it
The backend was written in Java and built with Springboot. The frontend & UI was written in JavaScript with React and Tailwind css. Each member focused on a different aspect and helped out on other aspects. The pieces were combined in GitHub.
React was used for its component feature; each square of bingo is a component whose content can vary with each generation. Default prompts were stored and retrieved via backend to populate each square. Customization is accomplished by taking user input. Finally, UI created an enhanced user experience with additional custom features.
Challenges we ran into
In the beginning phases of the hack, set-up was an uphill climb. Equipping our laptops with the proper software, working through issues that arose and familiarizing ourselves with the languages and frameworks was a learning curve since most of our members have minimal coding experience. The mental block associated with first-time exposure was at times intimidating, and debugging also had its frequent challenges, but when we hit a roadblock, we learned to rely on each other for help to keep pressing on.
Accomplishments that we're proud of
Between all our members, this was our first time doing web development, and within 36 hours, we made a fully functional web app. We are proud of the obstacles we've overcome through teamwork and we're pleased to have completed our final product.
What we learned
As aforementioned, everything was new to most of our team. Through the hackathon, we learned how to code with Java/JavaScript and how to create a website with code. We learned to be resourceful, but we also learned to be adaptable in challenges, teachable with advice, committed amidst roadblocks, and reliant on each other to overcome obstacles.
What's next for Icebreaker Bingo
Moving forward, Icebreaker Bingo has room to improve with the ability to save custom-made bingo cards, use AI and surveys for custom-themed cards, mobile-friendly configuration and creating interaction between users on the website. Saving custom cards would promote ease of use for customers that frequently use specific cards. Using surveys and AI for custom-themed cards would customize the icebreaker and expand bingo to new venues, like a bingo card for a particular video game at a gaming convention. Configuring the site for mobile-friendly use would be ideal for in-person interaction. However, expanding the site to include digital interaction would help users get to know each other remotely.
Log in or sign up for Devpost to join the conversation.