Feature-Based Architecture
A scalable React codebase usually benefits from organizing code around features or domains rather than technical categories alone. A feature can own components, hooks, API clients, types, validation, and tests.
Shared code should be genuinely shared. Do not move something into shared/ simply because a second file imports it. Premature sharing can create generic abstractions before the domain is understood.
A good architecture makes it easy to answer: where does this behavior live, who owns it, and what is allowed to depend on it?
Feature boundary
src/features/billing/
components/
hooks/
api/
model/
validation/
billing.routes.tsx
index.ts💡 The feature owns its internal implementation while an index can expose a small public API.
Key Takeaways
- Organize around domain ownership when scale demands it.
- Keep shared code truly generic.
- Make dependency direction explicit.