I decided to make a microsite that displays what I’m currently listening to on Spotify.
I’m constantly sharing Spotify links with friends so they can hear what I’m into. So I decided to build a single page website that updates in real time with whatever I’m listening to on Spotify. It was a refreshing change of pace to design without stakeholders, and it gave me the freedom to focus on exactly what I wanted the site to be.
I created a feedback loop of code with ChatGPT.
Since I had never used React before, I built a feedback loop with ChatGPT: I’d describe what I wanted to build, get generated code, drop it into my framework, run into errors, and then send the code and the errors back into ChatGPT. I repeated this over and over, letting the tool not only teach me React in real time but help me debug and course correct. I was able to run the site locally using the Spotify API to display the album artwork and track title of whatever I was currently listening to. I added a small avatar that would spin while music was playing, and made the song title clickable so people could jump directly to the track on Spotify. I wanted the interface to feel more alive, so I started exploring noise shaders to give the site a subtle CRT TV effect. Incorporating the shader was my biggest challenge. It completely distorted the album artwork in the scene. I could have scrapped the effect, but it was a detail I was committed to getting right. I ended up stepping away from ChatGPT and debugged the issue on my own. Once the site was live, I started projecting it onto the wall in my studio as a kind of ambient display. It added a subtle atmospheric layer to the space, with the track info floating alongside the music playing in the room. I’m still exploring what this type of site could evolve into. I experimented in TouchDesigner to create an audio-reactive effect, where CRT-style scanlines would bounce to the beat of the music. Unfortunately, the Spotify API doesn’t provide real-time BPM data, which limited how far I could take that idea on the web. All Work