A Clean React Folder Structure

When building a React app, having a well-organized folder structure makes everything easier finding files, maintaining code, scaling your app, and onboarding new developers. Here's a folder layout that's worked well for many teams, with a quick explanation of what each folder does.
You don’t need to use each folder but while scaling the app with time it is easier to adapt project with this type of folder structure.

Folder Structure

src/
│
├── api/
├── auth/
├── components/
├── constants/
├── types/
├── hooks/
├── layouts/
├── locales/
├── mock/
├── pages/
├── queries/
├── routes/
├── sections/
├── services/
├── store/
├── theme/
└── utils/

Folder Descriptions

• mock/
  This folder is where you put mock data used for development or testing. It's great for simulating backend responses before your API is ready. You can define dummy blog posts, user data, or any sample content you might need during development.

• api/
  Here, you set up your Axios instance and define global configuration like base URLs or interceptors. It's the central place where all your HTTP setup lives, separate from the actual request functions.

• auth/
  Handles everything related to authentication. This includes storing tokens, managing login/logout logic, and setting up user context. Basically, anything that keeps track of whether the user is logged in and who they are.

• components/
  Contains shared, reusable UI components like buttons, inputs, modals, form fields, etc. These are your building blocks, used across different parts of the app.

• constants/
  Stores fixed values you might need throughout your app, like dropdown options, role lists, or status values. Unlike mock data, these are not just for testing they're actual values your app depends on.

• types/
  If you’re using TypeScript, this folder is great for storing global type definitions, enums, and interfaces (instead of scattering them in random files).

• hooks/
  A place for custom hooks that solve specific problems or add features to your components. Examples: useClipboard, useResponsive, or a custom useDebounce.

• layouts/
  This folder contains layout components like sidebars, headers, footers, and wrappers for different page types. It’s useful when you have multiple layout variations like admin and public views or different types of navigations.

• locales/
  Used for managing translations and locale-related settings. You can also store dayjs or MUI date adapters, language contexts, and other internationalization (i18n) logic here.

• pages/
  Similar to Next.js or other router-based setups, this defines the structure of your app’s pages. However, these files are lightweight and don’t contain full page content just the route presence and sometimes minimal setup. Actual content is handled in the sections/ folder. This way it is easier to scale your app with increasing number of pages.

• queries/
  If you're using TanStack Query (React Query), this is where you'd keep your query and mutation hooks. It helps to organize your data-fetching logic and caching in one place.

• routes/
  Here you define your app’s routes using React Router (or another router). You can also manage role-based access, lazy loads and navigation guards here. It connects what's in pages/ to the actual routing setup.

• sections/
  This is where the actual content of each page is built. You compose your components/ inside sections/ to create the structure and logic of each page from pages with creating folders for each page, you can create views to contain all other blocks and use it in pages. It keeps your pages/ clean and focused just on routing for larger apps.

• services/
  Contains simple functions that call your API using the Axios instance from api/. For example, postBlogPost(data) or getUserInfo(). Think of this as the layer between your UI and the backend. You can use this services in queries/.

• store/
  If you’re using a state management library (Redux, Zustand, Recoil, Jotai, etc.), keep your global stores, slices, and related logic here. This prevents mixing state with hooks/.

• theme/
  Stores your theme setup color schemes, typography, spacing, fonts etc. It can include your MUI theme, dark/light mode settings, and theme providers.

• utils/
  General utility functions that help with common tasks like formatting dates, validating input, or converting values. These are often small, pure functions reused throughout the app.

---

Using this structure keeps your project clean, modular, and easy to grow. It separates responsibilities well, so you're not stuffing everything into one or two folders. You can tweak it to fit your team’s style, but this setup is a solid starting point for most medium to large React projects.

---