This is a weather application developed in react js. It provides current weather information along with weekly and hourly data. It uses the following APIs:
Google Maps API
Unsplash API
Openweathermap API
Features:
Detects your location on page load and retrieve weather data
Displays address and the current date of the location
Displays current weather information
Displays hourly weather data
Displays weekly weather data
Dynamic background based on user search
Google Maps API integration
Unsplash API integration
Openweathermap integration
React Context API
Pre requisites:
Extract the contents to the zip file to any location. To run the application locally you need to have nodejs installed. Next you need to signup and get API keys for Google Maps API, Unsplash API and Openweathermap API. Please follow the steps mentioned below to get these API keys
Google Maps API key:
Please follow the steps mentioned here:
https://developers.google.com/maps/documentation/embed/get-api-key
Unsplash API key:
Please follow the steps mentioned here:
https://www.pluralsight.com/guides/using-the-unsplash-api
Openweathermap API key:
Please follow the steps mentioned here:
https://www.balbooa.com/gridbox-documentation/openweathermap-api-key
Once all the API keys are available, please rename .env.sample to .env and provide appropriate values for the following variables:
REACT_APP_GOOGLE_MAPS_API_KEY=AAA
REACT_APP_OPENWEATHERMAP_API_KEY=BBB
REACT_APP_UNSPLASH_API_KEY=CCC
Once done execute:
npm install
The above command will install the dependencies required
npm start
The above command will server the application on port 3000
Deploy
To deploy the application on surge follow the 3 minute guide mentioned here:
https://daveceddia.com/deploy-create-react-app-surge/
