This is a tutorial for my show & tell in the MLH Production Engineering Fellowship.
- Go to the Spotify API console and login with a Spotify account.
- Create a new application. You'll see you Client_id and Client_secret credentials, will need them later.
- Go to the app settings and add to Redirect URI's the url: http://localhost:3000/home and save it.
- Create a .env file in the root directory and add the following with your corresponding credentials:
REACT_APP_CLIENT_ID=<your-client-id>
REACT_APP_CLIENT_SECRET=<your-cliend-secret>
REACT_APP_REDIRECT_URL=http://localhost:3000/home- After pulling the repo you should do right away
npm install
In case you get lost at some point of the tutorial I've created some checkpoint branches which you can change to to keep up with the tutorial. This checkpoints are the following branches:
- base: from here you can start the tutorial. It has a clean starting point.
- 1-login: Up to here we have a basic routing, with pages Home and Login.
- 2-access-token: Up to here we are able to catch the access_token that the Spotify Auth returns. It is needed to make requests to the Spotify API.
- 3-axios-request: Up to here we have requests to the Spotify API to bring our Spotify profile info, our top songs, top artists, and top playlists and are able to log in in the console.
- 4-display-data: Up to here we have a great UI to present the data we've collected.
