🛒 Gestión de Usuarios y Productos - React + TypeScript

Este proyecto es una aplicación web desarrollada con React + TypeScript, que permite gestionar usuarios y productos consumiendo datos de la API pública de DummyJSON. Incluye autenticación, dashboard visual, filtros, búsqueda, exportación a PDF/CSV, carrito de compras simulado, y más.

---

🚀 Funcionalidades principales

• ✅ Login funcional con validación de credenciales.
• ✅ Gestión de usuarios:
  • Listado con paginación e infinite scroll.
  • Filtro por género y orden alfabético.
  • Búsqueda por nombre.
  • Detalle de usuario (modal/página).
  • Exportación a PDF y CSV.
• ✅ Gestión de productos:
  • Listado con paginación.
  • Filtro por categoría.
  • Buscador por título.
  • Detalle con imagen ampliada.
  • Agregado de productos simulados.
  • Exportación a PDF.
• ✅ Carrito de compras:
  • Modal con contador, cantidades, totales.
  • Botones para eliminar productos o unidades.
• ✅ Dashboard:
  • Visualización de estadísticas.
  • Navegación rápida hacia Usuarios y Productos.
• ✅ Autenticación robusta:
  • Tokens (accessToken y refreshToken) manejados con interceptor.
  • Soporte para múltiples pestañas y expiración automática.

---

🧪 Tecnologías utilizadas

• React + TypeScript
• React Router DOM
• Axios
• TailwindCSS v4
• HTML5 & CSS3
• DummyJSON API
• jsPDF + html2canvas (para exportación a PDF)

---

📦 Instalación y ejecución

1. Clona el repositorio

git clone https://github.com/tu-usuario/gestion-usuarios-productos.git
cd gestion-usuarios-productos

2. Instala las dependencias

npm install

Asegúrate de tener instalado Node.js (v18 o superior recomendado).

3. Ejecuta el servidor de desarrollo

npm run dev

La aplicación estará disponible en http://localhost:5173

---

🔐 Credenciales de prueba

Puedes usar estas credenciales reales de DummyJSON para hacer login:

Email: kminchelle@example.com
Password: 0lelplR

---

📁 Estructura del proyecto

src/
│
├── assets/              # Imágenes e íconos
├── components/          # Componentes reutilizables
├── pages/               # Vistas principales: Login, Dashboard, Usuarios, Productos
├── services/            # Servicios: authService, userService, productService, dashboardService
├── utils/               # Funciones utilitarias (PDF, CSV, almacenamiento)
├── hooks/               # Custom Hooks (useAuth, usePagination, etc.)
├── App.tsx              # Configuración de rutas
└── main.tsx             # Punto de entrada

---

📤 Despliegue

Puedes desplegar fácilmente este proyecto en:

• Vercel
• Netlify
• GitHub Pages (con configuración adicional)

---

📌 Estado del proyecto

Este proyecto está completo y listo para ser extendido, por ejemplo:

• Agregar backend propio
• Agregar manejo de roles
• Persistencia real del carrito
• Funcionalidad de edición/eliminación

---

👨‍💻 Autor

Desarrollado por SiologoDr ✨
GitHub: @siologodr

---

📃 Licencia

Este proyecto está bajo la licencia MIT.