Esta es una e-Commerce ficticia, presentada como proyecto final del curso de React de Coderhouse (Camada 16155)
La demo esta disponible en Netlify.
Para instalar esta aplicación es necesario clonar el repositorio:
git clone https://github.com/pablomayobre/tienda-coderhouse.git
Luego se deberá instalar las dependencias
cd tienda-coderhouse
npm install
Si da error, se deberá usar npm install --force ya que se utilizan librerías experimentales y puede que existan problemas de compatibilidad con React.
La aplicación fue creada con create-react-app por lo que se puede ejecutar en modo de desarrollo utilizando el siguiente comando:
npm start
Esto permite ejecutar la página en un entorno local y que esta responda a cambios en los archivos.
La otra alternativa es compilar en modo producción, para esto se utiliza el siguiente comando:
npm run build
Una vez compilado, se creará la carpeta build con nuestra app lista para ser puesta en un servidor.
Cabe destacar que se deberá configurar el servidor para que todas las URLs dirijan a index.html ya que este es el punto de entrada de nuestra página web.
Esta es una lista de las dependencias principales del proyecto.
Como ya se mencionó anteriormente esta aplicación fue hecha a partir de create-react-app sin embargo React fue actualizado a la version experimental 18.0.0.
La razón siendo que esta versión cuenta con funcionalidades como Suspense y Concurrent Mode que facilitan el desarrollo de aplicaciones que deben esperar a una API para renderizar sus páginas.
Es decir que esta aplicación se beneficia de Suspense simplificando el código necesario para para mostrar pantallas de carga.
Este proyecto fue desarrollado al 100% en TypeScript, esto se logró utilizando el template de TypeScript provisto por create-react-app.
Cabe destacar que se modificó la configuración para hacer uso del modo estricto con strict: true y otras funciones provistas por TypeScript.
La siguiente dependencia más usada de este proyecto es Chakra, un conjunto de componentes muy completo que se pueden personalizar con facilidad. Toda la interfáz de usuario fue hecha con estos componentes.
De hecho las unicas 2 librerías que se agregaron fueron react-icons para los iconos usados en la interfaz y formik para el manejo de formularios (en particular el formulario de órdenes)
Chakra a su vez depende de emotion y framer-motion sin embargo estas no fueron usadas directamente, sino a travez de Chakra.
Para poder navegar a través de la página de una manera más rápida, se utiliza React-Router, en este caso tambien se utiliza la version 6.0.0 que está actualmente en beta.
Esta versión permite utilizar Suspense para hacer lazy-loading de rutas (es decir que solo se cargan las rutas necesarias y no toda la aplicación completa).
Para interactuar con Firebase se utiliza Reactfire, esta librería provee una serie de Hooks y Contexts que permiten interactuar con Firebase de una forma más nativa a React.
Sin embargo la verdadera razón de su uso es la posibilidad de usar Suspense mientras se cargan los resultados de Firebase.
Esta librería fuerza a usar la version 9 de Firebase, por lo que se adopta la API modular de Firestore.
Por ultimo SWR o State-while-revalidate provee un Hook llamado useSWR que permite hacer pedidos asincrónicos y obtener los resultados facilmente, empleando un cache interno para no pedir un mismo resultado dos veces.
Esta librería se integra muy bien con Suspense lo cual facilita mucho su uso.
Se utilizó para hacer mocks a una API ficticia antes de incorporar Firebase, y se utiliza, en la versión final, para la carga asincrónica de las imágenes de la página.
Aún quedan cosas por mejorar, esta es una lista de cosas que me gustarían implementar en un futuro.
La barra de busqueda no es funcional, la idea era implementar Algolia Search para realizar una busqueda en los productos de la página.
Que el usuario pueda marcar sus productos favoritos y añadirlos al carrito desde su Wishlist personal
Me gustaría que la orden de compra se realizara en una función de Firebase, permitiendo así que el cliente no ejecute el código de actualización de stock y que el precio se garantice desde el backend.
Esto permitiría que las reglas sean más estrictas y el cliente solo tenga permisos de escritura.
La función haría lo que useSaveOrder hace actualmente y devolvería el ID de la orden en un objeto JSON.
El formulario de orden de compra podría contar con validación de campos, en especial los referidos a e-mail y teléfono.
Me gustaría agregar un formulario de contacto y linkearlo en un footer.
Este formulario guardaría la información en Firebase y contaría con un CAPTCHA para evitar el spam.
La vista de orden de compra no es completamente responsive.
Añadir una opción al modal de orden de compra para que aún con una cuenta iniciada se pueda comprar con otros datos.
Copyright (c) 2021 - Pablo Ariel Mayobre