🚀 Create React Clean Architecture

Generador CLI para crear proyectos React con Clean Architecture, TypeScript, Vite, Tailwind CSS y shadcn/ui.

✨ Características

• 🏗️ Clean Architecture - Separación clara de capas (Domain, Infrastructure, Presentation)
• ⚡ Vite - Build tool ultra rápido
• 🎨 Tailwind CSS + shadcn/ui - Componentes modernos y estilizados
• 📦 TypeScript - Tipado estático
• 🔄 TanStack Query - Manejo de estado del servidor
• 🐻 Zustand - State management simple
• 📝 React Hook Form + Zod - Formularios con validación
• 🌐 Axios - Cliente HTTP
• 🔌 Socket.io - WebSockets listo para usar
• 🛣️ React Router - Navegación

📦 Instalación

# Con npm
npm create react-zr-architecture mi-proyecto

# Con pnpm
pnpm create react-zr-architecture mi-proyecto

# Con npx
npx create-react-zr-architecture mi-proyecto

cd mi-proyecto
npm run dev

📁 Estructura del Proyecto

mi-proyecto/
├── src/
│   ├── app/                    # Configuración de la aplicación
│   │   └── App.tsx
│   ├── domain/                 # Capa de Dominio (Lógica de Negocio)
│   │   ├── entities/           # Entidades del dominio
│   │   ├── repositories/       # Interfaces de repositorios
│   │   ├── usecases/           # Casos de uso
│   │   └── types/              # Tipos del dominio
│   ├── infrastructure/         # Capa de Infraestructura
│   │   ├── api/                # Cliente API
│   │   ├── config/             # Configuraciones
│   │   ├── data/               # Fuentes de datos
│   │   ├── repositories/       # Implementaciones de repositorios
│   │   └── services/           # Servicios externos
│   ├── presentation/           # Capa de Presentación (UI)
│   │   ├── components/         # Componentes React
│   │   │   ├── layouts/
│   │   │   ├── shared/
│   │   │   ├── tables/
│   │   │   └── ui/             # Componentes shadcn/ui
│   │   ├── context/            # Context API
│   │   ├── pages/              # Páginas
│   │   ├── routes/             # Configuración de rutas
│   │   ├── utils/              # Utilidades de UI
│   │   └── viewmodels/         # ViewModels y hooks
│   ├── shared/                 # Código compartido
│   │   ├── config/             # Configuración global
│   │   ├── constants/          # Constantes
│   │   ├── hooks/              # Hooks compartidos
│   │   ├── types/              # Tipos compartidos
│   │   └── utils/              # Utilidades
│   ├── lib/                    # Librerías y helpers
│   ├── styles/                 # Estilos globales
│   └── main.tsx                # Punto de entrada
├── .env                        # Variables de entorno
├── tailwind.config.js          # Configuración Tailwind
├── tsconfig.json               # Configuración TypeScript
├── vite.config.ts              # Configuración Vite
└── package.json

🎯 Clean Architecture

Capas

1. Domain (Dominio)

   • Contiene la lógica de negocio pura
   • Independiente de frameworks y librerías
   • Define entidades, interfaces y casos de uso

2. Infrastructure (Infraestructura)

   • Implementaciones concretas de las interfaces del dominio
   • Comunicación con APIs, bases de datos, servicios externos
   • Manejo de datos y persistencia

3. Presentation (Presentación)

   • Componentes de UI
   • ViewModels y hooks
   • Manejo de estado de la UI

4. Shared (Compartido)

   • Código reutilizable entre capas
   • Utilidades, constantes, tipos comunes

Flujo de Datos

UI (Presentation) → ViewModel → UseCase (Domain) → Repository Interface (Domain) → Repository Implementation (Infrastructure) → API

🛠️ Uso

Agregar Componentes shadcn/ui

npx shadcn-ui@latest add button
npx shadcn-ui@latest add card
npx shadcn-ui@latest add form
npx shadcn-ui@latest add table

Crear una Entidad

// src/domain/entities/Product.ts
import { BaseEntity } from '@/shared/types';

export interface Product extends BaseEntity {
  name: string;
  price: number;
  description: string;
}

Crear un Repositorio

// src/domain/repositories/ProductRepository.ts
import { Product } from '@/domain/entities/Product';

export interface ProductRepository {
  getAll(): Promise<Product[]>;
  getById(id: string): Promise<Product>;
  create(product: Omit<Product, 'id' | 'createdAt' | 'updatedAt'>): Promise<Product>;
  update(id: string, product: Partial<Product>): Promise<Product>;
  delete(id: string): Promise<void>;
}

Implementar el Repositorio

// src/infrastructure/repositories/ProductRepositoryImpl.ts
import { ProductRepository } from '@/domain/repositories/ProductRepository';
import { Product } from '@/domain/entities/Product';
import { apiClient } from '@/infrastructure/api/apiClient';

export class ProductRepositoryImpl implements ProductRepository {
  async getAll(): Promise<Product[]> {
    return apiClient.get<Product[]>('/products');
  }

  async getById(id: string): Promise<Product> {
    return apiClient.get<Product>(`/products/${id}`);
  }

  async create(product: Omit<Product, 'id' | 'createdAt' | 'updatedAt'>): Promise<Product> {
    return apiClient.post<Product>('/products', product);
  }

  async update(id: string, product: Partial<Product>): Promise<Product> {
    return apiClient.put<Product>(`/products/${id}`, product);
  }

  async delete(id: string): Promise<void> {
    return apiClient.delete<void>(`/products/${id}`);
  }
}

export const productRepository = new ProductRepositoryImpl();

Crear un Caso de Uso

// src/domain/usecases/products/GetAllProductsUseCase.ts
import { ProductRepository } from '@/domain/repositories/ProductRepository';
import { Product } from '@/domain/entities/Product';

export class GetAllProductsUseCase {
  constructor(private productRepository: ProductRepository) {}

  async execute(): Promise<Product[]> {
    return this.productRepository.getAll();
  }
}

Usar en un Componente con TanStack Query

// src/presentation/pages/ProductsPage.tsx
import { useQuery } from '@tanstack/react-query';
import { GetAllProductsUseCase } from '@/domain/usecases/products/GetAllProductsUseCase';
import { productRepository } from '@/infrastructure/repositories/ProductRepositoryImpl';

const getAllProductsUseCase = new GetAllProductsUseCase(productRepository);

export const ProductsPage = () => {
  const { data: products, isLoading, error } = useQuery({
    queryKey: ['products'],
    queryFn: () => getAllProductsUseCase.execute(),
  });

  if (isLoading) return <div>Cargando...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h1>Productos</h1>
      {products?.map((product) => (
        <div key={product.id}>
          <h2>{product.name}</h2>
          <p>{product.description}</p>
          <p>${product.price}</p>
        </div>
      ))}
    </div>
  );
};

🔧 Scripts Disponibles

npm run dev        # Iniciar servidor de desarrollo
npm run build      # Construir para producción
npm run preview    # Vista previa de la build
npm run lint       # Ejecutar linter

🌍 Variables de Entorno

VITE_API_URL=http://localhost:3000/api

📚 Librerías Incluidas

| Librería | Versión | Propósito | |----------|---------|-----------| | React | ^18.3.1 | Framework UI | | TypeScript | ^5.6.2 | Tipado estático | | Vite | ^5.4.8 | Build tool | | Tailwind CSS | ^3.4.13 | Estilos | | React Router | ^6.26.2 | Navegación | | TanStack Query | ^5.56.2 | State management del servidor | | Zustand | ^4.5.5 | State management | | React Hook Form | ^7.53.0 | Formularios | | Zod | ^3.23.8 | Validación de esquemas | | Axios | ^1.7.7 | Cliente HTTP | | Socket.io Client | ^4.8.0 | WebSockets | | Lucide React | ^0.446.0 | Iconos |

🤝 Contribuir

Las contribuciones son bienvenidas. Por favor:

1. Fork el proyecto
2. Crea una rama para tu feature (git checkout -b feature/AmazingFeature)
3. Commit tus cambios (git commit -m 'Add some AmazingFeature')
4. Push a la rama (git push origin feature/AmazingFeature)
5. Abre un Pull Request

📝 Licencia

MIT © Diego Aguilera

🔗 Enlaces

• Repositorio
• Issues
• shadcn/ui
• Vite
• TanStack Query

Creado con ❤️ usando Clean Architecture