- El proyecto consiste en realizar un e-commerce. En este caso, realicé una tienda de fotografías donde el cliente puede comprar imagenes impresas y encuadradas.
- El usuario al ingresar puede ver todas las imagenes en su pantalla o puede filtrarlas mediante las categorías que se encuentran en la barra de navegación.
- Para ingresar al detalle de cada item puede clickear en la tarjeta del item que desee.
- Una vez dentro, podrá ver la descripción del producto, la cantidad en stock, los métodos de pago y podrá elegir cuantos quiere. Ya elegida la cantidad de items que quiere comprar, se puede dirigir al carrito a través del icono en la barra de navegación o dentro del detalle del item presionando el botón "Finalizar Compra".
- Cada item cuenta con una disponibilidad de stock que se muestra en su pagina de detalle. Por lo tanto, se le permitirá elegir una cantidad a comprar no mayor a ese número.
- Una vez en el carrito, allí puede eliminar algún item si así lo desea, agregar más cantidad de cada uno, o borrar el carrito entero.
- Allí podrá ver el precio de cada item y el precio total.
- Por último al darle al botón de compra, se lo llevará a un formulario para que el cliente cargue sus datos y una vez realizado, al darle al botón de "Enviar", le aparecerá el mensaje de compra realizada con el ID de la transacción.
- Material UI
- Toastify
- TippyJS
- Firebase
- React-Router-Dom
- Axios
Las librerías Material UI, Toastify y TippyJS fueron aplicados para el estilo y para mejorar la experiencia del usuario, Material UI es empleado para los iconos, modal y formularios. Toastify es una librería de alertas y éstas aparecen al momento de agregar productos al carrito. TippyJS es utilizada para agregar tooltips en algunos elementos de la página. Firebase es recurrido como base de datos para los productos de la tienda. React Router Dom se usa para la navegación dentro de la aplicación y por ultimo axios que fue utilizado para las promesas dentro del proyecto.
La aplicación es totalmente responsiva, podrá visualizarla correctamente en cualquier dispositivo
Aquí unas capturas de la version mobile
