LINKS:
Curso: React JS - CoderHouse - Comisión 60045
- Alumno: Francisco Zapata.
- Profesora: Laura Gonzalez Martin.
- Tutor Adjunto: Sergio López Rey.
Important
Herramientas Utilizadas:
- Jsx - React Js
- React-Router-Dom => Para gestionar la navegación de las rutas de la webApp.
- Hooks - Algunos usados: useState, useParams, useContext, useEffect.
- Uso de Props
- CSS - Para dar los estilos a la Single Page Application.
- HTML - Uso de forma mínima en el index y en las etiquetas semánticas junto a la escritura en jsx.
- JavaScript - Para la lógica de la aplicación escrito como jsx.
- Netlify - Como alojamiento y desplegamiento de la Web.
- Firebase - Para guardar las órdenes de compra con la info de los usuarios, y la subida de los productos.
- Toastify - Uso de librería para el aviso con alerta de "producto agregado".
Note
Proyecto Final -> 100%
-
Directorio src/ con la carpeta assets/ con las imágenes de íconos y de productos, carpeta de components/ , context/ , firebase/ ,stylesheets/ y las views/. También archivos principales para la iniciar la app (main.jsx, App.jsx e Index.html).
-
Carpeta principal con la documentación, como este mismo Readme.md, y archivos de configuraciones.
-
CartContext => uso de useContext/Provider para poder usar las funciones en los componentes hijos.
Components/
-
Header -> Con el nombre del e-commerce (con link al Home '/').
-
Navbar -> Con categorías y el CartWidget.
-
CartWidget -> el número se desmonta dependiendo si hay o no productos en él. Usé un icon importando un script para poder darle uso.
-
CheckOut
-
CheckOut / Brief -> detalle de compra ya finalizada con los datos del usuario y generación de la orden que queda guardada en Firebase, borrado del carrito automático y botón para volver al Home.
-
UserInfo -> con el fomulario para generar la orden que se guarda en Firebase, con validaciones de los inputs.
-
Carrito -> detalle de cada ítem en la vista del carrito con renderizado condicional, botones para incrementar o decrementar la cantidad del producto basandose en el stockDisponible. Nombre del producto, img, cantidad (+) y (-), precio unitario y total, también incluye la opción de eliminar el producto con la (X) y vaciar el carrito.
-
-
Catálogo -> de productos, separados por categorías y a su vez, vista de todos los productos en el Home ('/'), cada categoría con sus rutas con React-Router-Dom(rutas en App.jsx / NavBar.jsx).
-
ItemListContainer -> contenedor de todas las Cards con sus datos.
-
ItemList -> Diseño de la card del producto.
-
ItemDetailContainer -> Es el que recibe el producto en detalle una vez clickeado la card.
-
ItemDetail
- ItemCount => ContadorComp, para incrementar {handleSumar} o decrementar {handleRestar} la cantidad, y un botón para agregar el producto al carrito {handleAgregar}.
- Descripcion + precio + stock (con funcion para que vaya bajando la cant de stock).
-
-
Carrousel (extra) -> Para mostrar las marcas de bebidas que tenemos.
-
TextSlider (extra) -> Textos descriptivos que llaman la atención del cliente para resumir la page.
-
Footer -> Para darle la finalización a la página, con las categorias y el link de mi github.
Note
Pre-Entrega 2 => 100%
- Uso de React-router-dom.
- Se crearon las cards de los productos con su contador.
- Componente Navbar con cart y diferentes caterogías de productos.
- Home con las cards de todos los productos y Logo con link al home con path='/'
- Link al detalle de cada uno de los productos.
- Integración con parámetros de async-mocks utilizando efects y hooks.
Note
Pre-Entrega 1 => 100%
- Componente Header (extra) (Logo).
- Componente NavBar (Enlaces con las categorias).
- Componente CartWidget (con ícono y nº hardcodeado - dentro de NavBar).
- Componente contenedor ItemListContainer.jsx con una prop greeting.
- Componente Footer (extra).
Instalación de proyecto / Correr proyecto
- Clonar el repositorio: bash git clone https://github.com/frandivCode/e-commerce.git
- Instalar las dependencias: npm install
- Iniciar la aplicación: npm run dev
O link para desplegar la Web: