Stop 19 · Frontend System DesignTopics · 4/13

Feature-based Architecture

In short

Fixing a cart bug shouldn't mean opening components, hooks, services and utils folders one by one. Feature-based architecture keeps everything about the cart in one place.

Organizing code by feature/domain (e.g. `features/cart/`, `features/auth/`) instead of by file type (`components/`, `hooks/`, `utils/`) — keeps related code physically close together.

The jaadu cooks at its own dosa counter in a hostel mess with other counters nearby.

Think of it like this

Mess counters, not one big kitchen

In a good hostel mess, the dosa counter has its own batter, tawa and cook. If dosas are late, you know exactly where to go. Feature folders give each part of your app its own counter with everything it needs.

Watch it happen

Everything about the cart, in one place

features/

cart/

CartDrawer.tsx

useCart.ts

api.ts

index.ts

auth/

1/5The cart feature has its own folder.

The big ideas

What you need to know

Group by feature, not file type

features/cart holds the cart's components, hooks, API calls and types together.

One public door

features/cart/index.ts exports only what other code should use. The rest stays private.

Easy to delete

Removing a feature means deleting one folder, not hunting through ten.

Shared stays shared

Truly common things, like a Button or the API client, still live in shared folders.

See it in code

Walk through the code

1// features/cart/2//   components/CartDrawer.tsx3//   hooks/useCart.ts4//   api.ts5//   types.ts6//   index.ts   <- the only file others import7 8// features/cart/index.ts9export { CartDrawer } from "./components/CartDrawer";10export { useCart } from "./hooks/useCart";11export type { CartItem } from "./types";

1/3The cart feature's files, all in one folder.

Pages import from @/features/cart. If the cart team renames a hook file inside, nothing outside breaks because the index stays the same.

Save yourself the pain

Common mistakes

Oops

Making features import each other's internals, like cart reaching into auth/hooks.

Do this instead

Import only from the other feature's index, or move the shared part into a common folder.

Oops

Putting a Button inside features/cart because the cart used it first.

Do this instead

Generic UI belongs in components/ui. Feature folders hold things specific to that feature.

Your mission

Move one feature into its own folder

~30 min

Quick check

What's the main benefit of feature-based folders over components/, hooks/, services/ folders?

Go deeper

1Refactor one feature of a type-organized project into a self-contained feature folder.
2Compare how easy it is to delete or move a whole feature in each structure.
3Notice this scales better than type-based folders as an app grows.