lenmorld / rnw

React and Node workshop: Building a mini-Spotify MusicHub

React + Node workshop

with MongoDB, mLab, SpotifyAPI

We will be building MusicHub

It's a CRUD playlist inspired by Spotify. It uses Spotify's 30-second track embeds, as well as Spotify API for searching.

Preview:

To learn:

Follow the slides workshop at https://github.com/lenmorld/rnw/raw/master/react_node_workshop_slides.pdf and join the Slack channel!

Branching

Workshop starts at branch /dev at Chapter 1 and wraps up at Chapter 7, with finished workshop app at branch /workshop1

Each chapter in the slides is also a branch, e.g. c4.5

Latest updates to the app, most in current development, is at /master

To try/dev:

$ git checkout <workshop1|dev|master|any chapter>

# fork and clone the repo to your local
$ npm install
$ npm start 

# in a 2nd terminal
$ webpack --watch

Slides

Contributing

This repo and the material is being continously developed. To contribute, check out Issues or create a new one, fork repo, and make a PR against this one. Thanks!

rnw's Issues

Chapter 8 - react Portal dialogs

Implement dialogs with React Portals

https://reactjs.org/docs/portals.html

Https://codepen.io/gaearon/pen/yzMaBd

Merge each improvement in c8 and make sure its working

• merge 1 by 1 and make sure working fine at each round
• use a "staging" branch, so master stays 99.99% working
• keep deployed stuff in Heroku updated either from staging or from master

measure performance

prerequisite for #3

react-router history

per c4.8a react-router works with
Link and Route
but doesn't have a history yet

e.g.

HoC and render props

performance issues

searches are very slow

• searching with Spotify
  -- this could be caused by latency in API key requests, and search results turnaround time

• UI loading of each Item very slow
  -- this could be due to frequent re-rendering of Item for EACH and EVERY prop, state change
  ---> use some kind of caching, look into memoization

General React optimization
https://reactjs.org/docs/optimizing-performance.html

separate into 2 workshops: React and Node/mongo backend

each with 3 hours

webpack-dev-server

React Context API

have a chapter on React Context API

• producer
• consumer

Polyfill, transpile, minify, obfuscate?

Browser compatibility
Tooling
Integrate ci/cd

Deploy sample app to heroku

1. DB

• since db is mLab, no need to worry about heroku DB addons

2. domain name

• not needed but cool to have

Node Intro to Web Sockets

web sockets
streaming API - similar to Twitter API sample