SpotifyJam

Come jam with your friends with synchonized Spotify music!

Demo Build: Demo

Make sure to install Redux Dev Tools for time-travel and debugging: Chrome Dev Tools

Tools:

• Visual Studio Code
  • Prettier Plugin
• GitKraken

Frontend Development

cd /spotifyjam/

Run Local Site

1. yarn (install)
2. yarn dev (run)

Deploy Frontend Build

1. npm install -g firebase-tools
2. firebase login
3. yarn build (production build)
4. Remove sourcemap (two ways) either: a. delete the .map b. export GENERATE_SOURCEMAP=false
5. firebase deploy

Backend Development

1.  Install [Heroku CLI](https://devcenter.heroku.com/articles/heroku-cli)
2.  heroku login
3.  heroku git:clone -a spotify-jam

Run Local Server

server

1. cd spotify-jam
2. npm install
3. node server

client

1. cd spotify-jam
2. node test-client.js

Commands (use ">help" for help)

• available
• create test-room
• join test-room
• send hello!

Deploy Server with Heroku

1. Commit and push (master)
2. heroku logs --tail

Deploy Server with Google Cloud & Kubernetes

1. git pull origin master
2. export PROJECT_ID="$(gcloud config get-value project -q)"
3. vi Dockerfile //Edit any build directives
4. docker build -t gcr.io/${PROJECT*ID}/(docker-proj-name):(docker-tag) . *//(docker-proj-name) = spotifyjam_
5. gcloud docker -- push gcr.io/${PROJECT*ID}/(docker-proj-name):(docker-tag) *//push docker build to gcloud_
6. //(port-no) should match the port the server uses, (service-name) = spotifyjam-backend
   • gcloud container clusters get-credentials (service-name) --zone us-central1-a --project ${PROJECT_ID}
   • kubectl run (service-name) --image=gcr.io/${PROJECT_ID}/(docker-proj-name):(docker-tag) --port (port-no)
   • kubectl set image deployment/(service-name) (service-name)=gcr.io/${PROJECT_ID}/(docker-proj-name):(docker-tag)
7. kubectl expose deployment (service-name) --type=LoadBalancer --port (port-no) --target-port (user-port) //(user-port) should match the port the client uses

Managing Packages

(frontend) yarn remove "package-name"

1. rm -rf node_modules
2. npm cache clean
3. yarn (reinstall)

Stack

• React
• React-Redux
• React-Router-Dom
• Redux-Thunk
• React-Router-Redux
• Redux-Persist
• Reselect
• Node with OOP (User/Room Classes)
• Socket.io
• Socket.io Middleware
• Spotify-Web-API-js
• Firebase Hosting
• Google Cloud Kubernetes
• Ant.d UI Library