Reverb uses your most played Spotify songs to quantify your music taste.
Reverb is a web application built to visualize Spotify user and song data. Using Passport.js for Spotify oAuth authentication, Reverb fetches a user's most played songs. A subsequent call to the Spotify API allows for capture of song attribute data, which is visualized on the front-end using Recharts. Built using Express, Sequelize, React, Redux, React-Redux, and Passport, a deployed version of the application can be found at:
http://reverb-music.herokuapp.com/
To install the project, fork the project to your github and clone a copy onto your local machine. Run npm install
to install project dependencies.
In order to make API calls to Spotify endpoints, you'll need to create a Spotify developer account and app (https://beta.developer.spotify.com).
To complete oAuth setup:
- On the Spotify Application develoepr console, you'll be asked to provide a requires input of a redirect URI. For now, enter: http://localhost:8080/auth/spotify/callback.
- Create a file in your main project folder called "secrets.js". Add the following, updating the first two with the credentials you receive from Spotify:
process.env.SPOTIFY_CLIENT_ID = *your client id here*
process.env.SPOTIFY_CLIENT_SECRET = *your client id here*
process.env.SPOTIFY_CALLBACK = "http://localhost:8080/auth/spotify/callback"
You'll need to set up a Postgres database to store users' Spotify data (ids, access tokens, and refresh tokens). If you have postgres installed globally, run the command
createdb reverb
to intialize an empty database.
Once you've completed the above, you're ready to sync your database and start a local server. Run npm start-dev
.
Anjali Merchant
This project is licensed under the MIT License - see the LICENSE.md file for details
A huge thanks to Kate Humphrey, John McDonald, and Leigh Steiner for their help in conceptualizing the approach.