Spotify Now Playing Case Study

I'm a big music and podcast listener, so I wanted to build something around the data generated by what I listen to every day.

Spotify Now Playing is a personal listening-data application that connects to the Spotify API and displays what I'm currently listening to, including both music and podcasts. What started as a simple Now Playing widget has become the foundation for a larger project around managing and exploring my personal listening data, with plans to add features such as playlists, listening history, and other ways of interacting with that data.

The initial idea was simple: connect to Spotify and display whatever I'm currently listening to.

The interesting part was everything around that request.

Spotify's API requires authentication, but I didn't want every visitor to my portfolio to go through Spotify's authorization flow just to see what I was listening to. The application needed to authenticate specifically against my Spotify account, retrieve my listening data securely, and then expose only the information needed by the frontend.

This was also my first time working with backend-related functionality. I needed to understand how to introduce a server-side layer into a frontend application, handle Spotify authentication and token refreshes, and deploy that functionality alongside the application.

There was also the question of keeping the displayed information up to date without constantly making requests to the Spotify API.

I built the application with Nuxt 2, JavaScript and SCSS, using the Spotify Web API as the data source and Vercel for deployment.

The frontend communicates with a custom server-side proxy rather than directly handling the Spotify authentication flow. The proxy manages authentication specifically for my Spotify account and handles the communication with Spotify's API before returning the relevant playback data to the frontend.

This allowed me to build the experience around my own listening data without requiring visitors to authenticate with their own Spotify accounts.

The application retrieves my current playback state and displays the relevant information for both music and podcasts. When there isn't an actively playing track, the application can fall back to my recent listening activity rather than leaving the widget completely empty.

I also implemented periodic polling so the displayed information stays reasonably current without continuously requesting the Spotify API.

This project was my first real introduction to handling backend functionality as part of a frontend application.

Rather than exposing Spotify authentication directly to the client, I created a proxy layer responsible for communicating with Spotify and managing the authentication required to access my account's listening data.

One of the challenges was working with Spotify's short-lived access tokens. The proxy handles the authentication lifecycle so the application can continue retrieving my listening data without requiring me to repeatedly authorize the application.

This gave me practical experience with concepts I hadn't previously worked with extensively, including server-side API requests, authentication flows, access tokens, refresh tokens, and environment-based configuration.

The application periodically checks Spotify's playback state and updates the UI when my listening activity changes.

The polling interval was designed to balance freshness with API usage. The goal wasn't to request data continuously, but to make the Now Playing experience feel current while keeping the number of API requests reasonable.

The application also handles different playback states, including active songs, podcasts, and situations where there is no current playback.

Because the application is permanently embedded in my portfolio, reliability was an important consideration. It needs to continue working even when I'm not actively thinking about it.

The application has now been running on my portfolio for over a year with no maintenance, continuing to retrieve and display my listening data without requiring manual intervention.

That longevity was particularly valuable for me because this was one of my first projects involving backend functionality. It gave me practical experience taking an application beyond simply getting an API integration working locally and actually deploying and maintaining a small full-stack system.

Spotify Now Playing started as a small personal experiment and became my first project where I had to work across both frontend and backend concerns.

It gave me hands-on experience with third-party API integration, authentication, token management, server-side proxying, API polling, deployment, and handling real-world application states.

Most importantly, it has continued running on my portfolio for over a year without maintenance, while giving me a foundation to expand the project into a broader tool for managing and exploring my personal music and podcast listening data.