(Code organization for the client)


The main file is src/App.jsx, it is used both by SSR (expressjs http server) and the browser. The file src/index.jsis only used by the browser.


The routing is declared in src/modules/routing and indicates which «Scene» to render. All the Scene are in src/scenes/.

e.g src/scenes/Timeline


The layouts represent the page according to the context, the login form has a different layout as the timeline…

e.g. src/layouts/Settings


The business logic is in those modules: src/modules/. It is organized by domain and are not directly coupled so a module can be completely mocked or replaced.

e.g. src/modules/contacts

Inside a module

A module has always the same architecture but all are optionnal except the index:

Redux actions

The API of a redux action is a function that can return an object that redux can read, a function or a Promise (cf. thunk and Promise middlewares).


// this a simple action cf.
const requestContactsBase = {
  type: 'requestContacts',
  payload: {},
// this is a «thunk action» that can chain multiple actions cf.
export const requestContacts = () => (dispatch) => dispatch(requestContactsBase);


This the implementation of redux using «Ducks: Redux Reducer Bundles», a modular organization of redux

e.g. src/store/reducer.js


Each reusable component without business logic is in src/components/.

e.g. src/components/Button

Other «main» directories

Those directories requires to be refactored because of the legacy code that can be in there. The best example is src/services/ that should be splitted in multiple modules.