The project comprises a full-stack application displaying a current weather for the chosen place. It was created by using React.js for the frontend and Express.js for the backend.
The application comprises of two core functionalities: fetching your current location and displaying the weather for the entered city. Before any API call is made, by default, the application displays my very own definition of perfect weather for an imaginary city Dreamland.
The current location functionality works in the following way:
- First, a geolocation API is used to get your geographical coordinates (latitude and longitude) based on the location of your browser.
- Then, the geolocation data is sent to the backend, which uses a Google Maps reversed geocoding API to return the city name based on the coordinates.
- Finally, the city name is sent back to you.
Important note: because of a considerable latency of the free Google Maps API, getting your current location can take up to several seconds.
You can click on the magnifying glass icon to display the weather either for your current location (if you used the current location function described above) or for an entered city name of your choice. Afterwards, you receive the following info for your chosen spot:
- current local time,
- temperature,
- general weather condition,
- wind, humidity, pressure, perceived temperature,
- sunrise & sunset.
Additionally, the current weather is illustrated by an image. There a different images for the following weather phenomena:
- clear sky (if the sky is clear, a moon picture is displayed instead of the sun at night),
- clouds,
- rain,
- snow,
- haze,
- fog,
- thunderstorm,
- tornado,
- smoke,
- dust/sand/ash.
To install the project, enter /frontend and /backend, and run npm install in each of the directories.