Weather app

  • React
  • Exercises
  • Weather app

React exercise number 10

  • Async Requests
  • Components
  • JSX
  • Router
  • useEffect
  • useState

Weather app

Let's build a weather app that checks the current weather and forecast for cities around the world, using React.

Details

To do this, we are going to use this API endpoint, which returns weather info for world cities in JSON format. The endpoint you should use is this one:

GET https://goweather.herokuapp.com/weather/${encodeURIComponent(city)}

Examples:
Lisbon -> https://goweather.herokuapp.com/weather/Lisbon
San Francisco -> https://goweather.herokuapp.com/weather/San%20Francisco

That returns a JSON structured as follows:

{
  "temperature": "19 °C",
  "wind": "22 km/h",
  "description": "Partly cloudy",
  "forecast": [
    {
      "day": "1",
      "temperature": "25 °C",
      "wind": "33 km/h"
    },
    {
      "day": "2",
      "temperature": "23 °C",
      "wind": "28 km/h"
    },
    {
      "day": "3",
      "temperature": "27 °C",
      "wind": "26 km/h"
    }
  ]
}

Exercise

Step 1

Build the weather app, so that when the user writes a city name on the input field and clicks the button, you properly call the API endpoint with the provided city name and show the current weather below for that city.

  • Use state to manage the input text.
  • Use state to store the weather data that is returned.
  • When you have results, show the city name, temperature, and wind speed for the current day

Step 2

What does the API return when you input an invalid city name? Show an error message every time the API returns invalid data.

Step 3

Refactor your app to use components. You should have at least 3 components:

  • <SearchBox />: Containing the input text and search button.
  • <WeatherResult />: Containing the current weather result.
  • <ErrorMessage />: Containing the error message.

Step 4

Show a loading state with the text Loading... when the app is waiting for an API response.

Step 5

Disabled the search button if the input text is empty.

Step 6

Within the JSON result, the forecast is an array that contains information about the weather on the next 3 days. Calculate and show on the <WeatherResult /> component, which one of the next 3 days has the following:

  • Highest temperature
  • Lowest temperature
  • Highest wind speed
  • Lowest wind speed

Step 7

Set your city a the default location, and fetch the weather forecast for that city every time the app starts (at ever full page reload).

Extra

Step 1

Refactor your app to use multiple pages. You should have a homepage, where only the input and search button are shown, and a result page where you can show the current weather for that city.

  • /: Homepage containing the input and search button.
  • /result/:city: Page showing the results for that specific city. For example /result/Lisbon, or /result/San%20Francisco.

Step 2

Add a cookie banner component saying that your app doesn't store any user data. Besides some text, your <CookieBanner /> should have a button to accept. You should show the cookie banner to every user who hasn't clicked the accept button yet. To persist if a user has clicked it yet or not use the localStorage web API.