Feature-Oriented Frontend Structure

Module:Core concept

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.

Key Takeaways
  • 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.
Knowledge Check

What is the strongest production practice for Feature-Oriented Frontend Structure?