// the find
bchiang7/spotify-profile
A web app for visualizing personalized Spotify data built with React, Express, and the Spotify API
A reference implementation showing how to wire up the Spotify Web API OAuth flow with a React front end and a small Express server handling the token exchange. Useful for anyone who wants a concrete example of building a Spotify-data dashboard (top artists, top tracks, playlists, audio-feature charts) rather than reading API docs in the abstract.
The OAuth/token-refresh split between client and server is a genuinely useful pattern to copy if you're scared of exposing your Spotify client secret in the browser. The styled-components setup (theme.js, mixins.js, media.js) is a clean example of a themed design system without a CSS framework. FeatureChart.js is a nice, self-contained example of turning Spotify's audio-features endpoint into an actual radar/bar visualization instead of just dumping JSON.
It's built on Create React App, which the React team stopped recommending and which gets zero security updates at this point — anyone starting fresh from this template inherits that debt on day one. It uses Reach Router, a library that was deprecated and folded into React Router years ago, so you're learning routing patterns that are already dead ends. The deploy instructions are Heroku-specific and Heroku's free tier is gone, so that section is mostly non-functional as written. No CI, no meaningful tests (just the CRA boilerplate App.test.js), and it hasn't been touched since January 2023, so it predates Spotify's November 2024 API deprecations (audio-features and related-artists access got restricted for new apps) — expect some of these calls to just fail for a new app registration.