Hack2gether Weather

Hack2gether Weather is an app built using React which displays the weather of any location in the world.

This was made possible by the efforts of everyone in Prep Fellowship pod of August 2022 batch, "Hack2gether"

Folder Structure

└───public
    ├───images
    ├───weather
    ├───index.html
└───scripts
└───src
    ├───assets
    ├───components
    ├───hooks

Tech Used

React
OpenWeather API
MapBox
Netlify
GitHub Actions for automated deployment and image optimisation

Steps for setting up the API key for openweathermap To generate an API key for openweathermap, register on openweathermap: https://home.openweathermap.org/api_keys Rename example.env to .env and put your API key in between single quotes to the right of the REACT_APP_APIKEY variable

Live website

You can try out the site either at Netlify or GitHub Pages

Features

Detect current user's location using the JavaScript Geolocation API
Autocomplete location name when location is typed in the search bar
Interactive map that allows you to set the location anywhere in the world
Get weather condtions like temperature, humidity, wind speed, times for sunrise and sunset, and more
Suggestions for clothing according to the weather
Automated deployment using GitHub actions
Image optimisation using Calibre image-actions

Installation & Development

Fork and clone the repository
Ensure Node and NPM are installed on your system with node -v and npm -v
cd into the project folder
Install the dependencies with npm install
Start the development server with npm start
Build the project for production with npm run build