Spotify Visualization

This app is a visualization of how Spotify relates artists. I'm currently looking for a new position in the greater puget sound region - Hire me!

---

Demo

You can test a fully working live demo at https://spotify-related.now.sh/

---

Major features:

• Search Spotify for Artists
• Visualize connections between artists as a force tree
• Drag & Zoom visualization
• Double click on an artist in the visualization to grow the tree

---

Built with

React

React makes it really easy to focus on the view in a declarative way. I like that it makes it easy to write composable, testable UI.

Redux

Redux is where the fun is at. Maintain a flat minimal state, with dictionary of normalized objects. I use reselect to compute derived data. Redux devtools are also great, I kept it enabled on production for anyone wanting to easily take a look at the app's state.

Webpack 2

Fantastic code bundler once you get past the learning curve. I use it for a number of things including: transpile ES2015+ javascript to ES5 with Babel, compile Sass into css, optimize assets, hot reload code, build minimized split production code, + more.

Express

It's nice to have JS everywhere. Express is fast and minimal. The backend is pretty simple with a router, and handling logging into Spotify via OAuth 2. Logging handled by winston.

Jest

Unit tests run by Jest. If you haven't seen Jest recently, you should take another look. Enzyme is used for React support and SuperTest is used for HTTP assertions. Enzyme-to-JSON is also great and worth checking out in conjunction with the other test utilities.

SemaphoreCI

Continuous integration handled by the super fast SemaphoreCI. Passing merges to master are auto deployed with help from pm2.

---

Setup

npm install
touch ./src/server/env.json
# edit env.json with spotify info as below
npm run dev

in ./src/server/env.json:

{
  "s_client_id": "your client_id",
  "s_client_secret": "your client_secret",
  "s_redirect_uri": "http://localhost:8888/callback"
};