Screaming Architecture

app/
├── components/
│   ├── Button.tsx
│   ├── Card.tsx
│   ├── UserForm.tsx
│   ├── ProductList.tsx
│   └── ShoppingCart.tsx
├── hooks/
│   ├── useAuth.ts
│   ├── useProducts.ts
│   └── useCart.ts
└── services/
    ├── authService.ts
    ├── productService.ts
    └── cartService.ts

app/
├── modules/
│   ├── authentication/      ← "¡Tengo autenticación!"
│   │   ├── components/
│   │   ├── services/
│   │   └── hooks/
│   ├── products/            ← "¡Manejo productos!"
│   │   ├── components/
│   │   ├── services/
│   │   └── hooks/
│   └── shopping-cart/       ← "¡Tengo carrito de compras!"
│       ├── components/
│       ├── services/
│       └── hooks/

avangcli module user-profile --store zustand

modules/
└── user-profile/
    ├── components/          # Componentes UI reutilizables del módulo
    ├── containers/          # Componentes contenedores (lógica + UI)
    │   └── user-profile-container.tsx
    ├── services/            # Lógica de negocio
    │   └── user-profile.service.ts
    ├── types/               # Definiciones TypeScript
    │   └── user-profile.types.ts
    ├── hooks/               # Custom React hooks
    ├── store/               # Estado del módulo
    │   └── user-profile.store.ts
    ├── adapters/            # Adaptadores para APIs externas
    ├── helpers/             # Funciones auxiliares
    ├── lib/                 # Utilidades específicas del módulo
    └── index.ts             # Barrel export

components/
  UserCard.tsx
  UserList.tsx
  ProductCard.tsx
  ProductList.tsx
services/
  userService.ts
  productService.ts

modules/
  user/
    components/
      UserCard.tsx
      UserList.tsx
    services/
      user.service.ts
  product/
    components/
      ProductCard.tsx
      ProductList.tsx
    services/
      product.service.ts

modules/
  user-profile/
    components/
      Avatar.tsx              ← Solo usado en user-profile
    services/
      user-profile.service.ts ← Solo para este módulo

shared/
  components/
    Button.tsx               ← Usado en múltiples módulos

modules/
  user-profile/
    containers/              ← Nivel más alto: Orquesta todo
      user-profile-container.tsx
    components/              ← Nivel medio: UI components
      ProfileHeader.tsx
    services/                ← Nivel bajo: Lógica de negocio
      user-profile.service.ts
    types/                   ← Fundación: Contratos
      user-profile.types.ts

# Sabes exactamente dónde ir:
modules/user-profile/

# Agregar reviews de productos
avangcli module product-reviews --store zustand

# Agregar wishlist
avangcli module wishlist --store zustand

"¿Qué hace esta app?"
→ Mira `modules/`
→ "Ah, maneja users, products, shopping-cart y orders"

"¿Qué hace esta app?"
→ Mira `components/`, `hooks/`, `services/`
→ "Eh... no sé, déjame revisar cada archivo"

// user-profile.test.ts
import { userProfileService } from "@/modules/user-profile"

describe("UserProfile Module", () => {
  // Test todo el módulo de forma aislada
})

# Simplemente elimina el módulo completo
rm -rf modules/deprecated-feature

// Container
export const UserProfileContainer = () => {
  const [user, setUser] = useState()
  const loadUser = async () => { /* lógica */ }

  return <UserProfileView user={user} />
}

// Component (presentational)
export const UserProfileView = ({ user }) => {
  return <div>{user.name}</div>
}

export class UserProfileService {
  private static instance: UserProfileService

  async fetchProfile() {
    /* ... */
  }
  async updateProfile() {
    /* ... */
  }
}

export interface UserProfile {
  id: string
  name: string
  email: string
}

// Zustand store
export const useUserProfileStore = create((set) => ({
  profile: null,
  setProfile: (profile) => set({ profile })
}))

// Si cambias de REST a GraphQL, solo modificas el adapter
export class UserApiAdapter {
  async fetchUser(id: string) {
    // REST implementation
    return fetch(`/api/users/${id}`)
  }
}

export function useUserProfile(userId: string) {
  const [profile, setProfile] = useState()

  useEffect(() => {
    // Lógica de carga
  }, [userId])

  return { profile }
}

shared/
  components/
    Button.tsx        ← Usado en todos lados
    Modal.tsx
  hooks/
    useAuth.ts        ← Autenticación global
  types/
    common.types.ts   ← Tipos compartidos

config/
  api.config.ts
  theme.config.ts

utils/
  formatDate.ts
  validators.ts