Aplicación web minimalista que permite consultar el clima actual y el pronóstico de los próximos días para cualquier ciudad del mundo. Ideal para mantenerse informado en tiempo real y practicar integración con APIs externas.
- Next.js — Framework React para SSR y routing
- Tailwind CSS — Estilos rápidos, limpios y responsivos
- OpenWeatherMap API — Clima actual y pronóstico
- Recharts — Visualización gráfica de datos
- Modo claro / oscuro — Activable desde el UI
- Búsqueda dinámica de ciudades
- Visualización del clima actual con íconos
- Pronóstico extendido con gráficas
- Interfaz limpia, adaptable y ligera
- Proximamente:
- Soporte para múltiples idiomas (actualmente en español)
- Clona el repositorio:
git clone https://github.com/tu-usuario/weather-app.git- Entra a la carpeta del proyecto:
cd weather-app- Instala las dependencias y ejecuta el proyecto con Node
npm install
npm run dev- Crea un archivo .env en la raíz del proyecto con tu clave de OpenWeatherMap
NEXT_PUBLIC_OPENWEATHER_API_KEY=tu_api_key_aqui- Nota: Puedes generar la api key desde:
- Conexión y consumo de APIs REST públicas
- Manejo de errores con try/catch y validación de respuestas
- Estructura modular de componentes en Next.js
- Buenas prácticas de diseño responsive con Tailwind
- Renderizado condicional y estado en React
Y finalmente, puedes ver la aplicación funcionando en linea aquí:
👉 WeatherApp
Si te gustó este proyecto, no dudes en conectar conmigo:
📧 alan.omar.ortz@gmail.com
🌐 LinkedIn
Hecho con cariño por Alan Ortiz (alanortizdev) ✨