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, and
• REACT_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:

• Seed Playlists – Github, deployed.
• Mix Master – Github, deployed.

Otherwise,
Happy Coding and Stay Safe.