Project Structure and Tooling

Feature folders, TypeScript, linting

Group code by feature (cart, checkout, profile) rather than by file type, keeping components, hooks, tests and styles for a feature together. Use TypeScript to type props and state; it catches many bugs before running. Keep components focused, move data fetching into hooks or framework loaders, and keep business logic in plain functions that are easy to test. Enable Strict Mode in development, the hooks lint rules, and accessibility linting.

A feature-based layout

One possible structure.

src/
  app/                 routing, providers, layout
  features/
    cart/
      CartPage.tsx
      CartItem.tsx
      useCart.ts         custom hook
      cartReducer.ts     pure logic
      cart.test.tsx
    checkout/ ...
  shared/
    ui/                Button, Card, Modal
    lib/               formatting, api client

Type component props

A short props type at the top of each component is the best documentation and catches wrong usage at compile time.

Quick check: Why organise code by feature rather than by file type?

• React requires it
• It makes files larger
• Related components, hooks and tests stay together and change together
• It removes the need for tests