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:
Back-end:
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
Desktop
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:
- Open Weather Map for weather data
- LocationIQ for reverse geolocation
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: