Flat vs Nested Structures

Choose based on project size and team needs.

Flat Structure (Small Projects)

src/
├── components/
│   ├── Button.tsx
│   ├── Card.tsx
│   ├── Header.tsx
│   ├── Modal.tsx
│   └── Sidebar.tsx
├── hooks/
│   ├── useAuth.ts
│   └── useFetch.ts
├── utils/
│   └── helpers.ts
├── App.tsx
└── index.tsx

Pros: Simple, easy to find files Cons: Doesn't scale, hard to find related code

Nested by Type (Medium Projects)

src/
├── components/
│   ├── common/
│   │   ├── Button/
│   │   └── Modal/
│   └── layout/
│       ├── Header/
│       └── Sidebar/
├── pages/
│   ├── Home/
│   ├── Dashboard/
│   └── Settings/
├── hooks/
├── services/
├── types/
└── utils/

Pros: Organized by type Cons: Related code is scattered

Feature-Based (Large Projects)

src/
├── features/
│   ├── auth/
│   │   ├── components/
│   │   ├── hooks/
│   │   ├── services/
│   │   ├── types.ts
│   │   └── index.ts
│   ├── dashboard/
│   │   ├── components/
│   │   ├── hooks/
│   │   └── index.ts
│   └── settings/
├── shared/
│   ├── components/
│   ├── hooks/
│   └── utils/
├── app/
│   ├── routes.tsx
│   ├── store.ts
│   └── App.tsx
└── index.tsx

Pros: Related code together, easy to find Cons: More structure to maintain

Choosing a Structure

Component Folder Structure

Button/
├── Button.tsx       # Main component
├── Button.test.tsx  # Tests
├── Button.stories.tsx # Storybook
├── Button.module.css  # Styles
├── types.ts         # Types (if complex)
└── index.ts         # Re-exports

tsx
// Button/index.ts
export { Button } from './Button';
export type { ButtonProps } from './types';