Inspiration

We are a group of friends that enjoy listening to music, and we like to share our new discoveries with one another. However, this doesn't always play well because we have different tastes. During a road trip with one of my friend, we we were arguing over which playlist to play. Then it hit us. How good would it be, to have a web application that takes in our likes and interests, then automatically generates a playlist for us which contains music that both of us likes?

What it does

The web application we created will allow a user to log in and authenticate with Spotify. From there, we will also prompt the user and his friend to key in music they are vibing with on the day they are using the application. After selecting some of their music for the day, that's all! The app will generate a playlist using Spotify API for the user, and they can play all the music they like while hanging out together now!

How we built it

We used the Angular framework for our frontend, and Node.js (express) for our backend. We also incorporated a multitude of Spotify API in our code base.

Challenges we ran into

Biggest challenge would probably be trying to handle the Spotify endpoints with our backend, and trying to incorporate them with the Angular framework. Our team members are beginners at these few tech stacks and we were trying to broaden our skillsets. We figured out halfway that angular actually has a steeper learning curve and less help support for it online. So it was rather challenging to figure out how to build a proper spotify api around it. Furthermore, it's also our first time creating a backend server by ourselves and we must say that it is especially difficult!

Accomplishments that we are proud of

We're proud of the design scheme that we have come up with as it is very aesthetically-pleasing and minimalistic. We are also very proud of being able to create a backend server to be able to link the Spotify authentication page to our application. That caused a huge issue in the beginning as we were not able to get the access token initially. Overall, we are more than happy with our project and we hope to further improve it.

What we learned

We learnt a multitude of things! From setting up better git workflow, to the challenges of angular, as well as the limitations of spotify API. Personally, I enjoyed the process of learning how to set up a backend with express! It really warms our heart when we see a working endpoint that we created.

What's next for vibing.

vibing. intends to up our game by creating our own search and matching algorithm in the future via using a matrix of parameters and comparing cosine similarity! We would also look to including more friends into the playlist generation!

Share this project:

Updates