🚀 Ver demo

E-commerce de productos para streaming realizado con React para proyecto final en Coderhouse.

• Clonar repositorio.
• Dentro del directorio clonado ejectuar npm install.
• Ejecutar la app con el comando npm run start.

• react-router-dom v5.2.0: para generar las rutas de navegación.
• firebase v8.8.0 para conectar a Firebase y realizar operaciones en el mismo para crear y actualizar colecciones.
• tailwindcss: Framework de CSS
  • postcss, postcss-import, autoprefixer: dependencias necesarias para implementar tailwdindcss.

Los productos se encuentran cargados en Firebase, cada producto tiene los siguientes detalles:

• categoryId
• description
• imageUrl
• price
• stock
• title

components/Navbar.jsx

• Se utiliza useState para controlar el menu cuando esta abierto y cerrado.
• Se crea un array para las opciones del menu para Desktop y Mobile.

components/ItemList.jsx

• Se utiliza firestore para utilizar la colección de items o mostrar todos los productos.

components/ItemDetailContainer.jsx

• Se utiliza firestore para mostrar el detalle de un solo producto en la colección de items.

context/CartProvider.jsx

• Se crea el contexto y se agregan las funciones necesarias para calcular precio total y cantidad total de productos.
• Se utiliza useState para crear un array para el carro y un objeto para la orden.

firebase/index.js

• Se agrega la configuración de Firebase.

• La app es responsive y se utiliza tailwindcss como framework de CSS.
• Imagenes: Se utiliza imagen de Unplash para el hero e imagenes de amazon.com para los productos.
• Iconos: heroicons