🌤️ Dashboard Climático

Un dashboard interactivo para consultar información climática en tiempo real, construido con React + Vite en el frontend y Node.js/Express en el backend.

📋 Funcionalidades

🔍 Búsqueda de Ciudades

• Búsqueda inteligente de ciudades por nombre
• Interfaz responsiva con validación en tiempo real
• Estados de carga y manejo de errores

🌡️ Información Climática Actual

• Temperatura actual con sensación térmica
• Condiciones meteorológicas con iconos descriptivos
• Ubicación completa (ciudad, región, país)
• Fecha y hora local de la ubicación consultada
• Última actualización de los datos

📊 Estadísticas Detalladas

• Humedad relativa del aire
• Velocidad y dirección del viento (incluyendo ráfagas)
• Presión atmosférica
• Visibilidad
• Índice UV
• Punto de rocío

💨 Calidad del Aire

• Índice de calidad del aire EPA con clasificación visual
• Contaminantes específicos:
  • Monóxido de carbono (CO)
  • Dióxido de nitrógeno (NO₂)
  • Ozono (O₃)
  • Dióxido de azufre (SO₂)
  • Partículas finas (PM2.5)
  • Partículas gruesas (PM10)
• Indicadores visuales de nivel de calidad (Buena/Moderada/Dañina)

📅 Pronóstico Extendido

• Pronóstico de 3 días con información detallada
• Temperaturas máximas y mínimas
• Probabilidad de precipitación
• Humedad promedio
• Velocidad máxima del viento
• Índice UV diario
• Alertas de lluvia automáticas
• Resumen estadístico del período

🛠️ Tecnologías Utilizadas

Frontend

• React 18.2.0 - Biblioteca de interfaz de usuario
• Vite 5.0.8 - Herramienta de construcción y desarrollo
• Bootstrap 5.3.2 - Framework CSS para diseño responsivo
• Bootstrap Icons - Iconografía
• Sass 1.69.5 - Preprocesador CSS

Backend

• Node.js - Runtime de JavaScript
• Express 4.18.2 - Framework web
• Axios 1.6.0 - Cliente HTTP
• CORS 2.8.5 - Middleware para peticiones cross-origin
• dotenv 16.3.1 - Gestión de variables de entorno

Herramientas de Desarrollo

• Nodemon 3.0.2 - Recarga automática del servidor
• Concurrently 8.2.2 - Ejecución simultánea de scripts
• @vitejs/plugin-react 4.2.1 - Plugin de React para Vite

🌐 API Utilizada

El dashboard utiliza WeatherAPI.com, una API gratuita de datos meteorológicos que proporciona:

• Datos meteorológicos actuales en tiempo real
• Pronósticos hasta 3 días
• Información de calidad del aire
• Datos astronómicos (amanecer/atardecer)
• Búsqueda de ubicaciones

Endpoints utilizados:

• GET /v1/current.json - Información climática actual
• GET /v1/forecast.json - Pronóstico meteorológico
• GET /v1/search.json - Búsqueda de ciudades
• GET /v1/astronomy.json - Datos astronómicos

⚠️ Limitaciones de la API

Nota importante: La API utilizada es gratuita y tiene una limitación de 60 llamadas diarias. Debido a esta restricción, la clave de API (API Key) se actualiza cada dos semanas para mantener el servicio operativo.

🚀 Instalación y Uso

Prerrequisitos

• Node.js (v14 o superior)
• npm o yarn

git clone <repository-url>
cd clima-app2

2. Instalar dependencias

npm install

3. Configurar variables de entorno

Crear un archivo .env en la raíz del proyecto:

WEATHER_API_KEY=tu_clave_de_weatherapi.com
PORT=5000

4. Ejecutar la aplicación

# Ejecutar frontend y backend simultáneamente
npm run dev

# O ejecutar por separado:
npm run server  # Backend en puerto 5000
npm run client  # Frontend en puerto 5173

5. Construcción para producción

npm run build

📁 Estructura del Proyecto

clima-app2/
├── src/                          # Código fuente del frontend
│   ├── components/               # Componentes React
│   │   ├── SearchBar.jsx        # Barra de búsqueda
│   │   ├── WeatherDashboard.jsx # Dashboard principal
│   │   ├── CurrentWeather.jsx   # Información actual
│   │   ├── WeatherStats.jsx     # Estadísticas detalladas
│   │   ├── AirQuality.jsx       # Calidad del aire
│   │   └── ForecastSection.jsx  # Pronóstico extendido
│   ├── App.jsx                  # Componente principal
│   └── main.jsx                 # Punto de entrada
├── server/                      # Código fuente del backend
│   ├── services/               # Servicios
│   │   └── weatherService.js   # Servicio de API meteorológica
│   ├── routes/                 # Rutas de la API
│   │   └── weather.js          # Rutas meteorológicas
│   └── index.js                # Servidor Express
├── package.json                # Dependencias y scripts
└── README.md                   # Este archivo

🎨 Características de UI/UX

• Diseño responsivo adaptable a todos los dispositivos
• Interfaz intuitiva con iconografía descriptiva
• Estados de carga y feedback visual
• Manejo de errores con mensajes informativos
• Paleta de colores coherente y accesible
• Animaciones suaves y transiciones
• Tipografía clara y legible

🔧 API Routes

Backend Endpoints

GET /api/weather/current/:city     # Clima actual de una ciudad
GET /api/weather/forecast/:city    # Pronóstico de una ciudad
GET /api/weather/search?q=query    # Buscar ciudades
GET /api/weather/astronomy/:city   # Datos astronómicos

📄 Licencia

Este proyecto está bajo la Licencia MIT.

🤝 Contribuciones

Las contribuciones son bienvenidas. Por favor:

1. Fork el proyecto
2. Crea una rama para tu feature (git checkout -b feature/AmazingFeature)
3. Commit tus cambios (git commit -m 'Add some AmazingFeature')
4. Push a la rama (git push origin feature/AmazingFeature)
5. Abre un Pull Request

---

Desarrollado con ❤️ utilizando React, Node.js y WeatherAPI.com