...

Manifold is a front end single page application (SPA). The pico engine is the backend, supplying information about the IoT things an owner cares about.

Chrome DevTools

We use many different packages in Manifold, which will be explained in the sections below. There are also many different developer tools that have chrome extensions to debug easier. Here are the different extensions we recommend installing to make your life easier:

1. React Developer Tools (This allows you to not inspect the page as html, but as the react components that the page was rendered from)
2. Redux DevTools (This allows you to view the redux store and see the actions dispatched as they happen, as well as seeing how it affects the store from running the reducers)
3. Clear Session (This is useful for quick logout, but was more helpful when we were debugging the login process itself. Now it is more optional)

One important note: Redux DevTools requires a code modification in order to allow the browser to freely view the redux store. The code is located in index.js:

const store = createStore(
  reducers,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),//this line enables Redux DevTools
  applyMiddleware(promise, sagaMiddleware)
)

CoreUI

To jumpstart our project and avoid having to write everything from scratch, we found a bootstrapped boilerplate project that came with the general look and feel we want for Manifold (minus the functionality of course). CoreUI is a free template for a general use, admin style web app. It comes written using many different options of JavaScript framework libraries, such as React.js, Angular 2+, Vue.js, and Angular. We decided to use React.js to take advantage of React Fiber (React v. 16.0.0), which has high speed and performance. There is no other real reason for why the other options would not have worked, (except Angular 1, which is deprecated). Here is the github repository for CoreUI: https://github.com/coreui/coreui-free-bootstrap-admin-template.

...