moontahoe/redux-color-wall

A react/redux tutorial app that saves, rates, and organizes colors.

Redux Color Wall

This web app is a place where you can name, save, and rate colors. This is a redux tutorial used in Moon Highway's React/Redux course.

npm Commands

$ npm install -> Installs dependencies

$ npm start -> Builds, runs, and opens app in a browser

$ npm run shallow-test -> Runs unit tests without coverage

$ npm test -> Runs the tests with code coverage

$ npm coverage -> Opens coverage report in a browser

$ npm run lint -> Runs eslint on source javascript files

$ npm run dev -> Runs webpack dev server on port 3333

redux-color-wall's Issues

Isomorphic Rendering

Isomorphic Rendering

Once we have an expres server we need to render the initial state isomorphically.

Add Tests for Components

Add Tests for Components

The components used in this app need to be tested. We need to cover as much as possible about testing React components. Currently we are setup for mocha testing with Istanbul code coverage all supporting ES6 stage 0. Because these files are for a course we need 100% code coverage on all tests. At present mocha is using JSDOM to render components into the document. We need to cover that style of test as well as shallow rendering.

Create Relay Branch

Create Relay Branch

We need a branch of this app that uses relay instead of redux. This will be deigned to teach relay basics.

Incorporate Hot Swapping

Incorporate Hot Swapping

We need to setup a webpack dev server and incorporate hot swapping. The goal of this implementation is for the tutorial. What do we need to cover about a simple wepack dev server and hot swapping? How should we incorporate that and demonstrate it with this code base?

React Animation & CSS

React Animation

We would like to incorporate tutorials for CSS and Animation. First we need to identify the final libraries that we should use for animation and css. Then we need to identify what to cover with that. Once we have identified what we need to cover, we will find a place to enhance this app with those topics.

Possible Animations

• Initial Layout Animation
• ADD_COLOR Animation
• REMOVE_COLOR Animation
• SORT_COLORS Animation

Create React State Branch

Create React State Branch

It may be necessary to create a branch that uses React state management alone instead of redux. This is a good way to teach react state. It is also a good way to start learning React. We can also present single state, passing setState explicitly, and the problems that could be caused if we use these strategies with large scale app development.

APP State

1. Move the state to the APP component
2. Remove Redux
3. Pass state to child components as properties
4. explicitly pass setState down the component tree, or two-way bind events back up the tree

Create Pure Flux Branch

Create Pure Flux Branch

Use this current code base to create a tutorial about pure flux. It is important to cover: actions, payload data, dispatcher, store, and ui components and how all these parts work together with pure flux.

Express Server

Express Server

Currently we are using httpster for the webserver. We need to create an express server and move the state to the server where it can be shared. We should create a RESTFUL API with routes to handle actions for adding and loading colors.

ADD_COLOR

• move the uniqe id generation to the server
• wait for a response from a POST route before dispatching the action on the client

Loading Colors

We need a route for loading colors, instead of initially populating them from state. Initially colors are loaded from web storage, but we can sync them when the load route responds.

Improve Testing for Store Factories and Store Mixins

Improve Testing for Store Factories and Store Mixins

There is a lot going on in the storeFactory file. We need to isolate and test the logger, and saver mixins. We should also test the factory to see if it successfully adds logging and saving when it creates the store.

Possible npm

If there is an easy way to isolate saving and loading to local storage with this factory and mixin we could isolate it and contribute it to npm.

Create Firebase Branch

Create Firebase Branch

Create a branch of this app that works with firebase and either redux or pure react to manage state on the server.

Incorporate Time Travel

Incorporate Time Travel

Let's incorporate time travel and see if we cannot undo and redo these actions. If time travel works we should use ctrl z and ctrl shift z to navigate.