Código para basement.studio challenge: b. Supply.
E-commerce de una página con el diseño de este figma construido en Next JS.
Preview del challenge.
- Next JS como framework.
- Typescript javascipt estricto.
- Tailwind CSS CSS framework.
- Cypress para tests de integración.
- ESLint para encontrar y resolver problemas en el código.
- Prettier para formatear el código.
- Framer Motion solo para pequeñas animaciones.
Se construyo un provider para el manejo del estado para el carrito usando useContext y useReducer que encapsula a toda la aplicación, los productos se obtienen de un mockup local renderizados en la página de inicio.
Cuando se agrega un producto al carrito el estado se actualizara con dispatch type: ADD_PRODUCT mandando todo el objeto del producto actual añadiendo valores adicionales como la cantidad y valores por defecto como el tamaño.
Se puede agregar o disminuir la cantidad de un producto con dispatch type PLUS_ONE ó type MINUS_ONE mandando el id del producto, cuando la cantidad es uno y se presiona el botón - este se eliminara del carrito automáticamente.
Los datos del carrito se guardan en el local storage y se muestran en consola cuando se presiona el botón de checkout.
- Tests unitarios con Jest y React testing library.
- Optimización de renderización de los componentes.
- Arreglar deslizamiento del texto
A man can’t have enough basement swagen la página de inicio para pantallas pequeñas.
- Instalar las dependencias del proyecto:
npm install. - Correr el servidor de desarrollo:
npm run dev.