📦 Inventario React

Aplicación web desarrollada con React para gestionar productos en un inventario. Permite agregar, editar, eliminar, filtrar y ordenar productos, mostrando resúmenes dinámicos por categoría y valor total.

🔗 Ver aplicación en producción

---

🚀 Funcionalidades principales

• Agregar productos con nombre, categoría, stock, precio y marca.
• Editar productos existentes mediante un formulario dinámico.
• Eliminar productos con confirmación directa.
• Filtrar por categoría con normalización de texto para evitar errores.
• Ordenar por precio de menor a mayor o viceversa.
• Resumen general: cantidad total y valor total del inventario.
• Resumen por categoría: cantidad y valor filtrado según selección.
• Formato de moneda local (COP) con toLocaleString.

---

🧠 Lógica destacada

• Uso de useState para manejar estado global y local.
• Generación de IDs únicos con crypto.randomUUID() para cada producto.
• Ordenamiento con .sort() y filtrado con .filter() sobre arrays derivados.
• Normalización de texto con .trim(), .toLowerCase() y .normalize("NFC") para evitar duplicados en categorías.
• Componentes reutilizables y desacoplados: AddProduct, EditProduct, ShowProducts, SortProduct, FilterProducts.

---

🖼️ Estructura visual

La interfaz está dividida en dos secciones principales:

• Aside (izquierda): filtros, ordenamientos y resúmenes.
• Main (derecha): formulario para agregar productos y tabla de inventario.

Diseño pensado en desktop-first, ideal para usuarios que gestionan inventario desde computador.

---

🛠️ Tecnologías utilizadas

• React con useState para manejo de estado.
• CSS modular con enfoque semántico.
• Vite como entorno de desarrollo rápido.
• PropTypes para validación de props en componentes.

---

📁 Estructura de carpetas

src/ ├── components/ │ ├── AddProduct.jsx │ ├── EditProduct.jsx │ ├── FilterProducts.jsx │ ├── ShowProducts.jsx │ └── SortProduct.jsx ├── App.jsx ├── App.css └── main.jsx

---

👨‍💻 Autor

Gonzalo Andrés Montoya Ardila – Desarrollador frontend autodidacta, enfocado en comprensión profunda, modularidad y semántica. Este proyecto refleja mi proceso de aprendizaje de buenas prácticas en React.

---

📦 Instalación y ejecución

# Clonar el repositorio
git clone https://github.com/andresmo23/inventario-react.git

# Instalar dependencias
npm install

# Ejecutar en desarrollo
npm run dev

# 📄 Licencia
Este proyecto está bajo la licencia MIT. Puedes usarlo, modificarlo y compartirlo libremente.