Este proyecto es una aplicación web que proporciona pronósticos del tiempo y datos relevantes de ciudades. Utiliza Next.js, React y una variedad de APIs para obtener y mostrar información meteorológica.
- Búsqueda de ciudades para obtener pronósticos del tiempo.
- Listado de los cinco lugares más relevantes basados en la popularidad.
- Visualización de pronósticos del tiempo para los próximos cinco días.
- Tabla de colores para representar diferentes temperaturas.
El proyecto se compone principalmente de los siguientes componentes y módulos:
Home
: Componente principal que maneja la página de inicio y la búsqueda.WeatherForecastList
: Muestra el pronóstico del tiempo y los lugares relevantes.Search
: Un componente para realizar búsquedas.WeatherCard
,CityNotFound
,RelevantPlace
: Componentes para mostrar diferentes tipos de datos.getWeatherFromCity
,getFiveMostRelevantPlacesFromCity
: Funciones para obtener datos desde APIs externas.
- Node.js
- npm o yarn
- Clonar el repositorio.
- Instalar las dependencias:
npm install
oyarn install
. - Configurar las variables de entorno (
.env
):RESERVAMOS_ENDPOINT
: Endpoint para la API de búsqueda de ciudades.OPENWEATHERMAP_ENDPOINT
: Endpoint para la API del tiempo.OPENWEATHERMAP_API_KEY
: Clave API para OpenWeatherMap.
Ejecutar npm run dev
o yarn dev
para iniciar la aplicación en modo desarrollo.
![monterreydesktpo](https://private-user-images.githubusercontent.com/64867364/290021635-d688dfb9-7014-4d6d-83dc-1f3f4bc289cb.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTQ5MDU3MzUsIm5iZiI6MTcxNDkwNTQzNSwicGF0aCI6Ii82NDg2NzM2NC8yOTAwMjE2MzUtZDY4OGRmYjktNzAxNC00ZDZkLTgzZGMtMWYzZjRiYzI4OWNiLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA1MDUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNTA1VDEwMzcxNVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTA1YWM0YTk0N2QzMGUzNTY4NjNhYjE2OTEyZjVjMWE1MGIwMWRlMzdiYzAyOGU0M2U1NjQwZjdmZmQ3YjA2MDImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.5to6wfObTh7nAtk9-PKFLwDg8PQcaqJz1ivkjm5ZVy4)
![monterrey tablet](https://private-user-images.githubusercontent.com/64867364/290022131-be97fbf1-c881-4b56-b440-f2fc0115da95.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTQ5MDU3MzUsIm5iZiI6MTcxNDkwNTQzNSwicGF0aCI6Ii82NDg2NzM2NC8yOTAwMjIxMzEtYmU5N2ZiZjEtYzg4MS00YjU2LWI0NDAtZjJmYzAxMTVkYTk1LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA1MDUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNTA1VDEwMzcxNVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWMyNjQyNmI1ZGZjMzE5ZWM2ODNiMWJjMjVmMzA5OTU3YzIxZjdiNGM1MjRkMmQ2ZGQ5Yjc3ZWNjMzJmNDVlYmImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.Ur2cg3Z-vWvdSRLEfRmbqsK1fPdyqbLsTXPoabOYl6U)
![mobile](https://private-user-images.githubusercontent.com/64867364/290023825-8553e380-d4a3-4e4f-ad6e-aebe511c8700.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTQ5MDU3MzUsIm5iZiI6MTcxNDkwNTQzNSwicGF0aCI6Ii82NDg2NzM2NC8yOTAwMjM4MjUtODU1M2UzODAtZDRhMy00ZTRmLWFkNmUtYWViZTUxMWM4NzAwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA1MDUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNTA1VDEwMzcxNVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWFjMmZiOTgxYTRkMjQ0NmNmNDRlZjkwNzNjNmY1ZjU1NTMwMDEzMTcxY2RlZGQ1ZjYwNjNhZTY3ODAwOGRmNDEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.xVn2jUH4oZvrQGpDK46D-aAUJ5L7zJOpDxiDWzv1f34)