Built with HTML, CSS, React, and OpenWeatherMap API
This is a React project focused on creating a simple, user-friendly design with real-time weather search functionality. My end goal of this project was to create a fully functional worldwide weather checker that allows users to search a city and see the weather in real-time as well as the 5-day forecast. I also wanted to build on my skillset by creating a temperature conversion that will change the forecasted temperature to either ºC or ºF in order to be more accessible for international users.
I divided this project in two phases. The first phase was creating the weather search by integrating the OpenWeatherMap API and returning the real-time, current weather of a chosen city, displaying both imperial and metric temperatures as well as the weather description, humidity, and wind speed.The main challenge of this phase was deciding when to create different components as to not over complicate their functionality.
The second phase was dedicated to creating the daily forecast by building the layout, styling the feature, and integrating the API with the interface to display the data on the app, making sure it looks good for different scenarios. In this phase, I learned to loop through the numbers array using the JavaScript map() function to take care of rendering the daily forecast for the consecutive dates in order to avoid repetitive code. I also learned the importance of ensuring that a function must return something at all times, even if it is null. The main challenge of building the forecast feature was to ensure that the weather data displayed each day would update when the weather data of the parent component changed due to coordinates of a new city search. To accomplish this, I learned to incorporate a { Use Effect } which allows you to run code after the component is changed and loaded.
I also decided to build a feature that would display the current day and time of the city that you search. This was important to me because I find it helpful feature for those traveling to new destinations or for those with friends/family in other parts of the world.
I am very pleased with the end result of the application, however I would improve it further by choosing a more sophisticated API that would display the weather of every city and country. I found the OpenWeatherMap API easy to use, but it was limited in its results without inputting exact coordinates. For example, if searching for "Rome", the API does not take into account multiple cities in the world named "Rome" and returns "Rome, USA" rather than "Rome, Italy" - which is why I decided to display the country name as well as the city name in the application.