para correr el proyecto anda directo a Setup & Run
Hola! en este proyecto es una demo funcional de un eshop, cuenta con 3 vistas:
- Busqueda de productos: Nos brinda un input para poder hacer una busqueda de productos (contra la api de MeLi)
- Listado de productos: Nos muestra los productos encontrados junto a su imagen, precio, titulo, condicion y tipo de envio.
- Detalle de un producto: Ademas de los datos que ya se ven en el listado tenemos: Imagen com mas resolucion, Descripcion y cantidad de productos vendidos.
Stack:
- NodeJS (>14)
- Express (>4.17)
- Axios
- Jest (tests)
Es un BFF simple donde se hace wrapping de las api de MeLi:
- https://api.mercadolibre.com/sites/MLA/search?q=:q para realizar una busqueda
- https://api.mercadolibre.com/items/:id para obtener el detalle de un producto
- https://api.mercadolibre.com/items/:id/description para obtener la descripcion de un producto
- Lib
controllers
: punto de entrada de los routes orquestan los parametros recibidos y se comunican con los services para gestionar los datosservices
: saben donde y como buscar la informacionmodels
: conocen como se deben presentar los datos (y como convertir los datos externos en datos del dominio)routes
: las rutas y configuracion de los handlers (para derivar a los controllers)middleware
: se creo un custom middleware para agregar una firma a todos los requests
Sripts disponibles (con npm):
npm start
: levanta una instancia del backend en localhost el puerto se lee de.env
(si no se cambio es 4000)nom test
: corre los tests y muestra el coverage actual.
Algunas features no se completaron aun:
- Manejo de errores
- Configuracion de CORS (deja pasar todo)
- Coverage: se cubren solo los casos criticos
Aca se pone divertido!
Para el front se planteo una arquitectura de micro-frontends, pensando en la facilidad que nos da esto para orquestar distintos equipos de desarrollo, deploys mas chicos y con menos impacto, posibilidad de mejorar la performance en cada modulo, reutilización real de componentes/librerias, y algunas ventajas mas.
Stack:
- ReactJS (>17)
- ReactJSS (>10)
- Webpack
- Weppack Module Federation 😎
- Jest
- React Testing Library
El proyecto se forma por 5 microfonts:
host
: es el proyecto raiz, el encargado de orquestar y cargar los otros modulos (aunque cada modulo de por si, puede cargarse solo*), tiene un pequeño context + state (useContext
+useReducer
) para manejar el estado de los modulos invitados. No se opto porredux
o algo mas potente comosagas
para manejar este estado (y sus side-effects) porque la complejidad es casi nula, de hecho se podria evitar usar el contexto con algunos cambios en el backend.lib
: este modulo contiene los componentes que se comparten, por ejemplo:<ItemPrice/>
que se usa tanto en la busqueda como en el detalle de un producto. O bien, funciones de ayuda, como para generarstyles
con media queries (gracias aReactJSS
).product-detail-mf
: componentes para ver el detalle de un item. Recibe un ID, busca en el backend el detalle y lo renderiza.search-box-mf
: barra de busqueda, maneja el estado del form de busqueda. Se opto por un form para resolver la navegacion y no tener que manejar el estado en componentes controlados. Cuando se realiza una busqueda ejecuta una funcion que se pasa por parametros.search-result-mf
: busca productos y los renderiza aislando esta feature en un modulo 😁
*se pueden cargar solos, pero hay componentes que sin pasarle las props correctas no serian funcionales (nada que con un poco de ❤️ no se pueda arreglar)
Sripts disponibles en cada modulo (con npm):
npm start
: levanta el proyecto conwebpack
en localhost (el puerto esta hardcore en cadawebpack.config.js
friendly reminder: no lo cambies)npm run build
: hace build y deja el modulo listo en/dist
, lo vamos a usar para crear las imagenes de docker (si, si, hay soporte paraDocker
😎)npm test
: corre los tests con jest y muestra el coverage (por si no quedaba claro 😜)npm run lint
: no hace falta explicar...
Nota aparte para los estilos de la solucion. Se opto por usar React-JSS
para crear componentes con estilos individuales (util para los microfronts) y reducimos el tamaño del bundle.
Lamentablemente, se genera mucho codigo que no hace a la solucion. Lo ideal seria contar con una libreria de componentes que resuelva la parte visual.
Algunas features no se completaron:
- Mejorar el SEO con un SSR vendria de 10 💯
- react-helmet: mejoraria un poco la accesibilidad y SEO.
- Optimizar la generacion de bundles: https://webpack.js.org/guides/code-splitting/
- Agregar una libreria de componentes, no escala usar CSS-in-JS 😰
Se usa Lerna
para gestionar todos los modulos.
npm i
-> instalamos las dependenciasnpm start
-> Levanta todos los servicios, el proyecto host esta en : http://localhost:3000
Si! podemos correrlo con docker, mejoramos la performance porque se corre en modo production
y solo se sirven los bundles resultantes del publish.
Nota: cada MF tiene su docker image, montando sobre un ngnix (nginx:1.21.0-alpine
) los bundles generados previamente con npm build
.
Para el backend se usa la imagen node:14-alpine
Nuevamente aprovechamos lerna
y lo podemos levantar corriendo:
npm i
: (opcional si ya se instalaron los modulos)npm run start:docker
: esto hace un publish de cada modulo y usadocker-compose
para levantar los servicios.
Para parar los servicios podemos correr npm run stop:docker
desde la raiz tmb se puede correr los tests de todos los proyectos: npm run test
gracias por llegar hasta el final!