Aplicación de gestión de productos desarrollada con React, TypeScript y Vite.

# Instalar dependencias
pnpm install

# Iniciar servidor de desarrollo
pnpm dev

# Build para producción
pnpm build

# Previsualizar build de producción
pnpm preview

Se ha desplegado la aplicación en Netlify y se puede acceder a través del siguiente enlace:

• Ver en Netlify

• Separación de responsabilidades: Los componentes UI están en src/components/ui/, mientras que los componentes de negocio como data-table y modals tienen sus propias carpetas.
• Patrón Controller: Implementé controladores separados (data-table.controller.ts) para manejar la lógica de negocio fuera de los componentes, manteniendo los componentes React enfocados en la presentación.

• Custom Hooks: La lógica reutilizable está encapsulada en hooks personalizados en src/lib/hooks/.
• Providers: Uso de Context API a través de providers en src/components/providers/ para estado global cuando es necesario.

• Funciones pequeñas y con responsabilidad única: Las utilidades están organizadas en src/lib/utils/ y las columnas de la tabla en data-table/columns/.
• TypeScript: Tipos centralizados en src/lib/types/ para garantizar type-safety en toda la aplicación.
• API Layer: Capa de abstracción para llamadas API en src/lib/api/.

• shadcn/ui: Componentes accesibles y personalizables basados en Radix UI.
• TailwindCSS: Estilos utilitarios para desarrollo rápido y consistente.

1. Tests unitarios: Añadir tests para los custom hooks y funciones puras en utils/.
2. Tests de integración: Implementar tests E2E con Playwright o Cypress para flujos críticos.
3. Paginación del servidor: Si el dataset crece, implementar paginación server-side en lugar de cargar todos los productos.
4. Manejo de errores: Implementar error boundaries y un sistema de notificaciones más robusto.
5. Optimización de rendimiento: Implementar virtualización en la tabla para grandes volúmenes de datos.
6. Accesibilidad: Auditoría completa de accesibilidad y mejoras según WCAG 2.1.
7. Documentación: Añadir Storybook para documentar los componentes UI.
8. Caché de datos: Implementar React Query o SWR para caché y revalidación de datos.
9. Ruteo avanzado: Añadir rutas protegidas y autenticación si la aplicación lo requiere.
10. Estado global: Implementar un manejo de estado global más robusto si la aplicación crece (redux toolkit, zustand, jotai).

src/
├── components/
│   ├── data-table/     # Tabla de datos con controlador separado
│   ├── modals/         # Modales de la aplicación
│   ├── providers/      # Context providers
│   ├── sidebar/        # Navegación lateral
│   └── ui/             # Componentes UI reutilizables (shadcn)
├── lib/
│   ├── api/            # Capa de abstracción para APIs
│   ├── controllers/    # Lógica de negocio
│   ├── hooks/          # Custom hooks
│   ├── types/          # Definiciones de TypeScript
│   └── utils/          # Funciones utilitarias
└── pages/              # Páginas de la aplicación

• React 18 - Biblioteca Principal
• TypeScript - Type-safety
• Vite - Bundler y servidor de desarrollo
• TailwindCSS - Estilos
• shadcn/ui - Componentes UI
• pnpm - Gestor de paquetes
• Lucide React - Iconos
• TanStack Query - Manejo de estado y caché de datos
• TanStack Table - Tabla de datos avanzada

Gracias por la oportunidad de realizar esta prueba técnica. He disfrutado mucho trabajando en este proyecto y aplicando mis conocimientos en React y TypeScript. Espero que la solución propuesta cumpla con sus expectativas y estoy abierto a cualquier feedback o sugerencia para mejorarla. Nos vemos mañana en la entrevista técnica.