easy-visualify

A web application done as a personal project that visualizes Spotify's Daily Top, Daily Viral, Radar and Weekly Top charts across a world map and along with user's personalized statistics like Most Listened Tracks, Artists, Genre and User Playlists.

Built with a couple of frameworks and tools, some of them are :

• Create React App
• enzyme
• enzyme-to-json
• express
• husky
• MongoDB for database
• react router
• react simple maps
• react chartjs 2
• react modal
• styled components
• styled media query
• Spotify Web API

Hosted on Heroku live.

Setup

1. First Register a Spotify App.
2. Create your own MongoDB cluster in the MongoDB Cloud.
3. Create a simple auth server at a port. Check this repository for a guide. Your server URI can be like this: http://localhost:8888.
4. Add http://localhost:8888/callback as a Redirect URI in your spotify App settings.
5. Fork and clone the repo and use npm install in the root and also in the app/frontend and app/backend directory folder (just in case to prevent breaking!)
6. Create .env files in app/frontend, app/backend and in extractor directory folder based on the example. Add your relevant links like MongoDB cluster url, Auth url and backend url accordingly.
7. To run the extractor
8. First enter into virtualenv by running : source .venv/bin/activate and pip install -r requirements.txt.
9. Make the job.sh file executable by running chmod +x job.sh and then run it to update the mongoDB databases.

Deploying to Heroku

1. Create new Heroku crons for each of frontend and backend of app.
2. Set the Heroku environment variables accordingly. I used a Heroku buildpack Multi Procfile buildpack. To use the same, set the Procfiles in the proper locations and set the required buildpack variables accordingly.
3. Push to Heroku.
4. Add https://yourapp.herokuapp.com/callback as a Redirect URI in the settings of your Spotify application.

License

MIT