Weather App

This application allows users to search for a city name, and check the weather forecast. This project uses the metaweather API to first search for the location id- called where on earth (woeid) id. If the city is recognized by the API, it returns the woeid, which is then used to make a second call to the same API, and fetch real-time weather. The application shows the current forecast, and also for the next 5 days. Additionally, this app also allows users to view data in either degree Fahrenheit or degree Celcius units.

Weather app image

Tech Stack

  • HTML
  • CSS
  • ReactJS

Project Learnings

My key takeaway was developing an understanding of React components, maintaining multiple states and hooks. Being my first large react project, I learned about organizing and structuring files in a react project. I also got an opportunity to understand how fetching data works in React.

Project Challenges

  • Figuring the number of components and states that were required for the application was a major challenge.
  • Fetching data in a React application was another challenge. The next challenge was immediately fetching weather data when location id was available.
  • Updating a child component whenever the state of parent component was changed.
  • A final challenge was deciding which values were to be passed as props from a parent to a child component.