I don't know about you, but one of the best parts of my Monday each week is digging into Spotify's Discover Weekly playlist. If you're not familiar, the app delivers a fresh mixtape of 30 songs every single week, specifically tailored to your listening habits. It almost makes getting out of bed little easier.
Music Mood Ring gives you a song recommendation on-demand instead of weekly, and that song is specifically tailored to your current mood. The user inputs how they are feeling (via emojis), and a genre, and the application returns a song to match.
Here's how it works: when the user selects their mood and genre, the application uses them to narrow down a list of playlist IDs. It then selects a random playlist ID from that list, and uses it to call Spotify's API. Once the playlist is returned, the program then selects a random song from it and displays it for the user to listen to.
Making this app took much longer than I anticipated. Much longer. I spent the better part of a morning just getting a handle on Spotify's API, and even then, I found my ability to search through their data was more limited than I thought. I originally planned to fetch my library of playlist IDs from the API, but there's not really a search feature that returns what I was looking for. I had to do a lot of the playlist selection by hand on Spotify's web browser, so that was definitely a setback.
This project also taught me the importance of considering media queries before you get too involved with CSS. I found myself backtracking a lot when creating my styles, because I did not consider how they would scale up and down. However, I did really enjoy working on the CSS for this one, especially the mood-ring-inspired moving gradient I used for the background.
If you'd like to check it out, the project is on GitHub!