React
/Advanced
Feature Based Architecture
Definition
An organizational pattern where files are grouped by the business feature they belong to, rather than their file type.
Explain Like I'm New
Instead of putting all your hooks in a 'hooks' folder, and all your components in a 'components' folder, you create a 'Cart' folder. Inside the Cart folder, you put the cart hooks, the cart components, and the cart API calls. Everything related to the Cart lives together.
Real World Example
If you decide to delete the 'Cart' feature from your app, you just delete the `src/features/cart` folder. If you used type-based architecture, you would have to hunt down files in 5 different folders.
Common Use Cases
- •Massive enterprise applications
- •Micro-frontend architectures
Terminal Output
bash / terminal
// src/features/auth
// - components/LoginForm.jsx
// - api/login.js
// - hooks/useAuth.js
// - index.js (Public API for this feature)
Interview Questions
basic
- What is Feature Based Architecture?
intermediate
- How does this prevent spaghetti code?
advanced
- What happens when two features need to share a component?