Aplicación de prueba realizada con React que consiste en un catalogo de productos que pueden ser canjeados.
En la guía para comenzar el reto hace referencia al comando.
create-react-app name-of-your-appEl problema es que en la documentación de React todos los ejemplos estan en TypeScript.
Agregué TypScript al proyecto usando el parámetro --typescript.
create-react-app name-of-your-app --typescriptAgregué pruebas unitarias de los componentes. Utilicé Jest y la librería react-testing-library para simplificar lógica.
Los test se pueden correr usando el comando yarn test
El icono de bolsa de compras del componente ProductCard cambia cuando el mouse se encima. Si utilizamos 2 iconos, al inspeccionar el elemento podemos ver que se renderizan cada vez que pasamos el mouse.
Se utiliza un único icono y cambiamos el color mediante estilos.
Se utilizó el state de los componentes para pasarlo como parametro y así interactuar entre componentes. La accion, que realiza un usuario cuando canjea un producto y se descuentan sus puntos involucra la comuncación de varios componentes.
Se implementó un manejador de estados. Utilizamos Unstated en vez de Redux por que es mucho más simple, liviano y práctico.
Se implementó node-sass para evitar escribir CSS puro y utilizar un solo archivo de estilos (/assets/styles/theme.scss).
Se utilizó una cuenta en github para crear y subir el proyecto.
La primera version de la aplicación se liberó el Lunes 24 utilizando el tag name v1.0.0.
Desde ese punto se hizo un branch llamado develop donde se desarrolló todas las features. Cada vez que se terminaba una feature se realizaba el merge con master y luego se publicaba un nuevo tag.
Se utilizó un archivo CHANGELOG.md para documentar los cambios realizados. El formato del archivo está basado en el template de Keep A Changelog.
Como GitHub no usa pipelines como GitLab o Bitbuket, utilicé CircleCi para poder correr los test y garantizar una integridad de la aplicación. El historial de los builds se pueden ver en mcaligares/react-test.
El reto pedía que la opcion de canjear un producto apareciera cuando el usuario interactuaba con él. Se realizó una modificación en la cual se agregó el botón de canje en el producto.
Éste criterio se tomó para simplificar la acción de canjear. Del modo que se solicitaba, el usuario debía realizar dos acciones para concretar el canje. La primer acción es acercar el mouse al producto y la segunda es hacer click en el boton. Con la modificación le toma solo una acción ya que el boton siempre está visible.
Se agregó un buscador que realiza un filtro por nombre de producto y por nombre de categoría.
Se agergó una sección perfil para ver datos del usuario y poder agregar puntos a la cuenta.
Las imagenes de los productos tardan en cargarse y cuando lo hacen modifican el tamaño de las cards.
Se agregó una imagen de precarga que se mostrará hasta que la imagen del producto se descarge completamente. La implementación fue mediante CSS usando la propiedad background-image.
Reemplazar el loading de productos por un skeleton.