playlist maker
for my final computer science course, we had a semester-long project that had to fulfill four requirements (detailed below). my idea was to create a playlist maker where after you logged in with Spotify, you entered your origin & destination, set your mode of transportation, and what speed you were going to produce a playlist of that length of time. the music would be based on your own spotify library as well as the current weather. if the weather was good (sunny/warm), the playlist included more upbeat/happy songs and if the weather was bad (rainy/snowy/cloudy/cold), mellow/sad songs were added to the playlist.
I was responsible for creating the front end and its design. In the semester, I had to learn HTML, CSS, and React in order to design the program.
for cs411, we were tasked with making a project with these 4 requirements:
-
Utilizes a Redis database
-
Two APIs:
-
Weather: Open Weather Map API to grab the current weather. This information is factored in when choosing the music genres for generating the playlist. We used the PyOWM Python wrapper library in implementation.
-
Spotify: Spotify Web API to generate the playlist for the user. We used the Spotipy Python library in implementation.
-
-
Third-party authentication:
-
Logging into Spotify with User Authorization with OAuth 2.0
-
-
Decoupled Architecture:
-
Python Flask backend, React frontend.
-
Extra: Google Maps Geocoding API to get the latitude and longitude of a given location and Google Maps Distance Matrix to calculate the commute time between the origin and destination. We used the googlemaps Python library in implementation.
initially, i started with a basic black & white HTML page of “welcome [name]” input your info, destination, current loc, mode of transport, desired speed, music/podcast. i sketched out an idea of what i had in mind for the front end on Figma.
i then found a template HTML page that would help with understanding the layout and playing with the flow
for flow, i changed the inputs to be more logical “origin to destination” and we used Google maps to calculate the distance
we initially used dropdown menus for transportation and speed. to reduce the number of clicks and to display the choice more clearly, i went with buttons and used individual screens moving forward.
we then had to carefully evaluate if podcasts would be a possible playlist addition. podcasts can range anywhere from 5 minutes to 2 hours while songs are generally between 3-4 minutes long. as BU students we were mostly testing distances on campus and realized that the longest distance a BU student would travel on campus would take no more than 30 min. as a group we decided to eliminate podcasts as an option and focus on developing the song based playlist maker.
since we were using spotify as the music source, i found spotify’s brand colors to be white green and dark grey. i used those as the main colors. i ensured that they were accessible by checking on Adobe’s accessibility site.
i wanted a font similar to spotify’s Gotham Medium inspired font so i searched for something with a clean, modern, fun, and approachable look. i landed on Poppins (which is also the font used throughout this portfolio!)
below is a video walkthrough of our final product:
