VibezMusic Web

Vibez Music Web is a web app designed to let all your friends add and remove songs from the queue, vote, and see what's up next.

Comment

Inspiration

At McMaster University's Pulse Fitness gym, we noticed that we could scan a QR code that redirects to a Google form where we are able to submit a song request. Once a song was submitted, the employees would check the requested song and manually add it to the queue of their Spotify playlist. Because of the tedious nature of this process, we wanted to provide a modern solution.

What it does

Create a live session called a "vibe" where the host is the source of the music and guests can tune in to queue up and vote on the tracks they want to listen to.

How we built it

We built the VibezMusic Web app with React JS for the front end and Google Cloud's Firebase as the backend. We also the Spotify API and created a backend to deal with cross-origin API requests with Square.

Challenges we ran into

When setting up the Square API, we quickly realized that it was not recommended to call upon the Square API endpoints from the frontend, and instead needed a backend. This was a challenge for us since none of us had much experience with backend development. Through perseverance, learning, and a lot of failures, we were able to successfully integrate some of the many features of the Square API into our app.

Accomplishments that we're proud of

Creating a fully functional backend that allows Square API calls. Enabling seamless synchronization among multiple users and ensuring smooth and consistent track transitions from upvotes and downvotes by different users. We're proud of creating a system where similar API calls made to Spotify are chained together so that the calls can be minimized.

What we learned

Code architecture is very important. It is almost always better to build scalable, well-built software. We learned that doing this makes it much easier to add new features as well as debugging. We also learned that testing is incredibly important. We noticed we were spending a lot of time repeating the same tests after any significant change, and quickly made the decision to create a script that would automate some unit tests for us.

What's next for VibezMusic Web

Next on the agenda for VibezMusic Web is the implementation of super votes, a premium feature exclusive to subscribed hosts. Super votes grant users the ability to cast multiple upvotes or downvotes on a single song. Each super vote comes with a price tag of 10 cents and can only be obtained in packs of 10. To further entice hosts, we offer the opportunity to redeem half of the profits generated from super vote purchases. To facilitate this feature, we intend to leverage the Square Invoice API, enabling users to conveniently request and receive their Vibe payouts at their preferred time.

We also plan to create a more thorough system for dealing with API calls to Spotify so that the client is never overloading the API. Although we have started development for this optimization system, we plan to build on it so that all API calls made to Spotify can be chained intelligently by using a call stack and an interval that varies based on the average response time for an API call.

Lastly, we want to push Vibez Web and introduce it to areas like Gyms, Cafes, and Restaurants. McMaster University's Pulse Fitness is already interested in trying out the concept which is a great start.

Share this project:

Updates