Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/danydodson/spot-tops-client
🎶 A web app for visualizing personalized Spotify data.
https://github.com/danydodson/spot-tops-client
Last synced: about 6 hours ago
JSON representation
🎶 A web app for visualizing personalized Spotify data.
- Host: GitHub
- URL: https://github.com/danydodson/spot-tops-client
- Owner: danydodson
- Created: 2023-12-24T22:12:58.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2023-12-27T00:21:05.000Z (11 months ago)
- Last Synced: 2023-12-28T00:30:19.387Z (11 months ago)
- Language: JavaScript
- Homepage: https://spot-tops.com
- Size: 1.48 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Spotify Tops (client)
## Details
[spot-tops.com](https://spot-tops.com) is a web app for visualizing personalized Spotify data.
- View the [client](https://github.com/danydodson/spot-tops-client).
- View the [server](https://github.com/danydodson/spot-tops-server).
- The client side of this app is currently hosted on [netlify](https://app.netlify.com/sites/spot-tops-client/overview).
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/)
## Guides
SPOTIFY WEB API AUTHORIZATION CODE FLOW
- [authorization-guide](https://developer.spotify.com/documentation/general/guides/authorization-guide/)
- [web-api-auth-examples](https://github.com/spotify/web-api-auth-examples)
## 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
10.13.0