Spotify Tops (client)

Details

spot-tops.com is a web app for visualizing personalized Spotify data.

• View the client.
• View the server.
• The client side of this app is currently hosted on netlify.

Built with a bunch of things, but to name a few:

• Spotify Web API
• Create React App
• Express
• Reach Router
• Styled Components

Guides

SPOTIFY WEB API AUTHORIZATION CODE FLOW

• authorization-guide
• web-api-auth-examples

Setup

1. Register a Spotify App and add http://localhost:8888/callback as a Redirect URI in the app settings
2. Create an .env file in the root of the project based on .env.example
3. nvm use
4. yarn && yarn client:install
5. yarn dev

Deploying to Heroku

1. Create new heroku app

   heroku create app-name

2. Set Heroku environment variables

   heroku config:set CLIENT_ID=XXXXX
   heroku config:set CLIENT_SECRET=XXXXX
   heroku config:set REDIRECT_URI=https://app-name.herokuapp.com/callback
   heroku config:set FRONTEND_URI=https://app-name.herokuapp.com

3. Push to Heroku

   git push heroku master

4. Add http://app-name.herokuapp.com/callback as a Redirect URI in the spotify application settings

5. Once the app is live on Heroku, hitting http://app-name.herokuapp.com/login should be the same as hitting http://localhost:8888/login

   10.13.0