Skip to content

Instantly share code, notes, and snippets.

@michaelrambeau
Last active July 15, 2017 04:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save michaelrambeau/5f12e64296f6f06041d9e1bf9b421683 to your computer and use it in GitHub Desktop.
Save michaelrambeau/5f12e64296f6f06041d9e1bf9b421683 to your computer and use it in GitHub Desktop.
How the web application `bestofjs-webui` works

BestOfJS Overview

bestofjs-webui is a Single-Page-Application made with React, Redux for the state management, and React-Router.

It can be hosted on any static hosting server.

We use GitHub pages for the production version to take advantage of js.org domain.

Start up

Data comes from a JSON file, hosted on Firebase.com, built every day by a CI server.

https://bestofjs-api-dev.firebaseapp.com/projects.json

When the application starts, we make a GET request to this URL and we dispatch an action 'FETCH_PROJECTS_SUCCESS' when we get data.

Data is processed by a reducer, the entities branch of the state is created.

As much as possible, we try to make the state the "single source of truth".

Every time we need something that can be computed from the state, we use selectors (see Reselect) library but we don't update the state.

State

To inspect the state and to see how actions update the state, Redux DevTools chrome extension is recommended.

{
  "entities": {    
    "projects": {
      "angular": {},
      "react": {}
    },
    "tags": {
      "framework": {},
      "test": {}
    }
  },
  "auth": {
    "username": "michaelrambeau",
    "name": "Michael Rambeau",
    "user_id": "github|123456",
    "myProjects": []
  },
  "ui": {
    
  }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment