Structuring a React Codebase

Organize larger apps by feature (features/orders/, features/auth/) with each feature owning its components, hooks, API calls and types, plus a shared/ folder for UI primitives and utilities. Keep components small, separate data-fetching hooks from presentational components, use absolute imports (@/features/...), and enforce boundaries with lint rules. Colocate tests and stories next to components.

src/
  app/                 # router, providers, layout
  features/
    orders/
      api.ts           # fetchers + query hooks (useOrders, useCreateOrder)
      OrdersPage.tsx
      OrderTable.tsx
      OrderTable.test.tsx
      types.ts
    auth/
  shared/
    ui/                # Button, Modal, Field
    lib/               # formatting, http client

Common pitfalls

• Folders by type only (components/, hooks/) that become dumping grounds.
• Deep relative imports (../../../).
• Features importing each other's internals instead of public entry points.

Key points

• Group by feature
• Shared UI primitives in one place
• Colocate tests

Further reading: react.dev: Thinking in React