En este repositorio encontrarás el código fuente de una aplicación web desarrollada con Vite y React que utiliza las APIs oficiales de OpenWeather y GeoDB Cities para consultar el pronóstico del tiempo: del día, de las próximas horas y de los 5 días futuros; tanto para tu ubicación como para otras ciudades.
En caso de no querer dar permisos de geolocalización, no te preocupes, podrás buscar ciudades con el buscador o seleccionar una ciudad de la lista. Y tranquilo, es posible añadir y quitar ciudades de la lista para adaptarla a tus gustos.
Además de esto, podrás cambiar los ajustes de la unidad de temperatura entre Fahrenheit y Celsius.
El proyecto está desplegado en Vercel.
La aplicación consta las siguientes partes:
-
/: En la página principal, encontrarás datos del tiempo actual ya ssea en tu localización o de la ciudad escogida.
-
Hours: Aquí encontrarás una lista con datos de la prevision meteorológica de las siguientes horas. Cada una se puede expandir para mostrar más detalles.
-
Days: Aquí encontrarás una cuadrícula con datos de la prevision meteorológica de los siguientes días. Se puede seleccionar cada día para ver los datos en horas.
-
Not Found: En caso de poner una ruta errónea, se cargará por defecto esta página donde podrás redirigirte a la home.
Si te interesa modificar este proyecto, ya sea para practicar o hacer un pull request con cambios o sugerencias, asegúrate de seguir estos pasos:
-
Genera una API Key en la página oficial de OPEN Weather y otra en la página de Rapidapi. Estas serán necesaria para realizar las peticiones a la APIs.
-
Clona este repositorio a tu computadora local usando el siguiente comando:
-
Accede al directorio del proyecto:
-
Crea un archivo
.env
en el directorio raíz del proyecto y agrega tu API Key de la NASA de la siguiente manera:
VITE_PUBLIC_WEATHER_API_KEY=TU_API_KEY
VITE_PUBLIC_RAPID_GEO_API_KEY=TU_API_KEY
- Instala las dependencias del proyecto ejecutando:
npm install
- Una vez que hayas configurado el proyecto, puedes iniciar la aplicación localmente utilizando el siguiente comando:
npm run dev
La aplicación estará disponible en localhost en tu navegador.