Proyecto realizado como parte del programa Talento Tech Argentina diseñado por el ministerio de educación de la Ciudad de Buenos Aires.
Este proyecto simula una tienda online con productos obtenidos desde una API externa, incluye sistema de login, rutas protegidas, y funcionalidades modernas de React.
- ✅ Listado de productos obtenidos desde MockAPI
- ✅ Se puede agregar productos al carrito así como también eliminarlos
- ✅ Sistema de autenticación de roles: ADMIN (contraseña: '1234' usuario:'admin') y USUARIO (contraseña: 'contraseña' usuario: 'usuario')
- ✅ Rutas protegidas (/carrito) que requieren autenticación
- ✅ Rutas dinámicas para ver detalles individuales de productos (/productos/:id)
- ✅ Navegación con React Router
- ✅ Estructura de layout completa: Header con links y buscador, main según ruta, footer fijo en todas las vistas
- ✅ Manejo de errores y mensajes de carga al obtener productos
- ✅ Panel de administración
- ✅ Búsqueda y paginación
- ✅ Notificaciones interactivas
- ⚛️ React + React Router DOM
- Hooks (useState, useEffect, useContext, useParams)
- React Context API
- React Icons
- React Toastify
- 🌐 MockAPI para simular backend
- 🎨 Combinación de CSS y Bootstrap para el diseño responsivo
- 🔐 Context API para la autenticación
- 🚀 Vite como entorno de desarrollo
src/ ├── components/ │ ├── AuthContext.jsx │ ├── Carousel.jsx │ ├── Carrito.jsx │ ├── Footer.jsx │ ├── Header.jsx │ ├── Login.jsx │ ├── Logos.jsx │ ├── Productos.jsx │ ├── ProductosDetalle.jsx │ └── RutaProtegida.jsx ├── About.jsx ├── App.jsx ├── Contact.jsx ├── main.jsx └── styles.css
- Cloná el repositorio:
git clone https://github.com/tuusuario/carrito-react-talento-tech.git
cd carrito-react-talento-tech - Instalá las dependencias:
npm install- Iniciá el servidor:
npm run dev
Diego Enrique Andrade – Estudiante de Ingeniería en Informática (UBA) Participante de Talento Tech Argentina