https://github.com/clicktodev/spotify-profile
A web app for visualizing personalized Spotify data built with React, Express, and the Spotify API
https://github.com/clicktodev/spotify-profile
Last synced: 11 months 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/clicktodev/spotify-profile
- Owner: clicktodev
- License: mit
- Created: 2022-07-16T11:56:42.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2023-06-06T12:29:46.000Z (about 3 years ago)
- Last Synced: 2025-07-15T05:43:52.546Z (11 months ago)
- Language: JavaScript
- Homepage: https://spotify-profile.herokuapp.com/
- Size: 1.48 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Spotify Profile
> A web app for visualizing personalized Spotify data
This project was forked from [Spotify Profile by Brittany Chiang](https://github.com/bchiang7/spotify-profile).
Changes from the original fork:
- Moved from Reach Router to React Router
- Updated dependencies to latest versions
- Rewrote deprecated code
- Moved server state management to React Query
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/)
- [React Router](https://reactrouter.com/en/main)
- [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. `npm install && npm run client:install`
1. `npm run 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