During times of isolation and social distancing, we found music to be a great source of comfort and companion. Playing music that goes with our mood of the day made us feel not so alone. We wanted to build a web app that would make curating playlists easy and fun (by selecting emojis!).
What it does
Log in with your Spotify account and select one or more emojis that describe your current mood or the kind of music you want to listen to. The web app will generate a curated playlist based on the characteristics represented by the emojis (e.g. dance emoji = high danceability), as well as the listener's top tracks, artists, and genres. The app will then display insights of the playlist, breaking down each parameter in percentage form.
How we built it
We used Figma to design the UI/UX of the web app, then used HTML, CSS for the frontend. Unfortunately, due to time constraints and limited skills, we were not able to fully implement the backend part of this project.
Challenges we ran into
Since we were all new to incorporating APIs, we found it difficult to implement parts related to the Spotify API, such as the authorization and analytical algorithm. We started building the backend with Python and Flask, but then later realized that most of the documentations on Spotify used Node.js.
What we learned
We read a lot of documentations and watched a lot of tutorials on using the Spotify API, so we definitely learned a lot about the capability of the API. On the frontend, we learned some new CSS tricks related to hover animations, custom checkboxes, and flex box formatting.