Summary of ideas implemented in the Moon React Project

moon_react_summary.md

/components
    - only global components

/features
    - widgets of the app grouped by domain
    /feature (todo)
        /components
            SomeFeature.jsx (TodoSomeFeature)
            AnotherFeature.jsx (TodoAnotherFeature)
            /bigFeature
                ComponentA.jsx (TodoBigFeatureComponentA)
                ComponentB.jsx (TodoBigFeatureComponentB)
                BigFeature.jsx (TodoBigFeature)
        constants.js
            - define a namespace for this feature
            - define a default state for the feature reducer
        index.js
            - exposes interface for other modules
            - namespace exported elements with the feature name. Example: TodoReducer, TodoConstants, etc
        selectors.js
            - use the feature's namespace to only deal with the state slice that concerns to the feature
            - reuse selectors as much as possible
            - compute data from state as much as possible. State should be simple, clean and without duplication
        state.js
            - actions & reducers
            - use a utility library to help reduce boilerplate
            - namespace actions
        Feature.story.js
            - storybook

/pages
    - main pages of the app
    - structure is:
        Home.jsx (HomePage)
        Todos.jsx (TodoPage)

/provider
    - combines all providers used in the app into a single component

/routes
    - constants
        - define all the routes of the app
    - /components:
        Link.jsx
            - generic link component
        Links.jsx
            - contains all links in the app
        RootRoutes.jsx
            - React Router component with all the mappings
/state
    /middlewares
        composeEnhancer.js: exports a compose function depending on the environment (dev vs prod)
        index.js: export all middlewares ready for comsumption
    constants.js
        - store default state
    index.js
        - exports the store
    reducer.js
        - root reducer for the whole app
    store.js
        - store object ready to use independently of environments 

/translations
    /locales
        en_ca.json
        pt_br.json
    index.js
        - acts as a facade to a third party library
    i18n.js
        - chosen localization library

/utils
    - one function per file
    - use the file system as a way to index and help find stuff