🛍️ CRUD de Productos - Prueba Técnica Frontend Junior

Aplicación construida con React para la prueba técnica de desarrollador frontend junior. Permite realizar operaciones CRUD sobre una lista de productos, incluyendo persistencia en localStorage, búsqueda, ordenamiento y tests unitarios.

🚀 Demo en Vercel

https://crud-productos.vercel.app/

✨ Funcionalidades

• ✅ Crear productos con los campos requeridos.
• ✅ Visualizar lista de productos.
• ✅ Eliminar productos.
• ✅ Ordenar por cantidad, creación, código y nombre.
• ✅ Filtrar productos por nombre con un input de búsqueda.
• ✅ Persistencia local mediante localStorage.
• ✅ Vista tipo tabla o tarjeta con botón para alternar.
• ✅ Paginación (4 productos en vista card, 10 en vista tabla).
• ✅ Interfaz totalmente responsiva (móvil y desktop).
• ✅ Accesibilidad básica con aria-label y focus.
• ✅ Animaciones y estilo moderno con TailwindCSS.
• ✅ Tests unitarios con Vitest + Testing Library.

🧠 Decisiones Técnicas

🪄 ¿Por qué Zustand?

Elegí Zustand para el manejo de estado por su:

• API simple y directa.
• Menor boilerplate comparado con Context API o Redux.
• Excelente rendimiento para apps pequeñas y escalables.

🎨 ¿Por qué TailwindCSS?

Usé TailwindCSS porque:

• Permite una construcción rápida y flexible de la UI.
• Facilita crear una interfaz profesional con clases utilitarias.
• Compatible con diseño responsivo y animaciones CSS avanzadas.

💾 ¿Por qué localStorage?

• Se especifica en la prueba que no debe haber backend.
• Es la forma más rápida y limpia de garantizar persistencia sin servidor.

🧪 ¿Por qué Vitest + Testing Library?

• Vitest es ligero, rápido y compatible con proyectos Vite.
• @testing-library/react permite simular el uso real de componentes.
• Se añadieron 3 tests que cubren renderizado, filtro y visibilidad de productos.

📂 Estructura del Proyecto

src/
├── assets/             # Archivos estáticos
├── components/         # Componentes reutilizables (ej. ListaProductos, ProductoItem)
├── store/              # Estado global usando Zustand
├── utils/              # Funciones auxiliares (ordenamiento, fechas, etc.)
├── __tests__/          # Tests unitarios
├── App.jsx             # Componente principal
├── main.jsx            # Entrada principal

⚙️ Instalación local

1. Clona el proyecto:

   git clone https://github.com/JohanBoDev/crud-productos.git
   cd crud-productos
   

2. Instala dependencias:

   npm install
   

3. Corre el proyecto en desarrollo:

   npm run dev
   

🧪 Ejecutar tests

Este proyecto incluye 3 pruebas unitarias con Zustand mockeado:

npm run test

Tests ubicados en: src/__tests__/ListaProductos.test.jsx

📝 Autor

Johan Bohorquez
📫 [email protected]
🔗 LinkedIn
💻 Portafolio Web
🐙 GitHub

📌 Notas Finales

• Aplicación construida sin backend, como lo exige la prueba.
• Código limpio, modular y listo para ser escalado.
• La estructura permite añadir nuevas funcionalidades sin fricción.
• El proyecto ha sido probado y validado para cumplir con todos los requisitos obligatorios y varios extras deseables de la prueba técnica.

✔️ Checklist de requisitos cumplidos

• Crear producto
• Ver lista de productos
• Eliminar producto
• Filtrar por nombre
• Ordenar por cantidad, creación, código y nombre
• Persistencia con localStorage
• Estado global con Zustand
• Componentes reutilizables
• TailwindCSS
• App responsiva
• Accesibilidad básica
• Tests unitarios
• Buen manejo de carpetas
• Animaciones y mejoras visuales

¡Gracias por revisar este proyecto! 🚀