Inspiration

When we all first came to HackUCI, none of us had a clue of what to build. We mulled over many potential ideas, but none of them ever came to fruition. As we were looking at the starter packs provided to us, we noticed that Spotify's API included ways to search for songs by hidden attributes. This was the spark of our inspiration, as we knew that we wanted to make something similar to Spotify's "Discover Weekly" playlist, yet unique in a way that provided a new, more precise method of searching. With this, Specify for Spotify's development began.

What it does

Specify for Spotify provides users with a platform to precisely search for songs using five different hidden attributes and a single genre. The five attributes are danceability, energy, instrumentalness, valence, and tempo. Users can modify the values of each attribute by using the sliders provided. After doing so, they then select a genre to refine their search even more. Clicking the "Get your custom playlist" button then automatically redirects to the Spotify Web Player, where a playlist based on the user's input will be waiting for them.

How we built it

The back-end was developed entirely in Python, along with the web application being built with Flask. Flask hosted all of our work with the Spotify API, specifically with the Spotipy Python library. We created a new Spotify account and used its own authentication token to handle our requests, instead of spamming one of our own personal accounts. The front-end was developed with HTML, CSS, JavaScript, Bootstrap, and jQuery, which allowed for a seamless integration with the back-end and gave us the ability to display our work in an engaging fashion. The sliders allow for users to select values for each attribute, which are described in tooltips by hovering over their respective element.

Challenges we ran into

We initially ran into challenges regarding the purpose and design of our platform. We originally envisioned a website where users could also create playlists similar to their "Spotify Wrapped" with smaller time constraints, along with a built-in music player that had an audio visualizer and dynamic lyrics that automatically updated as the song progressed. However, we soon realized that such a project was infeasible due to the lack of personal data that we could pull from the API and the music player widget. After deciding on the direction of the hack, we also encountered issues with authentication, as we were using two different types in order to access both personal and general API methods. We solved this by creating a module for each, with the Flask back-end calling the specific type of authentication when necessary. We also ran into problems in the front-end, as our lack of experience with JavaScript and integrating it with the back-end as a whole slowed our development down.

Accomplishments that we're proud of

We're all proud of how our skills improved over the duration of the event. Despite having little to no experience in working with Flask, various front-end technologies, and the Spotify API, we managed to build a project that is both functional and seamless when running. With HackUCI 2020 being all of our's first hackathon, we're proud of what we built here.

What we learned

We all learned new technologies related to our respective strengths and languages. Most notably, we all learned how the basics of Flask worked, the implementation of HTML templates with CSS and JavaScript, and how to navigate an API. We also gained valuable experience using version control through Git, which allowed for us to ensure that any discrepancies in our code were not missed when integrating all of our individual work.

What's next for Specify for Spotify?

In the future, Specify for Spotify would hopefully include a way for users to log in to their own accounts for ease of access, as well as provide a built-in music player and audio visualizer. Along with this, we would make our website look much more vibrant and animate in order to present our project in the most appealing and intuitive fashion possible.

Share this project:

Updates