ReactMeteo

ReactMeteo es un monorepo moderno que combina un frontend potente con un backend eficiente para ofrecer información meteorológica en tiempo real.

---

🚀 Características

• Frontend Moderno: Construido con React 19, Vite y Tailwind CSS 4 para una experiencia de usuario fluida y reactiva.
• Backend Robusto: API en Node.js con Express que consume datos precisos de Open-Meteo.
• Persistencia Local con SQLite: Las preferencias del usuario (ciudad y email) se guardan en un fichero SQLite local mediante better-sqlite3 — sin dependencias cloud, sin credenciales que configurar.
• Email con Ethereal: Los correos de confirmación se envían con Nodemailer. Si no configuras un SMTP propio, se crea automáticamente una cuenta de prueba en Ethereal y el preview URL aparece en los logs del backend.
• Geolocalización Automática: Obtiene un horizonte de pronóstico de 7 días basado en la búsqueda de ciudades o las coordenadas del navegador, con datos horarios enriquecidos.
• Recomendaciones de Actividad: Sugiere los 3 mejores momentos para Pasear, Correr, Ir en bici, Tomar algo en terraza o Leer en casa, con explicación y detalle expandible.
• Actividades Personalizadas en Navegador: Permite guardar actividades propias en localStorage, reutilizando el criterio meteorológico de una actividad base y manteniéndolas disponibles tras recargar la página.
• Arquitectura Monorepo: Gestión simplificada de dependencias y scripts compartidos.

---

📂 Estructura del Proyecto

reactmeteo/
├── apps/
│   ├── frontend/   # SPA React (Vite) - Interfaz de usuario
│   └── backend/    # API Express (Node) - Lógica de negocio y persistencia
├── docs/           # Documentación y activos (logo, guías)
├── openspec/       # Especificaciones de diseño (OpenSpec)
└── package.json    # Workspaces y scripts raíz

---

🛠️ Requisitos Previos

• Node.js: Versión 20 o superior (probado con 22).
• npm: Versión 10 o superior.
• Herramientas de compilación nativas: better-sqlite3 se compila en la instalación. En macOS basta con tener Xcode Command Line Tools; en Linux, build-essential + python3; en Windows, windows-build-tools o Visual Studio Build Tools.
• Cuenta SMTP: (opcional). Sin configurar nada, el backend usa Ethereal automáticamente para previsualizar los correos.

---

⚙️ Instalación y Configuración

1. Clonar e Instalar dependencias

Desde la raíz del repositorio:

npm install

2. Configuración del Backend (apps/backend)

Crea el archivo .env basado en el ejemplo:

cp apps/backend/.env.example apps/backend/.env

Variables disponibles:

PORT=4000

# Ruta del fichero SQLite (relativa al cwd de `npm run dev` = apps/backend)
SQLITE_PATH=./data/preferences.db

# SMTP opcional — si no se rellena, Nodemailer crea una cuenta Ethereal
# y muestra credenciales + preview URL en los logs.
# SMTP_HOST=smtp.ethereal.email
# SMTP_PORT=587
# SMTP_SECURE=false
# SMTP_USER=
# SMTP_PASS=
# MAIL_FROM="ReactMeteo <no-reply@reactmeteo.local>"

Nota: La base SQLite (apps/backend/data/preferences.db) se crea sola la primera vez que se guarda una preferencia. La carpeta apps/backend/data/ está en .gitignore y no se commitea.

3. Configuración del Frontend (apps/frontend)

Crea el archivo .env.local:

cp apps/frontend/.env.local.example apps/frontend/.env.local

Asegúrate de que apunte a la URL de tu backend:

VITE_API_BASE=http://localhost:4000

---

🏃 Ejecución en Desarrollo

Puedes arrancar ambos servicios simultáneamente desde la raíz:

npm run dev

O de forma individual:

• Backend: npm run dev:backend (Disponible en http://localhost:4000)
• Frontend: npm run dev:frontend (Disponible en http://localhost:5173)

---

📡 API Endpoints

Weather

• GET /weather?city={nombre} — pronóstico por nombre de ciudad.
• GET /weather?lat={lat}&lon={lon} — pronóstico por coordenadas (usado por la geolocalización del navegador).
  • Ambas variantes devuelven { location, hourly } con datos horarios para los próximos 7 días.
  • hourly incluye time, temperature_2m, weathercode, precipitation_probability y windspeed_10m.

User Preferences

• POST /preferences
  • Guarda la preferencia en SQLite y dispara (fire-and-forget) un email de confirmación vía Nodemailer.
  • Body: { "email": "user@example.com", "city": "Madrid" }
  • Respuesta: 204 No Content. El preview URL del email aparece en los logs del backend ([mailer] Preview URL: https://ethereal.email/message/…).

---

📦 Compilación para Producción

# Construir frontend (genera estáticos en apps/frontend/dist/)
npm run build:frontend

# Construir backend (prepara para ejecución con Node)
npm run build:backend

---

🤝 Contribuir

Las contribuciones son bienvenidas. Por favor, abre un issue o un pull request para sugerir cambios.

---

📄 Licencia

Este proyecto es de código abierto. Consulta el archivo LICENSE (si existe) para más detalles.