Feature-Oriented Frontend Structure
Organize code by product feature and responsibility rather than one giant components folder.
How to apply it
Use feature modules such as projects, billing, and members; shared UI primitives; hooks; API clients; and route layouts. TypeScript helps contracts but does not validate untrusted runtime JSON.
Worked example
ProjectList renders UI, useProjects manages remote query state, and projectApi handles transport and response normalization.
Common mistakes to avoid
Oversized components that mix fetching, permissions, form logic, and rendering.
Practice task
Implement this concept in the capstone. Add one positive test, one negative or failure-path test, and a short note explaining the trade-off you chose.
- Organize code by product feature and responsibility rather than one giant components folder.
- Use feature modules such as projects, billing, and members; shared UI primitives; hooks; API clients; and route layouts.
What is the strongest production practice for Feature-Oriented Frontend Structure?