Skip to content

Latest commit

 

History

4 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 

Repository files navigation

🌦️ ClimaTrip

Clima inmersivo y planificador de viajes inteligente

Un dashboard meteorológico premium con escenas animadas, pronósticos detallados y un planificador de viajes que te recomienda qué llevar, qué hacer y a qué prestar atención en cada destino.

React TypeScript Vite TailwindCSS shadcn/ui


✨ Características

🌤️ Dashboard del tiempo

  • Escena animada de fondo que cambia según la condición meteorológica y la hora del día (sol, lluvia, nubes, nieve, noche estrellada…).
  • Pronóstico horario interactivo — selecciona cualquier hora para previsualizar las condiciones.
  • Pronóstico semanal con máximas, mínimas, probabilidad de lluvia y viento.
  • Métricas en tiempo real: sensación térmica, humedad, viento, presión, nubosidad, índice UV y calidad del aire (AQI).
  • Búsqueda híbrida de ciudades, regiones, comunidades autónomas y países (Open-Meteo + Nominatim/OSM).
  • Favoritos persistentes para acceder rápido a tus ubicaciones habituales.
{AB26ECD0-4F0C-4471-BDC5-8F31454275A6} {366CA3BA-BB0E-4CBA-BE6F-FB6CA3C13084}

🧳 Planificador de viajes

  • Multi-destino: añade varias ciudades y construye tu itinerario completo.
  • Pronóstico por día y destino con tira deslizable horizontal.
  • Recomendaciones inteligentes generadas a partir del clima previsto:
    • 🎒 Packing pool — qué meter en la maleta.
    • 🎯 Activities pool — qué hacer en cada destino según el tiempo.
    • ⚠️ Warnings pool — alertas de calor, lluvia, viento, UV, etc.
  • Modo de transporte (vuelo, coche, tren) que ajusta los consejos.
  • Guardado de viajes con persistencia local y carga posterior.
  • Prevención de duplicados y validación de coordenadas para evitar destinos repetidos.
{298E9E39-5A76-4068-B5A7-071D81DC166A} {2E38BE7E-ABAD-46F3-AC5A-8B383C7C2CB6}

🎨 Experiencia de usuario

  • Tema oscuro elegante con tokens semánticos HSL.
  • Tipografía Inter y jerarquía visual cuidada.
  • Animaciones suaves, microinteracciones y feedback visual con toasts.
  • Totalmente responsive (móvil, tablet, escritorio).
  • Scroll horizontal "wheel-hijack" inteligente que libera la página al final del recorrido.

🧱 Stack técnico

Capa Tecnología
Framework React 18 + Vite 5 + TypeScript 5
Estilos Tailwind CSS 3 + tokens semánticos HSL
Componentes shadcn/ui + Radix UI
Iconografía lucide-react
Routing React Router 6
Estado TanStack Query + hooks locales (useState, useReducer)
Fechas date-fns (locale es)
Notificaciones sonner + shadcn toast
Formularios react-hook-form + zod
APIs Open-Meteo (tiempo) + Nominatim/OSM (geocoding regional)
Tests Vitest + Testing Library + jsdom

🌐 APIs utilizadas

Servicio Uso
Open-Meteo Forecast Pronóstico actual, horario y diario
Open-Meteo Geocoding Búsqueda de ciudades
Open-Meteo Air Quality AQI europeo y contaminantes
Nominatim (OSM) Búsqueda de regiones, estados y países

Todas las APIs son gratuitas y sin clave, ideales para prototipado y producción ligera.

Hecho con ❤️ por Aisurf3r · React · Tailwind · Open-Meteo

About

Dashboard meteorológico y planificador de viajes inteligente

Topics

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors