I was frustrated that I couldn’t see every song I listened to on Spotify. So, as a personal project, I made a Spotify listening archiver to collect every single song I listen to and generate interactive listening charts, plotted by time of day.
Note: This project has been through MANY iterations. It's currrently on its 3rd version. In this writeup, I use documentation from past versions to build up to the current version.
Version 1.0
In the summer of 2020, I made a Spotify tracker to collect my listening data and visualize it by mood. I loved being able to access valence, danceability, and energy in the Spotify API. I wanted to see if there were any patterns in my listening behavior.
System Design
I used a SUPER hacky solution to collect the data. I used a scheduled task on my physical MacBook to run a Python script every 5 minutes. The script would collect the song I was listening to and the time I listened to it. Then, it would save the data in a CSV file in Github.
Tech Stack
Frontend: React
Backend: Flask
Database: SQL
Deployment: Heroku
API: Spotify API
Project Type: Fullstack
Github Link: https://github.com/trudypainter/spotify-mood
Shortcomings
Reliability
The site was not reliable. I collected songs using a scheduled task on my physical MacBook. So, if I had my computer turned off or was not connected to the internet, the data wouldn't be collected. The data was also stored in CSV files in Github. This is a crafty, free solution. However, this isn't best practice for storing lots of large data.
Plain HTML
The site was made using plain HTML/JS/CSS. This implementation was fine for this specific project, but I wanted to practice making more modular sites for the next project (React).
Nonsensical
The mood graph was non-sensical. I thought the mood indices provided by the Spotify API would be more insightful. But, the graphs didn't make much sense.
Version 2.0
For the second iteration, I focused on making a listening tracker that was reliable, modular, and insightful.
In this version, the data is also all plotted by time of day (instead of mood). Visitors can hover on a circle in the graph to play that song. When a user drags their mouse over the graph, they can recreate a sort of "audio picture" of my day.
Sytem Design
The system design doodle for this project is below. I focused on planning out the React components since I was working with so much data.
Video Demo
Tech Stack
Frontend: React
Backend: Flask
Deployment: Heroku
Database: SQL
Shortcomings
Expensive
Heroku changed their pricing model and I found myself constantly buying add-ons due to the way I set up my project with scheduled tasks and a SQL database. For the next iteration, I wanted to transition to a free hosting version.
Clunky
In a nerdy way, I would mostly show this project to people out in the real world, on my phone. The site was clunky to use on mobile. For the next iteration, I wanted to focus on making this project more enjoyable on mobile. I wanted to be able to scroll instead of click to see new days.
Version 3.0 (current)
And now, the current version - with horizontal scroll!
Frontend
For site visitors, all data can be see with a scroll. Which means this is optimized for mobile. So when I make a new friend and want to share my music taste, I don't have to hover over the person and instruct them on how to view more data.
Backend
And for my wallet, I found a little hobby tier corner in the cloud to host + store all my stuff for free.
I switched to Vercel to deploy the site which means I rebuilt the entire backend data collection pipeline using Next.js.
I switched to PlanetScale to host the SQL database. They have a generous free hobby tier that fit the needs of trudy.tube.
Tech Stack
Frontend: React
Backend: Next.js
Deployment: Vercel
Database: PlanetScale