Front-end Folder Structure Guidelines

Current suggestion for folder structure is as such:

public

• Contains static files such as index.html, js library files, images, & other assets

src

• Contains the source code for the project.

src/pages OR src/containers

• Contains the page components.

• Each component can layout component as top wrapper based on current active route.

• I usually use ‘pages’ but I have seen some codebases use ‘containers’.

src/components

• Contains reusable components

src/features

• Contains the Redux-Toolkit logic.

src/shared

• Contains shared utils, etc.

src/tests

• Contains the tests.

Here’s an example of the current dst-seedcalc folder structure:

components/
    Header.js
features/
    filter/
      filterSlice.js
    user/
      userSlice.js
pages/
    Home/
      index.js
      home.css
    Results/
      index.js
      results.css

According to the CRA Redux template (https://github.com/reduxjs/cra-template-redux/tree/master/template), they would have it so that the features folder would have the component relating to the feature in the feature folder. I prefer to keep my components away from Redux logic, but I’m open to the idea.