Skip to content

React Spotify Player

Shows what you're playing on Spotify, in a few small React files.

2019

View on GitHub →Read why I built it

React Spotify Player shows what you're listening to on Spotify: the album art, the track and artist, and a progress bar that moves along with the song. I built it in 2019 for a tutorial on building a Spotify player with React in 15 minutes, and it's still my most-starred open source project.

I'd been using the Spotify API for my MagicMirror, and I wanted the shortest path from nothing to a working player for front-end developers: log in with Spotify, call one endpoint, show the result. It's still small on purpose. The current version is just React and Vite, and the whole app fits in a handful of files.

If you're following the tutorial today, one warning: it logs in with Spotify's Implicit Grant flow, which Spotify deprecated in November 2025. New apps should use the Authorization Code flow with PKCE instead.

Try it

git clone https://github.com/JoeKarlsson/react-spotify-player.git
cd react-spotify-player
# add http://localhost:3001 as a Redirect URI on your Spotify app,
# and put its Client ID in src/config/spotify.js
npm install
npm run dev

How it's made

React · Spotify API · JavaScript

The login link sends you to Spotify, and Spotify sends you back with an access token in the URL, which the app keeps in your browser. Every 5 seconds it asks the Web API's /me/player endpoint what's playing, and when the token expires it asks you to log in again.

LOGIN WITH SPOTIFY a link in the app SPOTIFY ACCOUNTS you approve 3 scopes THE PLAYER keeps the token in your browser token in the URL SPOTIFY WEB API GET /v1/me/player every 5 s back: track, artist, art, progress 401: log in again
LOGIN WITH SPOTIFY a link in the app SPOTIFY ACCOUNTS you approve 3 scopes back with a token THE PLAYER keeps the token in your browser every 5 s track, artist, art, progress SPOTIFY WEB API GET /v1/me/player Dashed: on a 401, log in again
Get the code on GitHub →Read why I built it

If you liked this project, consider sharing it on Hacker News, Bluesky, LinkedIn, or X.

← All works