Este proyecto es una aplicación de ecommerce enfocada en la funcionalidad de carrito de compras.
- Node.js (versión recomendada: LTS)
- npm (incluido con Node.js)
- Clona el repositorio o descarga el código fuente.
- Abre una terminal y navega hasta la carpeta del proyecto.
- Instala las dependencias ejecutando:
- Para que el proyecto funciones el primer paso es instalar las dependencias:
npm install
- Una vez instalada las dependencias y finalizada la creación de la carpeta node_modules, ejercutar la siguiente script:
npm run dev
Se abrirá un puerto en localhost.
A continuación explicaré cada paso que se debe realizar en la app para visualizar las funcionalidades requeridas y propuesta por el challenger:
Lo primero que vamos a observar es un formulario para ingresar a la aplicación:
(
Dentro del codigo se encuentran mockeados los usuarios, en este ejemplo utilizaremos al usuario Juan Perez:
Antes de ingresar a la aplicación hay una pequeña validación por si el usuario o la contraseña no coinciden.
El usuario es [email protected] y la contraseña 123456.
Una vez dentro de la aplicación podemos observar lo siguiente:
- En el navbar encontramos productos donde se encuentra lo que vemos a la vista, crear carrito que es donde elegimos los distintos tipos de carritos y simular fecha que nos sirve para comprobar cada funcionalidad propuesta en el enunciado del challenger.
- Luego tenemos el icono de perfil donde obtendremos información de nuestro usuario:
El carrito donde se aplica las reglas de negocio esperado para este desafío, en el cual podremos agregar o eliminar productos, agregar la cantidad de productos que requieramos siempre y cuando el stock nos permita y el total de nuestra compra.
Por último se encuentra el botón logout que nos desloguea de la cuenta. - Luego se encuentra la opción crear carrito, que es la misma que la del componente crear carrito, nos redireccionará al mismo componente y por otra parte están los productos. Los productos pertenecen a Mercado Libre, realicé un fetch a la API de Mercado Libre. Generalmente para realizar la integración a la API, tengo una carpeta aparte como una especie de service con los protocolos https apuntando a los endpoints correspondientes y con inteceptors si es necesario para handlear lo mejor posibles los distintos errores. También en el código dejé un mock de productos para que puedan ver que lo utilicé para maquetar las tarjetas del producto.
En este caso como es nuestro primer movimiento, nuestro status es normal y a la fecha de hoy 05/03 no se encuentra ninguna fecha promocional, por ende solo podremos crear un carrito de status normal:
Como ya elegí el carrito se habilitan los productos (estaban en disabled sin carrito) y se visualiza en el carrito la cantidad de $ que estamos gastando:
Haciendo click en el carrito podremos hacer un ABM de productos dentro de los carritos:
Se pueden agregar todos los productos que creamos necesarios hasta agotar stock (atención con ese dato porque sino no podrán agregar más de 1 producto si hay un producto que tenga solamente 1 de stock).
Como el tipo de carrito es normal, solo aplica un descuento del 25% en caso de que lleves 4 productos:
Si compramos más de 10 productos entonces se nos hará un descuento de 100
Cuando realizamos la compra nos arroja un alert (que en realidad debería ser un toast) informando de nuestra compra:
Cuando entramos a nuestro perfil, nos informa ahora si la cantidad de compra que hicimos durante el mes:
Ahora dentro del simulador de fecha, eligiendo la fecha que deseamos simular y haciendo click en simular fecha, nos simula que estamos en la fecha que elegimos, de paso también hay un pequeño recordatorio de las fechas promocionables.
Haciendo click en el perfil, el status cambia porque superamos la cantidad de compra del mes para ser VIP:
Por ende se desbloquea el carrito VIP. En este caso consideré que el usuario VIP puede acceder al carrito normal porque quizás sinceramente no compre más de 10 productos por lo que solo le importe el beneficio del 25% entonces me pareció factible dejar ambos carritos disponibles:
Lo mismo para el carrito VIP, cuando aplicas 4 productos se aplica un 25% de descuento y si supera los 10, el descuento es de 500:
Ahora avanzamos la fecha pero esta vez al 10 de mayo (dia de la madre).
Se activa entonces el carrito promocional y el descuento de 300.
Ahora si vacío el carrito, no compro nada y adelanto un mes mas:
Pierdo el status de VIP y paso a ser usuario normal:
Espero que haya sido bastante claro con esta pequeña guía, dejo a disposición el código fuente para que exploren un poco a nivel tanto código como funcionalidades. Ante cualquier consulta, no duden en escribirme. Gracias por hacerme parte del proceso. ¡Saludos!