Frontend Directory Structure

File Structure Principles

• Every component gets its own file(s)
  Except in very limited cases, a given file shouldn't contain more than one component
• Components that use Redux are separated from Stateless components into different folders within client/app/<app_name>
• Reducers are found in client/app/<app_name>/reducers
• Actions that make dispatch calls are found in client/app/<app_name>/actions
• CSS is in client/app/styles
• Within an <app_name> folders group subsections of <app_name> by module/section

A flat file structure (e.g. putting everything into a single /<app_name> folder) can quickly get cumbersome. Instead, it is helpful to group files by their function.

Example

└── client
    ├── app
    │   ├── index.js
    │   ├── <app_name>
    │       ├── index.js
    │       ├── routes.js
    │       ├── constants.js
    │       ├── reducers
    │       │   └── reducer.js  
    │       ├── actions
    │       │   └── index.js  
    │       ├── pages
    │       │   ├── PageUsingRedux.js  
    │       │   └── <subsection_of_app>
    │       │       └── page.js
    │       ├── components
    │       │   ├── Component1.js
    │       │   └── <subsection_of_app>
    │       │       └── Component2.js
    │   ├── pages
    │       └── commonButton.js
    │   ├── components
    │       └── commonButton.js
    │   ├── styles
    │       ├── app.scss
    │       ├── _common.scss
    │       └── <app_name>
    │           ├── _tables.js
    │           └── _<subsection_of_app>.js
    │   └── utils
    │       └── commonFunctions.js
    ├── test
    │   ├── app
    │   ├── data
    └── constants