Web App using Express,React and Spotify API to visualize personal Spotify Data

1. Register a Spotify App in your Spotify Developer Dashboard and add https://localhost:8888/callback as a Redirect URI in the App Settings
2. Create an env file at the root of the project based on env.example and add your unique CLIENT_ID and CLIENT_SECRET from the Spotify Dashboard
3. Ensure nvm and npm are installed globally
4. Install the Correct version of Node

nvm install

5. Install Dependencies

npm install

6. Run the React App on https://localhost:3000 and the Node Server on https://localhost:8888

npm start

1. Create a Heroku app
2. Add your Heroku app as a Git Remote

heroku git:remote -a your-app-name

3. Add https://your-app-name.herokuapp.com/callback as a Redirect URI in your Spotify App's settings

4. In your app's Settings tab in the Heroku Dashboard , add config-vars

   Based on the values in your env file, The CLIENT_ID,CLIENT_SECRET,REDIRECT_URI, and FRONTEND_URI key value pairs . Make sure to replace the localhost URLs with your heroku app's URL

   REDIRECT-URL:https://your-app-name.herokuapp.com/callback
   FRONTEND_URL:https://your-app-name.herokuapp.com

5. Push to Heroku

  git push heroku main