Spotify Plus

Check it out!

Spotify Plus is a web app clone of your spotify profile that adds additional features to help visualize personalized Spotify Data. Login with your spotify account and get extra stats like:

• Sorting your favorite tracks by Special Audio Features like Loudness, Dancebility, Tempo, Energy & more.
• Filtering your top artists or top tracks by time.

• Spotify Account
• Node, Express, Heroku
• React, React Router, React Hooks, Styled Components

1. Got to Spotify Developer Dashboard and "Create a new App". Then add http://localhost:8080/redirect_callback as a Redirect URI in the app settings

2. Clone the app (or download a zip whichever you prefer)

    git clone git@github.com:M0unir/spotify-plus.git

3. Make sure you have nvm and yarn installed globally

4. Install the node version specified in the provided .nvrmc file

    nvm install

5. Install project dependencies

    yarn install

6. Rename .env.example to .env, then replace CLIENT_ID & CLIENT_SECRET with your own credentials from your Spotify Dashboard.

7. Rename client/.env.development.example to client/.env.development

8. Run the project (This will run both the server & the client)

    yarn start

If you have Circular Fonts (used by Spotify) you could add them to public/fonts/Circular/. Then change this in client/.env.development or client/.env.production:

 REACT_APP_USE_CIRCULAR_FONTS=true

You could either set your %PUBLIC_URL% in client/public/index.html manually or for a more dynamic approach, from the docs, set the homepage key to your published app url

 {
  "homepage": "https://example.com",
 }

It is also possible to set PUBLIC_URL in your production environment or prepend it to your build command:

 PUBLIC_URL="https://example.com" yarn build

You can use sentry.io to capture errors in production

 REACT_APP_SENTRY_API_KEY="ADD_YOUR_SENTRY_API_KEY"