I've always loved exploring cool visualizations of information that was otherwise hard to understand and consume. This time, instead of just exploring I decided to create one for myself.
In order to do so, I decided to use p5.js for the visualization givens its easy integration with the next.js framework. I further integrated p5.js with the Spotify API in order to use and retrieve playlist song data from any distinct logged in user.
Using next.js and tailwind CSS, I created a modern and responsive website to display the visualization with interactive components such as changing the background, comparing the current playlist with an "average" playlist,
zooming in/out, and downloading the image as a PNG file. (1) Here I use the Spotify Authentication flow along with NextAuth in order to retrieve user-specific spotify playlist data upon login.
(2) Once the user is logged in, the user gains access to a list of all unique playlists on the top left drop down. Clicking the blue visualize button will display a beautiful spirgraph where each detail corresponds to some averaged playlist data
including but not limited to "danceability", "tempo", "duration", "energy", "valence", "loudness", and "key". Since the project required passing song data through down different levels, I decided to use recoil for it's simplified state management, that allows me to
call and retrieve song data in any level.
(3) You can also change the background color too!
(4) Clicking on the graph button on the top left will allow you to graphically compare your current playlist against an "average" playlist
in terms of some of the metrics used to create the visualizations.
If you've read this far, thank you so much for following along and feel free to check it out at
spirofy.com or give me feedback!
,
Tailwind CSS 
,
Next.js 
,
p5.js,
Spotify API,
Recoil,
Figma 
,
