m0unir / spotify-plus

Spotify Plus is a react web app that connects to your Spotify account and displays your top artists, playlist and tracks adding extra features for sorting & filtering by Date or Audio Features like Tempo & Danceability.

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.

Requirements

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

Installation

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 [email protected]: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

Optional

Fonts

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

Meta tags & Open Graph tags

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

Logging Errors for production

You can use sentry.io to capture errors in production

 REACT_APP_SENTRY_API_KEY="ADD_YOUR_SENTRY_API_KEY"