rdwoodring / seven-degrees-of-staind

A web app that classifies music as "butt rock" based on it's proximity to Staind in the Spotify related artists API.

Seven Degrees of Staind (Butt Rock Classifier)

At work, we got tired of arguing over which bands were or were not butt rock, so we wanted an objective way to make the determination. Everyone could agree that Staind was the epicenter of butt rock, so this app uses Spotify's Related Artist API to build a tree of related artists seven degrees out from Staind to classify what's butt rock.

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisites

You will need to install a copy of Node.js to run this project. Download the appropriate installer for your system and follow the installation wizard. Note that the project was built using Node 10.15, though it probably should work on later versions and maybe on older versions.

You will also need to have either NPM or Yarn installed. NPM comes packaged with Node.js so you'll get that for free by installing Node.js. If you want to use Yarn download the appropriate installer and follow the installation wizard. Yarn should work fine, but note that the project was developed using NPM and the instructions are based on NPM.

Finally, you will need an instance of MongoDB. You can probably use one of Mongo's free cloud instances, but the project was developed using a copy of MongoDB locally. MongoDB is primarily used for secure, server-side storage of session data so that the access token and refresh token returned from Spotify don't have to be stored client-side in something like a cookie.

Installing

1. Clone the repository
2. Install all dependencies in the project root by running npm install
3. Create a dotenv file named ".env"
4. Login to your Spotify account and get an API key
5. Add CLIENT_ID=your_spotify_app_client_id to your .env file
6. Add CLIENT_SECRET=your_spotify_app_client_secret to your .env file
7. Add SESSION_SECRET=a_strong_random_string to your .env file
8. Add DB_CONN_STRING=my_db_connection_string to your .env file. If you installed MongoDB locally, the connection string will look something like this: mongodb://localhost:1234/my-seven-degrees-of-staind-dev-db-cluster
9. Run mongod --dbpath='path/to/your/data/directory'
10. Run npm run watch to compile the TypeScript server and client code into JavaScript that Node can run. This command runs the server behind nodemon so the server gets restarted on all changes and also ensures that the client code gets re-overlayed on all changes.
11. Import the butt rock related artists graph into your database

You should now be able to access the app on localhost:3000.

Importing Butt Rock Artists

There are two ways you can get some butt rock related artists imported into your development database:

Import Manually Using a Pre-built Related Artists JSON

1. Download the related.json file from the gist. This file was generated from a recent import done during development.
2. Place it in the root of Seven Degrees of Staind project
3. Ensure that mongod is running
4. Run the mongoimport --uri ${process.env.DB_CONN_STRING} --collection relatedartists --drop --jsonArray --file ./related.json command from the root of your Seven Degrees of Staind project.

Import Using the Import Scripts

1. Ensure that your TypeScript has been compiled to JavaScript.
2. Ensure that mongod is running
3. Run the node ./server/dist/scripts/cron/updateButtRockGraph from the root of your Seven Degrees of Staind project.

Deployment

1. Clone the code to the production VM
2. TODO: add node and apache install instructions
3. TODO: add and enable the site instructions
4. Add CLIENT_ID=your_spotify_app_client_id to your .env file
5. Add CLIENT_SECRET=your_spotify_app_client_secret to your .env file
6. Add SESSION_SECRET=a_strong_random_string to your .env file
7. Add DB_CONN_STRING=my_db_connection_string to your .env file. If you installed MongoDB locally, the connection string will look something like this: mongodb://localhost:1234/my-seven-degrees-of-staind-prod-db-cluster
8. Start mongo by running mongod --fork --dbpath ~/data/db
9. Go to the site directory (var/www/butt-rock.com/html/nodejs)
10. Install pm2 by running npm install pm2 -g
11. Run sudo pm2 start bin/www --watch --name butt-rock
12. Run sudo pm2 startup
13. Copy and paste the output of the startup command and run it
14. Run sudo pm2 save to complete the process of daemonizing the app

Built With

• Node.js - Web framework
• NPM - Dependency Management
• TypeScript - JavaScript... but with type safety!
• React - Fast and straightforward UI library
• MaterialUI - UI components library
• Express - Server framework
• MongoDB - Persistent server-side storage

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests.

Versioning

This project adheres to semantic versioning.

Authors

• Ryan Woodring - Initial work - rdwoodring

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.txt file for details

Acknowledgments

TODO

seven-degrees-of-staind's Issues

Create README.md

Update build process to watch server and client and serve up physical files that express can serve

Migrate proxied server requests over to use Axios

Fix server routing so that the "main" router matches all unhandled routes

Add Material UI library support

Add React Router

Create a HeroCard Logged In Presentation

Add read me explaining how to stand up the app

Hoist navbar out of home

Run Create React App Typescript

Fix server so that the main router with the "splat" is the last middleware registered

Update react to 16.x.x

Delete the "views" folder

Upgrade to MaterialUI 4.x.x

Add a "login" button to the NavBar presentation when not logged in

Create Home Container

Send the user to a logout page when logged in and the logout button is pressed

Create a 403 Component

Create a withMustBeLoggedInToView HOC

Create a HeroCard container

Add a "logout" button to the NavBar prsentation when logged in

Need an endpoint for users to "logout" and remove their access token cookie

Add ability to "listen" to a song and identify it as butt rock or not

Convert the server to Typescript

Should be a graph feature showing the graph of everything that is butt rock emanating out from Staind--the source of all butt rock

Create a 403 Presentation Component

Create an HOC to provide info about the current login state of the app

Create a search route in the UI app

Create a Search component (page)

Create a SearchPresentation component

Automatically refresh the access token using the refresh token if the accessToken is expired

Add a "Butt Rock" toxicity meter based on the user's recently played songs

Send the user to the login page when not logged in and the login button is pressed

Create a 403 route in the UI app

Hitting the API with a malformed request isn't properly handled

Steps to Reproduce:

1. Navigate to YOURBUTTROCKINSTANCE.com/api/v1/search?artist=iron%0boss

Expected Result
Should get a 400 bad request error because of the malformed '%0'

Actual Result
The page hangs and doesn't receive a response from the server, resulting in an eventual 504 Gateway Timeout instead.

Create a cookies class to read and write cookies

Create Typescript React Client side

Umbrella issue to track all the work going into standing up the client side of the app

• #19
• #20
• #21
• #22

It should throw a 403 error if a refresh token request fails

Implement Home Container in App

API requests should check to see if the user has an active Spotify API Token and automatically request a refresh token if possible

API requests should throw a 403 if the user does not have a Spotify API token saved in a cookie

Update/Remove Dependencies with Vulnerabilities

Create CONTRIBUTING.md

Create LICENSE.md

Create NavBar Component

• #40
• #41
• #42
• #43
• #44
• #45
• #46

Create a NavBar Presentation

Create Home Presentation

Wrap NavBar Container in isLoggedIn

Create a HeroCard Logged Out Presentation

Gut CRA boilerplate