Project Structure

A well-organized project structure is the foundation of maintainable software. Let’s explore common patterns.

Recommended Layout

my-project/
├── src/
│   ├── components/    # Reusable UI components
│   ├── pages/         # Route-level pages
│   ├── utils/         # Utility functions
│   ├── hooks/         # Custom hooks
│   └── styles/        # Global stylesheets
├── public/            # Static assets
├── tests/             # Test files
├── package.json
├── tsconfig.json
└── README.md

Key Principles

Separation of Concerns

Each directory should have a single, clear responsibility. Avoid dumping unrelated files in the same folder.

Flat Over Nested

Keep your directory tree shallow. Deep nesting (4+ levels) makes navigation painful and imports verbose.

Colocation

Place related files together. A component’s styles, tests, and types should live alongside it:

components/
└── Button/
    ├── Button.tsx
    ├── Button.test.tsx
    ├── Button.module.css
    └── index.ts

Naming Conventions

Next Steps

Now that you understand project structure, move on to the Web Development section for hands-on coding.