Crear una interfaz de usuario agradable y fácil de usar, que permita a los usuarios explorar la información sobre los diferentes continentes y países de manera intuitiva. Además, la interfaz deberá ser adaptable para ofrecer una experiencia de usuario óptima tanto en dispositivos de escritorio como en dispositivos móviles. Instrucciones:
El reto técnico consiste en desarrollar una interfaz de usuario atractiva y adaptable (responsive) que exhiba una lista de continentes y países, junto con los detalles de cada país.
Asegurar que el diseño sea responsive y brinde una experiencia de usuario adecuada en dispositivos móviles y tabletas.
-
Replicar fielmente el diseño UI proporcionado para la versión web en la aplicación.
-
Utilizar el diseño proporcionado para el sidebar con ítems y el área principal de la página.
-
Implementar un sidebar con ítems que representen diferentes opciones, como "Inicio", "Continentes", "Países", etc. Al hacer clic en un ítem del sidebar, se deberá cargar el contenido correspondiente en el área principal de la página. El contenido de cada ítem puede ser simple, siguiendo el diseño proporcionado.
-
Mostrar una lista de continentes que contenga información básica con su nombre y código identificativo, permitiendo que al seleccionar un continente se desplieguen los países asociados a él.
-
Proporcionar una lista de países con información básica, incluyendo el nombre del país, su bandera y su código identificativo. Al hacer clic en un país en particular, se deben mostrar detalles adicionales como su capital, idioma, población y moneda.
-
Las imágenes que se muestren en la interfaz de usuario pueden ser obtenidas de cualquier API de imágenes.
-
Se recomienda utilizar la API de "Pixabay" o "Unsplash" para obtener imágenes de alta calidad y gratuitas.
-
Utilizar Apollo Client (u otra biblioteca similar) para establecer la conexión y consumir datos de la API GraphQL proporcionada en https://countries.trevorblades.com/
-
Asegurarse de seguir el diseño UI proporcionado para la versión web y que este sea responsive en dispositivos móviles y tabletas.
-
Empaquetar todas las librerías o dependencias externas utilizadas en la aplicación, evitando el uso de CDN.
-
Utilizar una metodología de desarrollo que promueva buenas prácticas y modularidad, facilitando el mantenimiento y escalabilidad del código.
-
Subir el proyecto completo a un repositorio en GitHub y desplegarlo en un dominio público para su evaluación.