Esta aplicación esta desarrollada en ReactJS y se puede ver varios elementos importante de esta librería, como los customs hooks, un manejador de estados como Context API, el routing y estilos.
La función principal de la app es listar los países que se obtienes de la API – REST Countries API te permite listar todos los países o traer la data uno solo pasándole un parámetro.
Características
Las funciones principales que se pueden encontrar en esta App son las siguientes:
- Menú de navegación que solo tiene un botón toggle para cambiar el tema de la aplicación.
- Una Grid con todos los países que están separados por una card con su imagen, titulo y algunos datos.
- Un filtro que ayuda a buscar un país por su nombre.
- Un dropdown para poder filtrar los países por su región.
- Tema de Oscuro y Claro.
- Almacena en el Sessión Storage el tema que hayas seleccionado.
- Responsive Design, se adapta a cualquier dispositivo.
Mejoras
Algunas de las mejoras que tengo pensado aplicar para esta aplicación son la siguiente:
- Evitar que se carguen todos países en la página principal, e.g. Cargar solo 10 al inicio y darle la opción de «cargar más», incluso hacerlo más dinámico y que cargue solo a medida que se haga scroll.
- Abrir un popup al darle clic a algún país y que este contenga un mapa con la ubicación.
Tecnologías utilizadas
- React versión: 16.13.1
- Styled Component: 5.2.0
- React Router DOM: 5.2.0
Screenshots
Recursos
Este proyecto esta hecho gracias a una plataforma que te ayuda a crear proyectos de la vida real FrontendMentor.io tienen muchos ejercicios gratis y otros premium.
- El proyecto que cree esta inspirado en REST Countries API with color theme switcher de FrontendMentor