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

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.

src/pages/ComponentName/ComponentName.js

Contains the logic for the main component container

src/pages/ComponentName/SubComponentName/SubComponentName.js

Contains the logic for any component specific to the parent component

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.