Frontend Architecture Feature Based

When to use this skill

• •Starting a new React/frontend project
• •Refactoring a monolithic structure
• •Organizing code by business features
• •Implementing domain-driven design in frontend

Workflow

• • Identify business features/domains
• • Create feature folders with clear boundaries
• • Colocate related code (components, hooks, tests, styles)
• • Define public API for each feature
• • Avoid cross-feature dependencies

Instructions

Folder Structure

src/
├── features/
│   ├── auth/
│   │   ├── components/
│   │   │   ├── LoginForm.tsx
│   │   │   └── RegisterForm.tsx
│   │   ├── hooks/
│   │   │   └── useAuth.ts
│   │   ├── api/
│   │   │   └── authApi.ts
│   │   ├── types/
│   │   │   └── auth.types.ts
│   │   └── index.ts  # Public API
│   ├── products/
│   │   ├── components/
│   │   ├── hooks/
│   │   └── index.ts
│   └── cart/
├── shared/
│   ├── components/  # Shared UI
│   ├── hooks/
│   └── utils/
└── app/
    ├── App.tsx
    └── routes.tsx

Key Principles

1. Feature Colocation Keep all code related to a feature together:

// features/products/index.ts (Public API)
export { ProductList } from './components/ProductList';
export { useProducts } from './hooks/useProducts';
export type { Product } from './types/product.types';

2. Import Rules

• •Features can import from shared/
• •Features CANNOT import from other features
• •Use the public API (index.ts) only

3. Shared Code Only extract to shared/ when:

• •Used by 3+ features
• •Truly generic (not business logic)

Resources

• •Check existing skills for patterns