For a React project in 2025, a well-organized folder structure is essential for maintainability, scalability, and ease of collaboration. The struct...
For further actions, you may consider blocking this person and/or reporting abuse
How can this be 100% same like mine, I also prefer this same layout, one thing diff is that I prefer store related slices in their own feature related folder, like authSlice will go in Auth folder.
Great and best folder structure you'll ever see which lists out all aspects with proper example
Thank you for your feedback! I completely agree with organizing slices into their feature-related folders—it’s a great approach for maintaining scalability and readability. The structure I shared is just one way to do it, and your method of placing authSlice in an Auth folder makes a lot of sense, especially for larger projects. It’s all about finding what works best for the team and the project’s needs. Thanks for sharing your perspective!
Yes this is a great project structure i used a similar one a couple of times , i would just mention that the context api in the comment is not a a state management like redux ,Context is a form of Dependency Injection that you can handle its state using useReducer, ive tested it out myself and as your project gets bigger its gets worse to handle state management it gets very slow.
A well-structured React project ensures better maintainability and scalability! The feature-based approach is a great way to keep things modular. If you're managing workplace applications, having a secure access system is just as important. Check out Online health management for more insights on optimizing secure access and user management. 🚀
OK, I have a question about tests folder? Where is it? I have heard that there are two main concepts about it - put all the test files in
testor__test__folder or just have all the.testfilessrccollocated in the folder. Any comments about that?The article is very good, the project structure is very simple and easy to maintain.
Thank you 😊
Thank you so much for sharing this kind of knowledge it is very easy to understand and use....
Hey @pramod_boda! Awesome article!
I'm currently working on an open-source project to help people organize and structure their React apps! I'd love for you to take a look and share insights -- or even contribute to it with your structure, if you're feeling into it!
Rorg - React Organizer
The folder structure is neat and clean, thank you! I'm particularly interested in how feature-nested folders will be organized. Are they designed to be independent modules? Also, how will we configure ESLint to prevent unintended feature dependencies?
I found this video [dly.to/9XmRt2U39uO] helpful and thought you might too.
By the way, here's the squad you can join [app.daily.dev/squads/weprodev].
Thanks for sharing!
tbh a module based or feature based structure should be extended to support more the scalability and the organization
you can supercharge it with a eslint rule where you can import from feature to feature for better isolation
mention to people that every folder outside the feature can be repeated under the feature
ChatGTP suggested this structure.
/my-react-app
│── 📂 src
│ ├── 📂 app
│ │ ├── 📂 routes # All application routes
│ │ ├── 📂 layout # Layout components (Header, Footer, etc.)
│ │ ├── 📂 hooks # Custom hooks
│ │ ├── 📂 providers # Context API Providers
│ │ ├── 📂 services # API calls (GraphQL/REST)
│ │ ├── 📂 store # Global state management (Redux, Zustand, Jotai, etc.)
│ │ ├── 📂 types # Global TypeScript types
│ │ ├── 📂 utils # Utility/helper functions
│ │ ├── 📂 config # Configuration & environment setup
│ ├── 📂 components
│ │ ├── 📂 ui # Reusable UI components (buttons, modals, forms)
│ │ ├── 📂 features # Feature-specific components
│ │ ├── 📂 animations # Animation files (Framer Motion, GSAP)
│ ├── 📂 modules
│ │ ├── 📂 auth # Authentication logic
│ │ ├── 📂 dashboard # Dashboard-related logic
│ │ ├── 📂 profile # User profile logic
│ ├── 📂 assets # Static assets (images, fonts, icons)
│ ├── 📂 styles # Global styles (Tailwind, SCSS, CSS Modules)
│ ├── 📂 tests # Unit & integration tests (Jest, React Testing Library)
│ ├── 📂 mocks # Mock data for tests
│ ├── main.tsx # Application entry point
│ ├── App.tsx # Main App component
│ ├── router.tsx # React Router setup
│── 📂 public # Static files (favicon, index.html)
│── .env # Environment variables
│── tsconfig.json # TypeScript configuration
│── package.json # Dependencies and scripts
│── README.md # Documentation
Remove the two testing-related folders (tests and mocks) and that's no different than what OP is suggesting. The app folder isn't necessary, since that's what 'src' is and 'features' has simply been renamed 'modules' here... Personally, I prefer 'features' and that's usually what I see this folder named.
I am sorry, but I see this everywhere. Why would you have a folder called "features". I don't understand. The term "Feature" is actually used in Scrum and PMs. It is not and should not be part of your code. It should be defined by Entities. Most likely you work with "Entities" not feature you suppose to be implementing.
You need to find out FSD architectural methodology
It's good, but I always prefer to add a subfolder in components. For example, something like components/button/Button.tsx is useful because you can include tests, Storybook files, subcomponents, and more.
Thanks bro
niceeeee
Good!