File Structure

Understanding File Structure

Starting with a good folder structure, especially when working on large applications is very important for the developer experience,

Top-Level Directory Dtructure

.
├── api           # Contains the fake backend Api mock data and config
├── assets        # Contains app assets (images, icons and custom fonts file)
├── config        # Dev tools configuration
├── docs          # application documentation
└── src           # Application main Source Code directory

Application File Structure

The starterKit use a pattern that group files by domain where all files corresponding to a business domain are in the same directory. Here is the example of SignIn page file structure:

.
├── ...
├── SignIn             # Contains all files related to SignIn page UI and logic
│   ├── __tests__      # Unit tests and integration of the display the screen, its components and behavior
│   ├── behavior.js    # Screen behavior (actions and action creators ans reducers)
│   ├── index.js       # Export default screen component
│   ├── SignIn.js      # Main screen UI component
│   ├── selectors.js   # Selectors from Redux State
│   └── styles         # Styles used for displaying this scree
└── ...

Test File Structure

The automated tests are placed in the tests directory of each screen / component.

Unit and integration tests are placed directly in the tests folder

Snapshots Jest tests (rendering tests of a screen / component against a snapshot) are placed in the snapshots subfolder