Scalable Project Structure

0/2 in this phase0/36 across the roadmap

📖 Concept

React doesn't have an opinion on how you put files into folders. However, as an app grows, a "flat" structure becomes unmanageable.

Common Patterns:

Feature-Based (Recommended): Group files by domain (e.g., 'auth', 'profile', 'billing'). Each folder contains its own components, hooks, and tests.
Type-Based: Group files by their function (e.g., 'components', 'hooks', 'pages', 'utils'). This works well for smaller apps.

The 'src' Folder Best Practices:

components/: Global, reusable UI components (Buttons, Inputs, Modals).
features/: Domain-specific logic.
hooks/: Global custom hooks.
context/: Global state providers.
services/: API call logic (Axios/Fetch instances).
utils/: Pure helper functions.
assets/: Images, fonts, and global CSS.

Naming Conventions:

Components: PascalCase (UserCard.tsx).
Hooks: camelCase starting with 'use' (useAuth.ts).
Utils/Services: camelCase (formatDate.ts).

💻 Code Example

codeTap to expand ⛶

1// Example of a Feature-Based Structure:
2/*
3src/
4  components/           # Atomic UI elements
5    Button/
6      Button.tsx
7      Button.test.tsx
8      index.ts
9  features/             # Grouped by domain
10    auth/
11      components/
12        LoginForm.tsx
13      hooks/
14        useLogin.ts
15      types/
16        auth.types.ts
17      api/
18        auth.service.ts
19  hooks/                # Global hooks
20    useLocalStorage.ts
21  layouts/              # Page wrappers
22    MainLayout.tsx
23  pages/                # Route components
24    Dashboard.tsx
25  utils/                # Helper functions
26    api-client.ts
27*/
28
29// Example index.ts pattern for cleaner imports
30// src/components/Button/index.ts
31export * from './Button';
32export { default } from './Button';
33
34// Usage: import Button from '@/components/Button';

🏋️ Practice Exercise

Reorganize a 'spaghetti' project into a feature-based structure.
Implement 'Barrel Files' (index.ts) for a few components and see how it affects your import statements.
Set up 'Absolute Imports' (using @/ prefix) in a Vite or Next.js project.
Create a 'components' folder that follows the Atomic Design principle (Atoms, Molecules, Organisms).

⚠️ Common Mistakes

Creating a separate folder for every single component, even if it's only used once.
Deeply nesting folders (more than 3-4 levels) making navigation difficult.
Not being consistent with naming (mixing PascalCase and kebab-case for files).

💼 Interview Questions

🎤 Mock Interview

Practice a live interview for Scalable Project Structure

Was this topic helpful?

← PreviousVite, Next.js & The Ecosystem Next →JSX Deep Dive