REST Countries APP

React Countries App

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.