Inspiration

Having attended various social events or dining in restaurants, guests are always unable to choose what what songs they would prefer to be played or individuals participants are resorted to adding songs to the host's playlist. This can be tedious as firstly, guests would have to access Spotify in order to add songs, which can be tedious and unfamiliar, and secondly, existing methods (adding to playlist) does not support any upvoting system.

For example, in Hack&Roll 2020, participants were allowed to add songs to a public Spotify playlist. One of us were unfamiliar with Spotify (he's a rare Apple Music user) and wasn't able to navigate through Spotify and his favourite 1990 songs. It would also be fun if participants can upvote and select what song to be played next, to prevent any single user from hogging the playlist. We decided that that was too much power for an individual to have, and hence, we decided to come up with a better way to populate song queues/playlists.

This web application can also be useful in cafe or parties, as the voting system and intuitive design complements such events.

What it does

Our web application consists of two components: a voting system and the web player.

The host can create a room with a unique url, and guests can access the url to gain access to the voting system. Songs from spotify will be played on the web application.

The voting system updates in real time, meaning that users are able to see songs being added to the queue and the number of votes on each song changing. The queue is dynamic and changes in order as the number of votes of each song changes. After the end of each song, the web player plays the most voted song in the queue.

Technology stack used.

  • React (front-end)
  • Spring Boot (back-end)
  • Spotify API
  • Spotify Web SDK API
  • WebSocket

Challenges I ran into

We were unfamiliar API of Spotify and its web player and it took a while to get accustomed to using it. We also got to learn Spring Boot through this hackathon, and sharpen our front-end knowledge with React Hooks. As the Spotify API does not contain anything regarding queues, we had to use pre-existing API to simulate a queue. We also encountered some last minute issue deploying our web application due to poor time management.

Share this project:
×

Updates