https://github.com/bchiang7/spotify-profile

A web app for visualizing personalized Spotify data built with React, Express, and the Spotify API
https://github.com/bchiang7/spotify-profile

express nodejs reach-router react spotify-profile spotify-web-api styled-components

Last synced: 11 days ago
JSON representation

A web app for visualizing personalized Spotify data built with React, Express, and the Spotify API

• Host: GitHub
• URL: https://github.com/bchiang7/spotify-profile
• Owner: bchiang7
• Created: 2018-06-28T02:53:16.000Z (almost 6 years ago)
• Default Branch: main
• Last Pushed: 2023-01-04T01:22:59.000Z (over 1 year ago)
• Last Synced: 2024-02-27T03:39:01.207Z (4 months ago)
• Topics: express, nodejs, reach-router, react, spotify-profile, spotify-web-api, styled-components
• Language: JavaScript
• Homepage: https://spotify-profile.herokuapp.com/
• Size: 4.5 MB
• Stars: 601
• Watchers: 5
• Forks: 80
• Open Issues: 31
• Metadata Files:
  • Readme: README.md

Lists

• awesome-stars - bchiang7/spotify-profile - A web app for visualizing personalized Spotify data built with React, Express, and the Spotify API (JavaScript)
• awesome-stars - bchiang7/spotify-profile - A web app for visualizing personalized Spotify data built with React, Express, and the Spotify API (JavaScript)

README

        
# Spotify Profile

> A web app for visualizing personalized Spotify data

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

- [Spotify Web API](https://developer.spotify.com/documentation/web-api/)

- [Create React App](https://github.com/facebook/create-react-app)

- [Express](https://expressjs.com/)

- [Reach Router](https://reach.tech/router)

- [Styled Components](https://www.styled-components.com/)

## Setup

1. [Register a Spotify App](https://developer.spotify.com/dashboard/applications) and add `http://localhost:8888/callback` as a Redirect URI in the app settings

1. Create an `.env` file in the root of the project based on `.env.example`

1. `nvm use`

1. `yarn && yarn client:install`

1. `yarn dev`

## Deploying to Heroku

1. Create new heroku app

   ```bash

   heroku create app-name

   ```

2. Set Heroku environment variables

   ```bash

   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

   ```bash

   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