Esta aplicación es el trabajo final del curso de React desarrollado en CoderHouse. La misma consiste un el desarrollo de un e-commerce, donde se pueden agregar/eliminar productos al carrito de compras y finalmente generar una orden de compra.
El Stack elegido se compone de las siguientes librerías y servicios:
- ReactJS ( para el desarrollo de la UI)
- TailwindCSS ( para los estilos CSS de la UI )
- Firebase ( para contar con una base de datos serverless )
El mencionado stack utiliza los siguientes lenguajes:
- Javascript
- HTML / CSS
- NoSQL (Firebase)
Para instalar el proyecto debes clonar el repositorio de código en tu equipo local:
- Via SSH: [email protected]:seemple/detodo-store.git
- Via HTTPS: https://github.com/seemple/detodo-store.git
Una vez clonado debes ejecutar desde la terminal el comando npm install. El mismo instalará todas las dependencias del proyecto para que puedas comenzar a trabajar con él.
Desde la terminal, utiliza el comando npm start. Ejecutarás la app en modo desarrollo. Puedes navegarla en http://localhost:3000 desde tu navegador.
La app se re-iniciará cuando realices cambios en el código. Y puedes ver lint errors en la consola de tu editor.
La app cuenta con una funcionalidad para importar productos en formato JSON hacia la base de datos alojada en la nube de FireStore.
Para ello, puedes navegar a /importar-productos. Desde esta URL podrás importar toda la información que se encuentra en el archivo JSON ubicado en /data/oldMockupData.js.
¡Cuidado! Antes de importar asegurate de respetar el formato pre-establecido en el archivo oldMoldMockupData.js para que la app funcione correctamente.
Des terminal, utiliza el comando npm run build . Este compila la app para producción en la carpeta build.
Como mencionamos anteriormente, se trata de una app tipo "e-commerce". Para utilizarla, debes navegar las categorías de productos. Al hacerlo, encontrarás diferentes items. Al hacer click en alguno de ellos, podrás ver el detalle del item y agregar al carrito la cantidad de productos que desees.
En la navegación principal, podrás consultar el carrito en todo momento y realizar las modificaciones que desees ( agregar o quitar productos )
Finalmente, cuando estes conforme con tu pedido, podrás proceder a realizar una nueva orden de compra.
Puede probar el uso de la app en esta versión demo Aclaración: La demo posee algunos elementos de UI que están a modo ilustrativo y no poseen funcionalidad. Por ejemplo: Las imágenes en el Detalle de Item.