🚀 How I Structure My React Projects (And Why It Works)

If you've ever jumped into an older React codebase and felt like you were spelunking through a cave of confusion — you're not alone. Over the years, I've worked on everything from scrappy MVPs to production-scale apps, and one thing became very clear: project structure matters.

In this post, I’ll walk you through how I structure my React projects, why I’ve settled on this format, and how it scales cleanly over time.

🧠 The Core Philosophy

Before diving into the folder tree, here’s what drives my decisions:

1. Separation of concerns over abstraction-for-the-sake-of-abstraction.
2. Feature-first thinking — files should live where they belong conceptually.
3. Scalability — what works for 3 components should still work for 300.
4. Developer experience — fast onboarding, minimal context switching.

📁 The Folder Structure

Here’s the high-level layout I follow in almost every React project:

src/ │ ├── assets/ # Images, fonts, global styles, etc. ├── components/ # Reusable UI components (atoms/molecules) ├── features/ # Feature-based modules (e.g. auth, dashboard) ├── hooks/ # Custom React hooks ├── lib/ # Utilities and shared logic (API clients, helpers) ├── pages/ # Route-based components (if using file-based routing) ├── layouts/ # Layout wrappers (MainLayout, AuthLayout, etc.) ├── store/ # Global state (Redux, Zustand, etc.) ├── types/ # TypeScript types and interfaces └── App.tsx # Root component 

🔍 A Deeper Dive

1. components/

Think of this as your design system zone.

• Button.tsx, Modal.tsx, Input.tsx etc.
• Small, dumb, reusable UI blocks.
• If it could appear on multiple pages, it probably belongs here.

2. features/

This is the heart of the app, organized by domain.

features/ ├── auth/ │ ├── LoginForm.tsx │ ├── authSlice.ts │ ├── api.ts │ └── hooks.ts └── dashboard/ ├── DashboardPage.tsx ├── widgets/ └── dashboardSlice.ts 

Everything a feature needs (components, hooks, local state) stays encapsulated. It's modular, testable, and easy to maintain.

3. hooks/

Custom hooks like useDebounce, useFetch, useOnClickOutside.

• These are often used across features/components.
• Each one should be atomic and single-purpose.

4. lib/

A utility belt for the app — things like:

• Axios instances
• Date/time formatters
• Validation functions
• Anything not tied to the UI directly.

5. store/

For global state management (when necessary):

• Redux or Zustand store setup
• Middleware and persistence logic
• Keep feature-specific slices in the relevant features/ folder

6. types/

Centralized location for all shared types and interfaces.

If you're using TypeScript (you should!), this keeps your types from spreading like weeds across the project.

⚙️ Tools & Conventions I Use

• Path aliases via tsconfig.json (@components, @features, etc.)
• Atomic Design thinking, loosely applied
• Prettier + ESLint + Husky for a clean, linted codebase
• Storybook for developing and documenting components

📈 Why This Works

• Easy onboarding: New devs can find what they need quickly.
• Scales gracefully: As the app grows, this structure won’t collapse.
• Flexible: It supports SSR (Next.js), SPAs, or Electron apps with minor tweaks.
• Testable: Each feature is isolated, which makes writing unit/integration tests easier.

✍️ Final Thoughts

There’s no one true way to structure React apps — but there are definitely better ways. The key is to stay consistent, think in terms of features and reusability, and always consider how your project might evolve.

Whether you're building a side hustle or a startup-scale application, a solid structure is the bedrock of clean, maintainable code.

How do you structure your React projects? Drop your tips or battle stories in the comments!