React Weather Forecast

Launched Sunday, October 17th, 2021
This application delivers the most essential weather forecast data based on user's current location. React Weather Forecast is basic, clean, simple and easy to use. It was built with React, Node.js, HTML, CSS and JavaScript..
View on Github

About the project

This is a weather forecast application, that delivers a simple, clean and minimalist layout, suitable for desktop and phone screens. This app was built using React and Node.

The main goal with this project was to release a simple and complete weather forecast app.

Live demo

Check out this project running on Netlify + Cyclic

You can also edit and view this project on Code Sand Box:

Front-end:

Edit Weather Forecast (Front)

Back-end:

Edit Weather Forecast (Back)

Features

This application obtains user's current location and returns back to the client his city and district name, current weather conditions, detailed weather forecast for the current date and minimal and maximum temperature for the next few days.

Front-end

The client-side of Weather Forecast was built with React, resulting in the following layout:

Layout

Mobile

Mobile 1 Mobile 2

Desktop

Desktop 1 Desktop 2

Technologies

The following technologies were used to build Weather Forecast's front-end:

Back-end

The back-end consists in a server developed with the Express Framework for Node, which listens to requests triggered by the front-end layer of the application.

This Node server has a sole endpoint that returns a set of weather data and the user's specific location:

  • /forecast: expects two parameters as a query string:
    • lat: user´s latitude
    • long: user´s longitude
  • Returns:
    • User's current city and district through reverese geolocation
    • Current weather conditions, like temperature, wind speed and humidity
    • Detailed weather forecast for the current date
    • Minimal and maximum temperature for the next days

Example:

/forecast?lat=-23.5549053&long=-46.4673641

External APIs

The following third-party APIs were used to create Weather Forecast's API responses:

Technologies

The following technologies were used to build Weather Forecast server:

How to set up

If you wish to fork this project, you'll need to set up the following environment variables:

Client-side:

  • REACT_APP_BACK_URL (Server URL in order to send requests)

Server-side:

  • API_GEO (LocationIQ API key)
  • API_WEATHER (Open Weather Map API key)
  • PORT (Desired port to run express)

Inspirations

Weather Forecast was inspired by the following projects on Figma: