ReactMeteo es un monorepo moderno que combina un frontend potente con un backend eficiente para ofrecer información meteorológica en tiempo real.
- 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 el pronóstico basado en la búsqueda de ciudades o las coordenadas del navegador, con datos detallados por hora (24h).
- Arquitectura Monorepo: Gestión simplificada de dependencias y scripts compartidos.
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
- Node.js: Versión 20 o superior (probado con 22).
- npm: Versión 10 o superior.
- Herramientas de compilación nativas:
better-sqlite3se compila en la instalación. En macOS basta con tener Xcode Command Line Tools; en Linux,build-essential+python3; en Windows,windows-build-toolso Visual Studio Build Tools. - Cuenta SMTP: (opcional). Sin configurar nada, el backend usa Ethereal automáticamente para previsualizar los correos.
Desde la raíz del repositorio:
npm installCrea el archivo .env basado en el ejemplo:
cp apps/backend/.env.example apps/backend/.envVariables 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 carpetaapps/backend/data/está en.gitignorey no se commitea.
Crea el archivo .env.local:
cp apps/frontend/.env.local.example apps/frontend/.env.localAsegúrate de que apunte a la URL de tu backend:
VITE_API_BASE=http://localhost:4000Puedes arrancar ambos servicios simultáneamente desde la raíz:
npm run devO de forma individual:
- Backend:
npm run dev:backend(Disponible enhttp://localhost:4000) - Frontend:
npm run dev:frontend(Disponible enhttp://localhost:5173)
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 las próximas 24 horas.
- Ambas variantes devuelven
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/…).
# Construir frontend (genera estáticos en apps/frontend/dist/)
npm run build:frontend
# Construir backend (prepara para ejecución con Node)
npm run build:backendLas contribuciones son bienvenidas. Por favor, abre un issue o un pull request para sugerir cambios.
Este proyecto es de código abierto. Consulta el archivo LICENSE (si existe) para más detalles.