Climão
Panel meteorológico adaptable con geolocalización, búsqueda y ciudades favoritas
2025
Proyecto
Climão es un panel para consultar las condiciones actuales y el pronóstico de cinco días en la ubicación del usuario o en ciudades buscadas. La interfaz reúne temperatura, sensación térmica, humedad, viento, presión, amanecer y atardecer, además de un gráfico de las próximas horas.
Las búsquedas recientes y hasta diez ciudades favoritas se guardan localmente. La aplicación también ofrece temas claro y oscuro, estados de carga y error, y controles accesibles mediante teclado.
Identidad visual del proyecto.
Arquitectura Técnica
El frontend es una SPA en React y TypeScript construida con Vite. React Router organiza el panel y las páginas de ciudad. TanStack Query separa el estado remoto por coordenadas, conserva los datos en caché durante cinco minutos y cancela solicitudes obsoletas con AbortSignal. OpenWeatherMap proporciona clima actual, pronóstico y geocodificación.
La interfaz combina Tailwind CSS, primitivas Radix y Recharts. Los favoritos y el historial utilizan localStorage, por lo que la experiencia no requiere una cuenta ni un backend. La búsqueda aplica debounce para reducir llamadas mientras se escribe, y las coordenadas de la URL se validan antes de consultar la API.
Mantenimiento y Rendimiento
Una revisión técnica incorporó un lockfile reproducible, actualizó la cadena de lint a ESLint 10, migró los gráficos a Recharts 3 y renovó bibliotecas de interfaz compatibles. La división por ruta y la carga exclusiva de herramientas de desarrollo redujeron el mayor archivo JavaScript generado de aproximadamente 789 kB a 380 kB.
El proyecto supera ESLint sin avisos, la compilación TypeScript y el build de producción. Las migraciones mayores—React 19, Tailwind 4, Vite 8 y TypeScript 7—permanecen separadas para realizar pruebas visuales y de navegador específicas.