Skip to content

Latest commit

 

History

History
58 lines (36 loc) · 1.86 KB

README.md

File metadata and controls

58 lines (36 loc) · 1.86 KB
Raw

Spotify Profile App

Spotify Profile cover photo

Web app that utilizes the Spotify API to display the user's Spotify profile data, such as top artists, top tracks, and recently played tracks. Allows the user to filter top artists and top tracks based on different time intervals, such as this month or all time.

Local Installation & Set Up

  1. Register a Spotify App in your Spotify Developer Dashboard and add http://localhost:8888/callback as a Redirect URI in the app settings.

  2. Create a .env file at the root of the project based on .env.example and add your unique CLIENT_ID 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 http://localhost:3000 and the Node server on http://localhost:8888

    npm start

Deploying on Heroku with Git

  1. Create a Heroku app

  2. Add your Heroku app as a git remote

    heroku git:remote -a your-app-name

  3. Add http://your-app-name.herokuapp.com/callback as a Redirect URL 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_URI: http://your-app-name.herokuapp.com/callback
FRONTEND_URI: http://your-app-name.herokuapp.com

  1. Push to Heroku

    git push heroku main