Demo Application

This lesson shows a simple weather application built using Bootstrap and the OpenWeatherMap APIs with the JavaScript-based frontend library, React. We also create a backend server using Express.js to make API calls to the OpenWeatherMap API server.

This application provides current weather information and daily weather forecasts for the next 5 days, with data collected after every 3-hour interval, for a location of our choice. Moreover, it provides current air pollution data for the same, comprising the air quality index and concentration levels for several pollutant gases.

Workflow

Step 1: Click the "Run" button to start the application. The output screen is split into two halves. The left half shows the output from our backend server. The right half shows the console log for our frontend application.

Step 2: Click the URL next to "Your app can be found at:" in the widget below to open the application in a new tab.

Step 3: Once the application is ready, we see a homepage with a search bar. Enter either the city name only or the city name followed by the state and country codes, separated by commas.

Note: Searching by states is available for USA locations only.

Step 4: After entering the location in the search bar, press "Enter" or click the search icon.

Step 5: We now see the search bar displayed to the left of the screen and current weather information displayed to the right. We also see two tabs, one each for "5-Day / 3-Hour Forecasts" and "Air Pollution." Switch between tabs to check out the corresponding weather data.

Step 6 (optional): Change the location in the search bar to get weather data for a different location.

Application code