0Pricing
Frontend Academy · Lesson

Feature-Based Folder Structure

Organise code by feature domain rather than by type, colocate tests, styles, and components, and enforce boundaries with eslint-plugin-boundaries.

Two Ways to Organise Code

You can group code by type (components/, hooks/, services/, types/) or by feature (auth/, checkout/, dashboard/ — each containing its own components, hooks, etc.). Feature-based wins for medium-to-large apps.

Type-Based — The Default Trap

The classic React tutorial structure groups everything by type. It scales badly: every file change touches multiple unrelated folders, and 'find all checkout code' means greping across the whole tree.

// Type-based (avoid for large apps):
src/
  components/
    Button.tsx
    LoginForm.tsx
    CartItem.tsx
  hooks/
    useAuth.ts
    useCart.ts
  services/
    auth.ts
    cart.ts
  types/
    User.ts
    CartItem.ts

All lessons in this course

  1. Atomic Design: Atoms Molecules Organisms
  2. Monorepo Setup with Turborepo
  3. Micro-frontends: Module Federation
  4. Feature-Based Folder Structure
← Back to Frontend Academy