Proyecto: Aplicación SPA con React para un eCommerce
🌐 Link a la web ****| Repositorio en GitHub
Descripción General:
El objetivo de este proyecto fue poner en práctica los conceptos aprendidos en clase sobre HTML, CSS, JavaScript, y Vue, aplicándolos en un nuevo framework: React. Inspirado en las excelentes enseñanzas del profesor Elfar Morantes, el increíble apoyo de Katherine, junto a documentación y recursos adicionales, desarrollé una aplicación de una sola página (SPA) que permite navegar sin utilizar librerías como react-router-dom, implementando enrutamiento personalizado con JavaScript y React para comprender el renderizado condicional y el funcionamiento interno de estos frameworks y librerías.
Características Clave:
- Autenticación con Login y Token:
- Formulario para captura de datos de usuario.
- Contrasta los datos ingresados con los de una API externa.
- Uso de
useContext para manejar el estado global y almacenar un token de autenticación.
- E-commerce Funcional:
- Los productos se obtienen dinámicamente desde una API utilizando
fetch y funciones asíncronas.
- Los usuarios pueden filtrar productos según sus necesidades.
- Carrito de compras que permite agregar productos, ajustar cantidades y calcular el total.
- Slider de Inicio:
- Componente de slider dinámico que muestra imágenes obtenidas desde una API.
- Implementado con transiciones suaves y diseño responsivo.
- Enrutamiento Manual:
- Navegación entre secciones implementada manualmente con lógica en JavaScript y React.
- Permite comprender cómo funcionan los mecanismos internos del renderizado condicional sin depender de librerías externas como
react-router-dom.
Tecnologías Utilizadas:
- Consumo de API y Fetching de Datos: Obtención de datos desde APIs utilizando
fetch y manejo de promesas.
- Hooks de React:
useContext, useState, useId, useEffect.
- Prop Drilling: Paso de información entre componentes, apoyando la gestión de estados con
useContext.
- Estilos:
- CSS Flexbox y CSS Grid para crear un diseño responsivo.
- Animaciones para transiciones suaves y dinámicas.
- Renderizado Condicional de ReactJS: Control de vistas y lógica para diferentes secciones.
- Otros: HTML, JavaScript.