Demo Application

In this lesson, we'll see a simple weather application built using Bootstrap and AccuWeather APIs with the JavaScript-based frontend library, React. We'll also create a backend server using Express.js to make API calls to the AccuWeather API server. This application will provide us with current weather information and daily index data for different indices for locations of our choice. Moreover, it will provide hourly forecasts for a period of 12 hours and daily weather forecasts for a period of 5 days for the given location.

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 a location of your choice.

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 three tabs, one each for "Hourly Forecasts," "Daily Forecasts," and "Daily Indices." 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