Being a fledgling web developer, I wanted to grasp the concepts of React. Following tutorials is important, but than I thought why not make something you like . So I decided to make a weather forecast app in React (sigh another one). You've got to start somewhere, right.

The app

Called WeatherMan React hosted on Github Pages, link to github profile here.
It is made in plain React (uses Context, no fancy Redux needed). Styling is done using Bootstrap and SASS.
You can search any location from a huge list of over 100,000 places and fetch 7 day weather forecast. Additionally, I also added a location map shown in Leaflet where you can show layers made of temperature, cloudy etc.
Weather service used is OpenWeatherMap - It has a one call API which returns Hourly and Minutely forecast too.
Here's a little image snippet:

https://dsaw.github.io/weatherman-react/

Challenges faced

In the process of creating the site, there were hiccups.

• After the closing of Dark Sky API, there was no free weather API that gave hourly forecasts (24 hour each day or so). So I went with MetaWeather at first. It is a good, free API service that aggregates weather data from multiple websites.
• After looking at other common websites, I used Algolia Search API for the autocomplete location service. The locations in Algolia and MW were different so I had to map it appropriately when clicking on the search term by setting Address context.
• But there were issues which I quickly encountered. There are many more locations in Algolia than there are in MetaWeather, which meant sometimes there were no equivalent places in MW giving weather results of neighbouring countries. The time zones were incorrect for some places. To remedy, I switched to OpenWeatherMap which had ample data in the One Call API. It was decent enough.
• Lastly, I used Leaflet to render a map when location is selected. You can select layers like city forecast, rain, wind speed. I used a plugin named leaflet-openweathermap. It used JSONP to fetch requests which posed a problem when trying to make requests through the proxy, so had to refactor to use Fetch.

TODO

To be honest, there are many improvements due:

• Refactor the code to separate presentation from the API specific parts
• Optimize the leaflet plugin code to improve response time
• Enhance Search bar & UI look & feel.

Conclusion

It was a great experience to build something from the ground up. Taking the first step and pushing through to complete it is a satisfying feeling.
Please comment & hit me up if you have anything to talk about :)
You can check the project and leave any bugs/feature requests in here.
https://github.com/dsaw/weatherman-react/issues