There's a small widget in the About section of my portfolio that shows whatever I'm listening to on Spotify in real time. Hover it and you get the album art, a live progress bar, and the track title scrolling if it's too long. The album art spins. It's a small thing, but it's the detail people mention first. Here's how I built it. --- ## How it works The high-level flow: 1. Spotify's API has a "currently playing" endpoint 2. That endpoint requires an access token, which expires every hour 3. We get a long-lived **refresh token** once (via OAuth) and use it to mint fresh access tokens on the server 4. A Next.js API route handles the token refresh + data fetch on every request 5. The frontend polls that route every 5 seconds using SWR No third-party wrappers. About 100 lines of code total. --- ## Step 1 — Create a Spotify app Go to [developer.spotify.com/dashboard](https://developer.spotify.com/dashboard) and create a new app. Under **Redirect URIs**, add: ``` https://yourdomain.com/callback http://localhost:3000/callback ``` Note your **Client ID** and **Client Secret**. --- ## Step 2 — Get your refresh token This is a one-time OAuth dance. The result is a refresh token you'll store as an environment variable forever. **Build the authorization URL:** ``` https://accounts.spotify.com/authorize ?client_id=YOUR_CLIENT_ID &response_type=code &redirect_uri=https://yourdomain.com/callback &scope=user-read-currently-playing ``` Visit it in your browser, authorize the app, and Spotify redirects to `/callback?code=SOME_CODE`. **Create the exchange-token API route** at `app/api/exchange-token/route.ts`: ```ts import { NextResponse } from "next/server"; export async function POST(request: Request) { const { code } = await request.json(); const authHeader = "Basic " + Buffer.from( `${process.env.SPOTIFY_CLIENT_ID}:${process.env.SPOTIFY_CLIENT_SECRET}`, ).toString("base64"); const response = await fetch("https://accounts.spotify.com/api/token", { method: "POST", headers: { Authorization: authHeader, "Content-Type": "application/x-www-form-urlencoded", }, body: new URLSearchParams({ grant_type: "authorization_code", code, redirect_uri: process.env.SPOTIFY_REDIRECT_URI!, }), }); const data = await response.json(); return NextResponse.json(data); } ``` Your `/callback` page sends the code to this route, receives the `refresh_token`, and displays it. Copy it into `.env.local`: ```bash SPOTIFY_CLIENT_ID=your_client_id SPOTIFY_CLIENT_SECRET=your_client_secret SPOTIFY_REFRESH_TOKEN=your_refresh_token SPOTIFY_REDIRECT_URI=https://yourdomain.com/callback ``` --- ## Step 3 — The Now Playing API route Create `app/api/now-playing/route.ts`. This gets called every 5 seconds by the frontend: ```ts import { NextResponse } from "next/server"; async function getAccessToken() { const basic = Buffer.from( `${process.env.SPOTIFY_CLIENT_ID}:${process.env.SPOTIFY_CLIENT_SECRET}`, ).toString("base64"); const response = await fetch("https://accounts.spotify.com/api/token", { method: "POST", headers: { Authorization: `Basic ${basic}`, "Content-Type": "application/x-www-form-urlencoded", }, body: new URLSearchParams({ grant_type: "refresh_token", refresh_token: process.env.SPOTIFY_REFRESH_TOKEN!, }), }); return response.json(); } export async function GET() { try { const { access_token } = await getAccessToken(); const res = await fetch( "https://api.spotify.com/v1/me/player/currently-playing", { headers: { Authorization: `Bearer ${access_token}` }, next: { revalidate: 0 }, }, ); // 204 = nothing playing if (res.status === 204 || res.status > 400) { return NextResponse.json({ isPlaying: false }); } const song = await res.json(); return NextResponse.json({ isPlaying: song.is_playing, title: song.item.name, artist: song.item.artists.map((a: { name: string }) => a.name).join(", "), albumImageUrl: song.item.album.images[0].url, songUrl: song.item.external_urls.spotify, duration: song.item.duration_ms, progress: song.progress_ms, }); } catch { return NextResponse.json({ isPlaying: false }); } } ``` A 204 means nothing is playing. Anything above 400 is an error. Both return `{ isPlaying: false }` — the widget degrades gracefully either way. --- ## Step 4 — The SWR hook ```bash pnpm add swr ``` Create `hooks/useNowPlaying.ts`: ```ts import useSWR from "swr"; const fetcher = (url: string) => fetch(url).then((r) => r.json()); export function useNowPlaying() { const { data, error } = useSWR("/api/now-playing", fetcher, { refreshInterval: 5000, }); return { isLoading: !data && !error, isPlaying: data?.isPlaying ?? false, title: data?.title ?? "", artist: data?.artist ?? "", albumImageUrl: data?.albumImageUrl ?? "", songUrl: data?.songUrl ?? "", duration: data?.duration ?? 0, progress: data?.progress ?? 0, }; } ``` SWR handles polling, deduplication, and revalidation on focus. You get a fresh snapshot every 5 seconds without any extra work. --- ## Step 5 — The UI ```bash pnpm add framer-motion ``` The widget has two parts: a compact pill (always visible) and a hover card with the full detail. ```tsx "use client"; import { motion, AnimatePresence } from "framer-motion"; import { useState } from "react"; import Image from "next/image"; import { ExternalLink } from "lucide-react"; import { useNowPlaying } from "@/hooks/useNowPlaying"; function SpotifyBars() { return ( {[1, 2, 3].map((i) => ( ))} ); } export default function NowPlaying() { const [open, setOpen] = useState(false); const { isPlaying, title, artist, albumImageUrl, songUrl, duration, progress, } = useNowPlaying(); const isActive = isPlaying && !!title; return (

{open && isActive && ( setOpen(true)} onMouseLeave={() => setOpen(false)} className="absolute left-1/2 top-full z-50 mt-3 w-72 -translate-x-1/2 rounded-xl border border-border bg-card p-3 shadow-xl" >

{/* Spinning album art */} {title}

{title}

{artist}

)}

); } ``` --- ## Details worth mentioning **The progress bar is an approximation.** The API gives a snapshot — `progress_ms` at the time of the request. Between polls, elapsed time isn't tracked. For a portfolio widget this is fine; if you want frame-perfect accuracy you'd calculate elapsed time client-side with `Date.now()` between each SWR refresh. **The spinning album art.** `animate={{ rotate: 360 }}` + `repeat: Infinity` + `ease: "linear"` — one of those details that makes people go _"wait, it spins?"_. Stopping it on hover (`whileHover={{ rotate: 0 }}`) felt natural but I left that out of the simplified version above for readability. **Not playing state.** When nothing's playing or the API returns a 204, the pill shows "Not playing" and becomes non-interactive. No loading spinners, no error states — just graceful degradation. **Why not use `react-icons` for the Spotify logo?** Fewer dependencies. Inlining the SVG path is 3 lines and removes a package from the bundle. --- ## Wrapping up The full source — widget, hook, API route, and callback page — is live at [stephenadeniji.com](https://stephenadeniji.com). Scroll to About to see it. If you build your own version, [let me know on Twitter](https://x.com/steevenadeniji)

How I Built a Spotify Now Playing Widget for My Portfolio