Building Maintainable React Applications
Folder-by-type — components, hooks, utils — looks tidy on day one and becomes a maze on day 200. I organize React by domain: billing, fleet, inventory. Types belong at the boundary, not on every local variable.
Domain folders beat type folders
On AnyWare ERP the React app is not a bag of components. Billing screens live with billing hooks and billing API types. A second developer should not ask where the “real” logic lives.
Shared UI is allowed. Shared business rules in a utils folder are how you get silent bugs six months later.
TypeScript at the boundary
I type API responses, form values and permissions. I do not type every map callback. The contract is what crosses the network or the form — that is where production breaks.
From Tangier I ship Laravel APIs with React clients this way so the UI cannot drift from the domain without a compiler complaint.
Key takeaways
- Organize React by business domain.
- Type the boundaries: API, forms, permissions.
- Shared utils should not hide domain rules.
FAQ
Do you use a state library on every app?
No. Server state stays close to the query. Client state stays local until two distant screens truly share it. A global store too early is another maze.