Weather Application

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 of the application

• 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

Also, please delete the existing .env file from source code, as they belong to me.

Once done execute:

npm install

The above command will install the dependencies required

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/

Demo Url:

https://cuddly-number.surge.sh/

You Tube video:

https://youtu.be/AVX89G5b-k8

Please provide your reviews and comments, so that I can improve the product over time. Additionally, you can also contact me at: [email protected] for more information. Thanks