How to Organize a React Project: Folder Structure 101

When you’re simply getting started out with React, it’s smooth to maintain everything in a single file or folder. But as your project grows, things can get messy very fast—scattered components, duplicated logic, and uncertain structure. A well-organized folder structure allows you to maintain your codebase, scale your app, and collaborate with others more effectively.

In this blog, we will walk through the essentials of organizing a React project, following common patterns, and share a scalable folder structure that you may adapt as per your need.

Why Folder Structure Matters

Before moving towards the code, let’s understand the importance of folder structure:

Scalability: Easier to add new features without breaking existing code.

Maintainability: Clear separation of concerns improves readability and debugging.

Team collaboration: Helps developers quickly understand where things live.

Consistency: Reduces decision fatigue and enforces coding discipline.

The Base Structure

Let’s move with a simple and scalable folder structure:

src/
├── assets/         # Images, fonts, icons
├── components/     # Reusable UI components
├── features/       # Domain-specific features (grouped by domain)
├── hooks/          # Custom React hooks
├── pages/          # Page-level components (if not using a router)
├── routes/         # Route definitions and route-based components (for routers)
├── services/       # API calls, SDKs, external services
├── store/          # Global state (Redux, Zustand, etc.)
├── utils/          # Utility functions/helpers
├── App.tsx         # Main App component
├── index.tsx       # Entry point

Let’s breakdown them one by one.

assets/

This folder contains the static assets like images, fonts, icons etc. It might also contain global stylesheets sometimes.

assets/
├── images/
│   └── logo.png
├── icons/
│   └── search.svg
└── fonts/
    └── Roboto-Regular.ttf

You can organize asset by type or feature if you have a lot of them.

components/

It contains reusable UI pieces like buttons, cards, tables, modals, inputs etc.

components/
├── Button/
│   ├── Button.tsx
│   └── Button.css
├── Modal/
│   └── Modal.tsx

As a tip you can follow atomic design or components folder to group components logic, style, test etc.

features/

Each domain or feature gets its own folder to group the feature related files. It is great for large projects.

features/
├── auth/
│   ├── components/
│   ├── hooks/
│   ├── services/
│   ├── LoginPage.tsx
│   └── authSlice.ts
├── dashboard/
│   ├── DashboardPage.tsx
│   └── widgets/

Think in terms of “feature-first” rather than “type-first”.

hooks/

All the custom hooks will be placed here for easy discovery.

hooks/
├── useDebounce.ts
├── useLocalStorage.ts
└── useAuth.ts

services/

All the API logic, HTTP Clients (like Axios) etc live here:

services/
├── api.ts
├── authService.ts
└── userService.ts

store/

The complete state management setup (Redux, Zustand or Context API) goes here. It contains the state management logic of your app.

store/
├── index.ts
├── authSlice.ts
└── userSlice.ts

utils/

Helper functions that are independent of any feature or UI piece is placed here. These functions are independent and can be used in many components.

utils/
├── formatDate.ts
├── calculateDiscount.ts
└── validators.ts

pages/ or routes/

You will structure this differently based on whether you are using Next.js or React Router:

In React Router: You may create a routes/ folder with layout components and route configs.

In Next.js: The pages/ directory is built-in.

Bonus: Naming Tips

PascalCase for component and file names: UserProfile.tsx

camelCase for hooks and functions: useUserData.ts

kebab-case for asset files and image names: logo-dark.svg

A Realistic Example

Let’s see how a real project structure might look

src/
├── assets/
├── components/
│   └── Navbar/
├── features/
│   ├── auth/
│   └── dashboard/
├── hooks/
├── routes/
├── services/
├── store/
├── utils/
├── App.tsx
└── index.tsx

Conclusion

There’s no one-size-fits-all folder structure for React projects. What matters most is that your structure makes sense to you and your team, and it scales as your project grows. Start with something simple, and as complexity increases, adopt a more modular and feature-based architecture.

A thoughtful folder structure improves developer experience, code maintainability, and long-term project health. Use the structure above as a baseline, then evolve it based on your project’s specific needs.

How do you structure your React projects? Do you follow domain-driven design, atomic design, or a hybrid approach? Let me know in the comments or share your favourite tips!

For more such blogs and updates follow Front-end Competency.

Follow NashTech Blogs for more amazing blogs.