CompuTar - Tienda de Computacion

Mi e-commerce, esta pensado para una pagina de ventar de articulos de computacion, tal como procesadores, memorias, etc. La misma consta de una barra de navegacion desde la cual se pueden acceder a las categorias de productos, clickeando en cada categoria va a mostrar los productos de esa categoria los cuales tienen un boton para acceder a los detalles de cada uno, en el detalle del producto se puede seleccionar la cantidad deseada junto con el boton de añadir al carrito, uan vez que se añade al carrito el boton es reemplazado con el de terminar compras el cual te lleva al carrito. En este, se pueden observar los productos agregados junto con la cantidad, con posibilidad de eliminar productos especificos o todos, en esta misma pantalla nos vamos a encontrar con el boton para finalizar la compra el cual nos redirige al formulario para completar los datos de la compra, y cuando la compra esta finalizada lleva a un landing en el cual se muestran algunos datos de la compra junto con el id de la misma.

Dependencias(NPM) utilizadas

Para brindarle vida al proyecto utilice materialize-css, react-number-format y react-content-loader, el primero me brinda la estructura y estilos generales de la pagina para agilizar la creacion de la pagina, react-number-format lo utilizo para formatear los precios y que queden mas esteticos y legibles, y el tercero brinda los placeholders animados que utilizo cuando se generan los tiempos de espera al solicitar los datos a firebase, de esta forma le hago saber al usuario que la pagina esta procesando la solicitud y brindo un feedback visual. Ademas de las ya mencionadas utilice emailjs-com la cual me permitio de manera sencilla y agil manejar el formulario de contacto para que envie un correo real.

Screenshots

Pantalla principal Pantalla producto Pantalla carrito Pantalla checkout Pantalla success Pantalla error Pantalla contacto Pantalla error