A minimalistic weather forecast app made in React.
Access it here. You can search by typing any location to get daily forecast & location map
- 7 day forecast plus 4 times a day feels like temperature.
- Map snippet - show location with cloud, wind, temperature layers.
- Uses OpenWeatherMap to fetch the forecast/layers & OpenStreetMap for the map tiles.
Fork the repository & use the master branch
Install packages
yarn install
Start development
yarn start
Open http://localhost:3000. After changes are done, run:
yarn lint
yarn prettify
Accessing 3rd party API requires a CORS proxy. Have used cors-anywhere running on Heroku
To setup your own, clone this repo & run:
git checkout weather-proxy
heroku create
You'll need to export on the proxy environ after obtaining the key from OWM.
OWM_API_KEY=*YOUR_KEY*
- All free API services don't have hourly forecasts. OpenWeatherMap has released a one call API with 7-day forecast but only 48 hour hourly forecast.
- Tried out MetaWeather in v0.1 which is good. There were issues though - one was time zones were incorrect.
- For search, Algolia API had been used which fetches list of latitudes & longitude. The actual data came from MetaWeather, which returns locations based on 'where on earth ids' so another API call has to be made to search the possible list of locations closest to the location parameters. This was unreliable with results sometimes coming from neighbouring countries.
- react-autosuggest - nice search bar
- OpenWeatherMap - weather condition images
- weather-icons - weather utility icons like wind direction, Celsius, Fahrenheit.
- leaflet-openweathermap - map binding to integrate with OWM layers + really good Leaflet.
- cors-anywhere - proxy setup
- Header png from pnghut.
- Background photo created by Freepik.
- Shout out to iamsainikhil & his beautiful weather-react app for guidance.
Built by Devesh!
For feedback, questions or just anything email on: [email protected]
- GNU GPLv3 Copyright (c) Devesh Sawant 2020.