Create a simple weather app using Node.js, Express, and React

  • We will need to set up a backend (Express) server that connects to a front end client (React).
  • Can’t have a weather app with no weather data! So we will make use of a 3rd party weather API to provide data. We need to connect to that API and use the returned weather data.
  • We have to collect the users zipcode and combine that with the weather API’s URL to request location specific data.
  • We need to validate the zipcode, and also account for any potential 404 errors when receiving data back from the weather API.
  • Finally we have to display the current weather using the weather API data. Using React, we will need to create a component that is responsible for a page that does this.

Yeah, yeah, yeah. Let’s get setup!

Add you API Key to line 5

Installing dependencies

  • Once the repository is cloned locally, go ahead and access the /weather_app_tutorial directory from the terminal and run npm install to install the backend dependencies from the package.json file.
  • While still inside /weather_app_tutorial navigate into the /client directory and then do the same thing by running npm install to install all of the dependencies that are required for React.

The backend Express server

server.js

Setting up the API routes

SearchLocations.js

The POST route

POST route

The GET route

GET route

Export the routes!

Import the routes!

server.js

The front end

index.js

index.js

Let’s start the React server!

The Home Page

Home.js
  • The input form posts it’s value to a POST route in the backend.
  • This backend POST route then assigns the received input value to a variable so we can use it later when calling the weather API.

The Current Weather Component

CurrentWeather.js
Not a lot going on, but you can build from here!
  • When a valid zip code is entered in Home.js and submitted, the page is redirected to /current-weather which because of React Router, will render CurrentWeather.js.
  • When the CurrentWeather.js component mounts to the DOM, it automatically makes a fetch request to the backend GET route.
  • This backend GET route then goes out and fetches data from a weather API using the users zip code captured in the initial POST route to fetch location specific weather data.
  • The backend GET route then sends the fetched weather data back to the front end client in response to the fetch request made in componentDidMount().

Looking at the weather data

Using the weather data

Are we loading?

Weather Icons

Dealing with a 404

And that’s that.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Maison Moa

Maison Moa

264 Followers

Curious Web Developer, avid Golfer, and a decorated veteran of the great war against procrastination.