Whether you’re in the zone or just jamming out, a poor song choice can pull you out of your mood and out of your flow. According to researchers at University of California, Irvine, it takes 23 minutes and 15 seconds to refocus after an interruption - by ruining vibes and losing valuable time, it’s no wonder that poorly curated playlists were such a common frustration across our team. In order to solve this problem without spending hours on end cleaning through old playlists, we hoped to build an easy-to-use online tool that could help music lovers clean their playlists to their liking.

What it does

Vibe Check allows Spotify users to curate existing playlists both public and private to maintain a consistent “vibe” throughout the playlist. Users can access their own playlists as well as search public playlists to find playlists with the right overall vibe. Once they’ve found a suitable playlist, users can set the sensitivity of the vibe checker and use our vibe checking functionality to generate a new, curated playlist, removing tracks that stray too far from the overall vibe of the original playlist. Additionally we trained a neural network that is able to classify the “vibe” of the playlist through over 1000+ songs of training data.

How we built it

We began by exploring what information we could access from the Spotify API. Once we knew what data we could use, we brainstormed and storyboarded the user experience in Figma, which helped us decide the general logic, tools, and data structures to use while building the project. We then translated our Figma storyboards into an HTML and CSS frontend and connected the backend with node.js. After completing our core vibe checking functionality, we used brain.js to build and test neural nets to use for our vibe classification features.

Challenges we ran into

This project was certainly challenging as it was made with languages that our team had very little experience on. Firstly, our team was composed of backend developers which proved to be difficult as we needed to implement a usable frontend to users in order for the backend to be utilized properly. The creation of the neural network took quite a while as no one had used brain.js nor had experience with machine learning in the past. The amount of knowledge it took to correctly train a neural network certainty was a challenge and there were many trained neural networks that failed or couldn’t even predict between two entirely different genres. The use of the spotify API also had presented many challenges as the AJAX calls often gave us errors with rate limiting and also sync issues that our team had never encountered before. However, although we were using languages that were very new to us with libraries that we had never seen before we managed to build the project to a level of completion that we are extremely proud of.

Accomplishments we're proud of

As a team we were proud of many of the achievements that we were able to make during these 36 hours. We strengthened our interpersonal skills through working with teammates online even when time zones didn’t match up and also communicated effectively not wasting any time while coding and planning. Additionally, we gained many hard skills and improved in areas that we had not worked on much before in the past. We each went outside of our comfort zones and utilized new tools. With very little experience in the roles we chose we pushed ourselves to learn and apply our knowledge in real time and were able to create a web app that we would use even outside of this hackathon. We were able to connect all these pieces scattered around and tie all the concepts up into one package which we all found to be incredibly satisfying to see all our hard work come together in the end. We were able to come out of this hackathon more confident about our skills and are able to have something to show for all our hard work in this time, effort, and care intensive 36 hours.

What we learned

While building Vibe Check, we learned a lot about web development, API calls, machine learning, Javascript, HTML, and CSS. Each team member had very little experience with what they worked on making this an extremely learning intensive project. Our team members were able to get a solid grasp on creating the frontend for web apps through learning HTML, CSS, and Javascript to create the UI. In the backend we were able to learn more about data manipulation. This allowed us to transform seemingly meaningless float values into a valuable filtering tool for any song. We learnt about standard deviations, Z-scores, and how to implement these concepts in a real life application. Additionally, we were able to set up our first nodes with node.js and also host our first website using heroku. Lastly we were able to learn about machine learning by training our own neural network by learning about XOR gates, forwards propagation, backwards propagation, and also learning rates for the neural network. Overall, we gained a large amount of new knowledge and developed our skills to the point where we were able to make a cohesive project exceeding our expectations.

What's next for Vibe Check

In the near future, we plan to improve Vibe Check by:

  • Training our classification system with larger datasets more representative of the distribution of music on Spotify. We hope to make more accurate predictions this way, and we’re also exploring other classification algorithms.
  • Fine tuning the vibe filter so that the position on the slider will be more accurate and correspond to a more intuitive feel on which songs will be removed. Currently, we’re assuming that track features are distributed normally, but the distributions of particular songs are often hyper dispersed.
  • Improving the UI and UX to allow users to have a smoother experience while using Vibe Check. We want to allow users to keep specific songs slated to be removed for a more customized experience.

In the end we want to ensure our platform can prevent users from losing their vibes in their next workout, study break, or personal jam session.

Built With

Share this project: