Problem

There's a lot of discussion out there on how to set up your folder structure.

Since React is a library and not a framework, there are many ways to correctly structure your react project and there's no wrong way.

But over the years i've developed the best way that works for me in large enterprise applications.
It allows for easy navigation for seasoned developers and is very intuitive for juniors and developers collaborating in the middle of the development work.

Solution

The idea is to have all your files grouped by folder categories inside the src folder like so

Everything is neatly and comprehensibly organized.

• Algolia index files
• assets such as images and fonts
• auth contains all auth files such as login and registration, forgot password, etc
• components and containers are self eplanatory
• data contains any info like menu data, or long objects and arrays data
• firebase config file
• hooks for my custom hooks
• pages are a "next style" pages folder that contain all my pages on the app
• services are firebase and other fetch calls that i reuse and make my app scaleable
• store houses my context apis, state management
• utils are my useful utility functions like date utilities that allow me to convert quickly date objects and conversions.

Conclusion

Using this folder structure will help you navigate your react app smoothly and quickly, especially for new developers joining your project in the middle.

Let me know your thoughts.

Easy out!