Dashboard meteorológico con previsión de 7 días, gráficos y diseño oscuro.
Demo: weather.jherranz.dev · Estado: En desarrollo activo
Aplicación web para consultar el tiempo con más detalle que las apps habituales. Busca cualquier ciudad del mundo y obtén temperatura horaria, probabilidad de lluvia, índice UV, viento y previsión completa de la semana.
No requiere API key ni registro — usa la API gratuita de Open-Meteo.
| Capa | Tecnología |
|---|---|
| Framework | Next.js 14 (App Router) |
| Lenguaje | TypeScript |
| Estilos | Tailwind CSS |
| Gráficos | Recharts |
| API del tiempo | Open-Meteo (gratuita) |
| Geocodificación | Open-Meteo Geocoding API |
| Deploy | Vercel |
- Búsqueda de ciudades con autocompletado
- Detección de ubicación automática (Geolocation API)
- Temperatura actual, máx/mín y descripción del tiempo
- Gráfico de temperatura para las próximas 24 horas
- Previsión de 7 días con icono, temperatura y precipitación
- Gráfico de probabilidad de precipitación
- Viento: velocidad y dirección
- Índice UV con indicador de riesgo
- Hora de amanecer y atardecer
- Historial de ciudades buscadas (guardado local)
- Diseño totalmente responsive
No se necesita ninguna API key.
# 1. Clonar el repositorio
git clone https://github.com/firegeist/weather-dashboard.git
cd weather-dashboard
# 2. Instalar dependencias
npm install
# 3. Iniciar el servidor de desarrollo
npm run dev
# Build de producción
npm run build
# Linter
npm run lintAbre http://localhost:3000.
- Temperatura actual y sensación térmica
- Descripción del tiempo con icono
- Temperatura máxima y mínima del día
- Temperatura horaria: evolución de las próximas 24 horas
- Precipitación: probabilidad hora a hora del día actual
| Card | Datos |
|---|---|
| Previsión 7 días | Icono, max/min, precipitación por día |
| Viento | Velocidad (km/h) y dirección |
| Índice UV | Valor numérico + nivel de riesgo (bajo, moderado, alto, muy alto) |
| Amanecer/Atardecer | Horas locales del día |
Los datos meteorológicos se obtienen en el servidor (Server Components) para mejorar la velocidad de carga inicial y el SEO. Los gráficos de Recharts se renderizan en el cliente por compatibilidad con la librería.
app/[city]/page.tsx → Server Component: obtiene datos, pasa a componentes
components/HourlyChart → Client Component: renderiza con Recharts
lib/weather.ts → Toda la lógica de fetch y transformación de datos
Open-Meteo es una API meteorológica open-source con datos de alta resolución. Es completamente gratuita para uso no comercial y no requiere registro ni API key.
Los datos provienen de modelos numéricos de organismos meteorológicos europeos (ECMWF, DWD, MeteoFrance).
MIT