(Full Devpost and Video Demo)[https://devpost.com/software/free-space-8n9auy/edit]
Do you ever watch Valorant and there were some new ways to engage with the event from home? Maybe gain some of those new Liquid+ points? Our team created Free SpACE, a Teal Liquid themed bingo game that adds a layer of excitement to the upcoming Valorant Champions tournament as well as future events that Team Liquid is a part of. Especially as we stare at the screen so much during the pandemic, our team wanted to create a way to engage with our favourite team (Team Liquid ofc) which was more than just sitting in front of a screen and watching an event.
Free SpACE is a bingo game for spectators of the upcoming Valorant Champions 2021. In Free SpACE, participants are greeted by a landing page and are prompted to login or register for an account where points from the bingo are added. The webpage displays events - aces, flashes, and kills - to be checked off by spectators in pursuit of Liquid+ Points. Bingo! As the tournament progresses, a bingo admin monitors the tournament and checks bingo events as they happen. Free SpACE users who check off rows, columns, or diagonals that contain events that have happened will receive Liquid+ Points or other rewards!.
We built the front end using HTML/CSS and JavaScript. This allowed us to create our stunning webpage, animations, and dynamically changing elements. We used Flask to connect the front end to the back end, which was written in Python, to authenticate login information, and manage each user’s bingo boards, stats, and the master list of events. All the data was stored in a MongoDB database for both security and scalability.
As a beginner team, 3/4 of our team didn't have front/back/full stack experience and have never even touched a web app, HTML, CSS or a database. It was difficult to understand how different files and languages worked together to create a full stack application and we were required to do a lot of self learning. New hackers had to spend several hours to understand the structure of the webpage and get comfortable developing web page elements in HTML and CSS while also creating clean code to integrate with the back end. Another challenge was simply finding time to learn and work on the project, as our entire team is composed of engineering students at University of Waterloo AND we had two midterms this week.
It works!!! We are proud to see that even with minimal to no experience, we were able to work together to create a full stack web app with real world applications, a beautiful front end and a robust back end. For beginner coders, learning new coding languages was a struggle but it also provided a lot of learning opportunity. We divided work based on our interests and strength and completed the project despite obstacles like experience, time, school, and exams.
We learned a lot more about full stack web applications and how the front end and back end and various files types all come together to pass information around.
Free SpACE is an interactive Riot-Game and E-sport based bingo game. We wish to implement different themes for games such as TFT, League of Legends, and Wild Rift and create cards for specific games between E-sports players and teams that viewers can toggle between to win more points or other rewards! We hope that this will increase the viewer’s attentiveness to the games and hopefully provide players of Free SpACE with the satisfaction of yelling BINGO!