How I Built a Spotify Now Playing Widget for My Portfolio

The full walkthrough — Spotify OAuth, a Next.js API route, and a Framer Motion UI that actually feels good.

Why a Now Playing Widget?

I wanted my portfolio to feel alive — not just a static page. Showing what I'm currently listening to adds a personal touch that makes the site more engaging.

Setting Up Spotify OAuth

First, create a Spotify Developer app at developer.spotify.com/dashboard. You'll need:

Client ID and **Client Secret** from your app settings

A **Redirect URI** (e.g. `http://localhost:3000/callback`)

The `user-read-currently-playing` and `user-read-playback-state` scopes

The API Route

The API route refreshes the access token using the refresh token, then fetches the currently playing track:

const { access_token } = await getAccessToken();
const res = await fetch(
  "https://api.spotify.com/v1/me/player/currently-playing",
  { headers: { Authorization: `Bearer ${access_token}` } }
);

The Frontend

Using SWR for polling every 5 seconds and Framer Motion for the animated bars and hover popover. The widget shows the track name, artist, and a spinning album cover on hover.

Result

A living, breathing widget that connects my portfolio to my actual listening habits. Simple to build, great personal touch.