spotiFIGHT

Inspiration

Our project was largely inspired by the fact that music is one of the things that bring people together all over the world, regardless of who you are. On top of this, there is a rise in interest of our generation in personal statistics such as Spotify data in currently existing websites, for example, receiptify. Our team aspired to combine the population’s interest in music and games as ways that connect people, in a game based on user specific spotify data.

What it does

spotiFIGHT is a game that allows different users to log in through Spotify where each user’s data will be extracted and used to generate a multiplayer player verse player mini-game. The mini-game is a guess the song by some song lyrics. The game generates its questions using the spotify data of all users in the game room. Then, users compete to be the first user to guess the song correctly, where they will score a point, then move on.

How we built it

spotiFIGHT is a full stack web development project, integrated with a REACT.js front end and a python Flask back end. The project utilised a number of external APIs, such as Genius API, etcetcetc.

Challenges we ran into

Challenges we ran into include setting up socket connection on both the front end and the back end. Often, errors were encountered that had little to no meaningful error message, making it very difficult to locate the source of the error. Inconsistencies were observed. On top of this, to allow for multiple players in the same game room, sessions had to be managed and communicated across multiples pages and functions in both the front end and the backend. We struggled with cookies and session id for quite a significant amount of time.

Accomplishments that we're proud of

The team is very proud of being able to set up an entire full-stack repository from scratch. In previous projects of most of our members, a scaffold was provided which guided us in the past. On top of this, our team members have a wide range of individual experience that may not work well together naturally. However, through extensive hours of collaboration and communication between our team members, the integration stage was overcame, which we deem a very difficult part of our project.

What we learned

Most of our team members do not have extensive experience when it comes to dealing with web sockets, especially through Socket.IO. However, through the integration stage of this project, we all learnt about socket methods and the need for synchronisation when communicating between the front end and the backend of our project. We can confidently say that we have come out of the event a bit more well versed in web sockets.

What's next for spotiFIGHT

Our current prototype has many places for improvement, both in the l system design, logic, as well as the UI, due to the tight time constraint of the event. Our next step involves revamping the project such that expected functionalities are polished and served in a more graceful way. On top of this, the front end team can iteratively improve the UI for a more pleasant user experience. A pretty important step for us next involves the implementation of security measures across the website. This would then ensure the safety of user data as well as prevent the website from malicious attacks.

Built With

• beautiful-soup
• flask
• huggingface
• javascript
• lyricsgenius
• python
• react
• spotify