WorldRanks es una aplicación web que muestra información sobre todos los países del mundo. Permite explorar países, filtrarlos por diferentes criterios y ver información detallada de cada uno, incluyendo sus países vecinos.
Durante el desarrollo de este proyecto, adquirí y reforcé conocimientos importantes:
Aprendí a implementar una store con Zustand para manejar el estado global de la aplicación. Zustand me permitió crear un store simple y eficiente para gestionar los filtros de búsqueda (texto, región, estado) de forma centralizada, evitando el prop drilling y manteniendo el código limpio:
// Ejemplo de implementación de store
import { create } from 'zustand';
const useFilterStore = create((set) => ({
filters: { text: '', region: [], status: [] },
setFilter: (key, value) =>
set((state) => ({
filters: { ...state.filters, [key]: value },
})),
}));Afiancé el uso de React para construir aplicaciones web interactivas. Implementé React Router para:
- Manejar las diferentes vistas de la aplicación (listado y detalle de país)
- Utilizar parámetros dinámicos (
/:name) para obtener y mostrar el contenido específico de cada país - Configurar rutas con lazy loading para optimizar el rendimiento
Implementé la librería tailwind-animations para agregar transiciones suaves al mostrar:
- La lista de países al cargar la página
- Los resultados filtrados cuando el usuario aplica filtros
- Mejorando la experiencia de usuario con feedback visual
- REST Countries API - API utilizada para obtener la información de los países.
- Zustand Documentation - Documentación de Zustand para el manejo de estado global.
- React v19.2.0
- TypeScript v5.9.3
- Vite v7.2.4
- Tailwind CSS v4.1.18
- React Router v7.12.0
- Zustand v5.0.10 - State management
- @vitejs/plugin-react-swc - Fast Refresh con SWC
- 🌍 Listado de países: Visualiza todos los países del mundo con su bandera, nombre, población, área y región.
- 🔍 Búsqueda por texto: Filtra países por nombre.
- 📊 Ordenamiento: Ordena países por población, nombre, área o región.
- 🗺️ Filtro por regiones: Filtra por continentes (Americas, Africa, Asia, Europe, Oceania, Antarctic).
- ✅ Filtro por estado: Filtra por países independientes o miembros de la ONU.
- 📄 Página de detalle: Información completa de cada país incluyendo:
- Bandera
- Nombre oficial y común
- Población y área
- Capital
- Subregión
- Idiomas
- Monedas
- Continente
- Países vecinos
- ⚡ Lazy Loading: Carga diferida de páginas para mejor rendimiento.
- 📱 Diseño responsivo: Adaptable a diferentes tamaños de pantalla.
Para clonar y ejecutar esta aplicación, necesitas Git y Node.js instalados. Se recomienda usar pnpm como gestor de paquetes.
# Clonar el repositorio
git clone https://github.com/Mooenz/react-countries-page.git
# Entrar al directorio
cd react-countries-page
# Instalar dependencias
pnpm install
# Ejecutar en modo desarrollo
pnpm dev
# Compilar para producción
pnpm build
# Previsualizar build de producción
pnpm preview- REST Countries API - Proveedor de datos de países.
- devChallenges.io - Plataforma del challenge.