Deployed at: https://spotify-metadata.netlify.app/.
Spotify has some very interesting data that they've got going on in their backend (over 4000 micro-genres!). This is a website that lets you explore that data.
The site calls on the Spotify API to display playlists, top tracks and top artists of a logged-in user across different time-periods, as well as the associated metadata for each.
It is built with React, and styled using Material-UI. Requests are done using axios, and Spotify-auth is done completely client-side using the Client Credentials Authorisation Flow.
Note that this site is a conversion of a previous project from Vanilla JS to React. The original project can be found in the project branch called vanilla-javascript.
- Display Top-Tracks and Top-Artists of a logged-in user across different time-periods.
- Choose a playlists from followed playlists.
- View genres and audio-features/metadata of individual tracks on the above pages.
- Get audio-features/metadata for individual tracks, and playlists.
- Get a hipster rating (popularity average) for your top artists.
If you want to set up your own copy of this site, run npm i after cloning, and create a .env file in the root directory (or set it in your local environment) with your Spotify ClientID and a callback URI, with the names:
REACT_APP_SPOTIFY_CLIENT_ID2, andREACT_APP_SPOTIFY_CALLBACK_URI.
Your Spotify ClientID can be found by registering your app.
If interested, other Spotify-based sites that I've written are:
Otherwise,
Happy Coding and Stay Safe.