Awesome
<img src="https://github.com/gheorghedarle/React-WeatherApp/blob/master/screenshots/icon.png" width="96" />React Weather App
Weather App is a simple weather app developed in typescript using React, HTML and SASS. The app allows you to see the weather from your current location or another location around the globe using OpenWeather Api and Google Maps Api. Using One Call API the app displays the current weather, 24 hours and 6 days forecast. You can change the unit system from metric to imperial. The app is available in light and dark mode.
If you like this repository you can support me on
<a href="https://www.buymeacoffee.com/gheorghedarle" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/guidelines/download-assets-sm-1.svg" alt="Buy Me A Coffee" width="175"></a>
Light mode
<img src="https://github.com/gheorghedarle/React-WeatherApp/blob/master/screenshots/light_mode.png?raw=true" Width="1620" />Dark mode
<img src="https://github.com/gheorghedarle/React-WeatherApp/blob/master/screenshots/dark_mode.png?raw=true" Width="1620" />Libraries
- React
- Axios (API Calls)
- Font Awesome (Icons)
- React Error Boundary (Error Handling)
- React Indiana Drag Scroll (Scroll on drag)
- Github Pages (Deploy)
Setup
Create a file called .env in the root of the React-WeatherApp project. Add the following code in the file.
REACT_APP_OPENWEATHER_API_BASEURL = "https://api.openweathermap.org/data/2.5/onecall"
REACT_APP_OPENWEATHER_API_KEY = "YOUR_OPENWEATHERAPI_KEY"
REACT_APP_GEOLOCATION_GEOCODE_BASEURL = "https://maps.googleapis.com/maps/api/geocode/json"
REACT_APP_GEOLOCATION_API_KEY = "YOUR_GOOGLEMAPSAPI_KEY"
The app is using One Call API from OpenWeather API. To start the project you need an account and OpenWeather API Key. You can signup and get the key from here.
The app is using Geocoding and Reverse Geocoding from Google Maps API. To start the project you need a google account and Google Maps API Key. You can get the key from here.
To use real data, change the flag useMockData to false from Container.tsx.
Resources
Illustrations are from Freepik
Other versions
Xamarin-WeatherApp - developed in Xamarin