How to organize your project's folders - A quick guide to repository and folder structures.

Depending on your objectives and needs, there are many ways of organizing a project in React. But some patterns are considered best practices; here, I'll explain a few.

Atomic Design.

Atomic Design is a concept introduced by Brad Frost, and it's a methodology to build consistent and reusable design systems, especially in web interfaces.

Atoms

Atoms are the basic building blocks in this methodology. They're the smallest possible components, like form labels, buttons, inputs, or even design tokens such as colors, fonts, etc. Atoms can be abstract and don't necessarily represent the final product, but they help to create a consistent interface and development process.

Molecules

Molecules are combinations of two or more atoms that form relatively simple components together. An example could be a form label, a text input, and a button combined to make a search form. While atoms can exist in isolation (like a button), molecules find their true meaning when used in conjunction.

Organisms.

Organisms are relatively complex UI components composed of groups of molecules (and possibly atoms). Examples might include the header of a website with a logo (atom), a navigation menu (molecule), and a search form (molecule). Organisms provide context for the molecules and demonstrate how molecules can work together.

/src
  /components
    /atoms
      Button.jsx
      Icon.jsx
      ...
    /molecules
      FormInput.jsx
      UserAvatar.jsx
      ...
    /organisms
      Header.jsx
      Sidebar.jsx
      ...
    /templates
      MainLayout.jsx
      UserLayout.jsx
      ...
    /pages
      HomePage.jsx
      UserProfilePage.jsx
      ...

By feature or Domain.

This structure is popular for large projects. Here, we group components by the feature they relate to

/src
  /components
    /Button
      Button.jsx
      Button.test.jsx
      Button.css
    /Modal
      Modal.jsx
      Modal.test.jsx
      Modal.css
  /features
    /Todo
      /components
        TodoList.jsx
        TodoItem.jsx
      TodoActions.js
      TodoReducer.js
    /User
      /components
        UserProfile.jsx
        UserSettings.jsx
      UserActions.js
      UserReducer.js

By File Type

In smaller projects or applications with many shared components, it might make sense to group files by their type.

/src
  /components
    Button.jsx
    Modal.jsx
    ...
  /containers
    TodoContainer.jsx
    UserContainer.jsx
    ...
  /actions
    TodoActions.js
    UserActions.js
    ...
  /reducers
    TodoReducer.js
    UserReducer.js
    ...
  /styles
    Button.css
    Modal.css
    ...

Domain-driven Design (DDD)

For projects that closely align with domain-driven Design, you might structure your folders around aggregates, entities, and value objects.

/src
  /User
    UserAggregate.js
    UserEntity.js
    UsernameValue.js
    ...
  /Product
    ProductAggregate.js
    ProductEntity.js
    PriceValue.js
    ...

Modules or Packages

Modules are self-contained units of code that encapsulate a specific functionality or feature, often used in mono repo structures or when scaling with multiple teams.

/src
  /modules
    /Todo
      TodoView.jsx
      TodoLogic.js
      TodoService.js
      ...
    /User
      UserView.jsx
      UserLogic.js
      UserService.js
      ...

Conclusions

The takeaway is to keep your structure simple. It should be intuitive for developers to know where to place their files and easy for them to be consistent.
I showed a few common structures in this article, but feel free to use what fits your team.