11/10/2023
# QINQELA CoffeeShop - Proyecto de E-CommerceQinqela CoffeeShop es un proyecto de desarrollo web de E-Commerce enfocado en la venta de productos relacionados con el café. Este proyecto fue creado con el propósito de presentar lo aprendido en el Curso de ReactJS dictado por el Profesor Franco Dioaquez y seguir avanzando en los estudios de desarrollo front-end y aprender a construir aplicaciones web dinámicas con ReactJS.
-
Catálogo de Productos: Los usuarios pueden explorar una variedad de productos relacionados con el café, incluyendo diferentes mezclas y sabores.
-
Carrito de Compras: Los usuarios pueden agregar productos al carrito de compras, ver la cantidad de productos en el carrito y administrar las cantidades de los productos.
-
Categorías de Productos: Los productos se organizan en categorías, lo que permite a los usuarios filtrar y ver productos específicos en función de sus preferencias.
-
Detalles del Producto: Los usuarios pueden ver los detalles de cada producto, incluyendo su descripción, precio y disponibilidad.
-
Compra y Datos del Comprador: Los usuarios pueden completar una compra proporcionando sus datos personales, y los detalles de la compra se almacenan en Firebase.
-
React: La aplicación está construida utilizando React, un popular marco de trabajo de JavaScript para el desarrollo de interfaces de usuario.
-
React Router: React Router se utiliza para la navegación y el enrutamiento dentro de la aplicación de una sola página.
-
Firebase: Firebase se utiliza para almacenar y gestionar datos, incluyendo los productos y los detalles de compra de los usuarios.
-
React Context API: Se implementa el contexto de carrito de compras utilizando la API de contexto de React para compartir y administrar el estado del carrito en toda la aplicación.
-
Bootstrap: Bootstrap se utiliza para estilizar y dar formato a la aplicación, mejorando su apariencia y experiencia de usuario.
-
Animaciones: Se incorporan animaciones y efectos visuales para mejorar la experiencia del usuario en toda la aplicación.
Este proyecto es solo el comienzo de tu viaje en el desarrollo front-end. A continuación, se presentan algunos pasos adicionales que puedes considerar para seguir avanzando:
-
Mejorar la Interfaz de Usuario: Continúa refinando y mejorando el diseño de tu aplicación para que sea aún más atractiva.
-
Agregar Autenticación: Implementa la autenticación de usuarios para permitir que los usuarios se registren y gestionen sus perfiles.
-
Gestión de Pedidos: Crea una funcionalidad de seguimiento de pedidos para que los usuarios puedan verificar el estado de sus compras.
-
Optimización de Rendimiento: Asegúrate de que la aplicación funcione de manera eficiente y optimiza su rendimiento.
-
Pruebas Unitarias y de Integración: Considera agregar pruebas unitarias y de integración para garantizar que la aplicación sea robusta.
Herramientas Utilizadas:
- HTML
- CSS
- BOOTSTRAP
- JAVASCRIPT
- REACTJS
- VITE
- REACT-BOOTSTRAP
- GIT
- GITHUB
- FIREBASE/FIRESTORE
- Todo el diseño en general, Logos, Paleta de Colores, Efectos de botones, Cards de los Productos, estilo configuración del diseño es de autoría propia, ya que al tener background en el mundo del diseño y haber realizado el Curso de Desarrollo Web, pude aplicar todos mis conocimientos para tal fin.
- CLONAR REPOSITORIO:
git clone https://github.com/DowoDev/EntregaFinal-JuanRubio-ReactJS.git - INSTALACION DE DEPENDENCIAS:
npm install - EJECUTAR PROYECTO:
npm run dev
- PAGINA PRINCIPAL
- PAGINA NOSOTROS
- DETALLE DESPLIEGUE SECCIÓN "CATEGORIAS"
- Detalle Card Productos:
- PRODUCTO ENVIADO AL CARRITO (VER DETALLE WIDGET)
- PRODUCTO EN EL CARRITO
- FORMULARIO AL FINALIZAR LA COMPRA
- ORDEN DE COMPRA
- CARRITO VACIO
Espero que este proyecto me ayude a avanzar en mis estudios de desarrollo front-end y a mejorar mis habilidades como desarrollador web.
Muchas Gracias.
Saludos,
J. Sebastián Rubio