/* spell-checker: disable */
- Diseño del challenge definiendo la paleta de colores y los estilos del texto
- Diseño de los componentes reusables
- Diseño de la pagina mas simple y bonita
- Cambio de CRA a Vite, para mejorar la velocidad a la hora de compilar
- Uso de TS para tipado y mejorar el autocompletado
- Se configuro commitlint con husky
- Se configuro el los labes de github similares a los types de comventional-commits
- Se cambio apollo-boost y @apollo/react-hooks a @apollo/client, por que apollo/client es una libreria mas moderna, tambien trae el provider y el client juntas
- Se configuro Codegen para generar los schemas automaticamente, tengo un tutorial sobre eso pero con angular, es lo mismo para react
- Se configuro eslint con las reglas de default, no se configuro prettier ya que yo escribire el codigo limpio
- Se agrego fontawesome para los iconos
Se crea una carpeta components, hooks, pages
recordando arquitectura limpia pide como minimo 3 capas (dominio, aplicacion, infraestructure) yo lo configuro creando 4 carpetas:
- Domain: aqui va la logica del negocio
- Aplication: aqui van las funciones que definen los casos de uso o requerimientos
- Infraestructure: aqui van los servicios externos como API, frameworks, otras librerias...
- Presentation: pertenece a Infraestructure ya que definimos todo sobre nuestro framework para el frontend, aqui se organiza de la siguiente forma:
- Atomic: hacemos uso de atomic design y storybook y defninimos nuestros componentes reusables
- Pages: hacemos uso de nuestros componentes armamos las paginas
- Styles: hacemos uso de Itcss y definimos los estilos
Ahora si queremos cambiar de framework solo se toca la capa de presentacion, la idea es que sea mantenible y escalable, el arbol de nuestros archivos deve crecer en anchura no en profundidad.
Se queria hacer una consulta cada ves que se escribia en el buscador o cuando seleccionaba el tipo de busqueda (Continent or Language), pero en la Api de graphql no existia la consulta con los filtros necesarios. Entonces se obtiene todos los paises al iniciar la aplicacion y cada ves que se escribe en el buscador o se cambia el tipo de busqueda se aplica un filtro a los paises.