
Climate Utility
It is a climate software developed in react js. It offers present climate info together with weekly and hourly information. It makes use of the next APIs: Google Maps API Unsplash API Openweathermap API
Options of the applying
- Detects your location on web page load and retrieve climate information
- Shows handle and the present date of the situation
- Shows present climate info
- Shows hourly climate information
- Shows weekly climate information
- Dynamic background primarily based on consumer 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 applying regionally you must have nodejs put in. Subsequent you must signup and get API keys for Google Maps API, Unsplash API and Openweathermap API. Please observe the steps talked about beneath to get these API keys
Google Maps API key: Please observe the steps talked about right here: https://developers.google.com/maps/documentation/embed/get-api-key
Unsplash API key: Please observe the steps talked about right here: https://www.pluralsight.com/guides/using-the-unsplash-api
Openweathermap API key: Please observe the steps talked about right here: https://www.balbooa.com/gridbox-documentation/openweathermap-api-key
As soon as all of the API keys can be found, please rename .env.pattern to .env and supply acceptable values for the next variables:
- REACT_APP_GOOGLE_MAPS_API_KEY=AAA
- REACT_APP_OPENWEATHERMAP_API_KEY=BBB
- REACT_APP_UNSPLASH_API_KEY=CCC
Additionally, please delete the prevailing .env file from supply code, as they belong to me.
As soon as carried out execute:
npm set up
The above command will set up the dependencies required
npm begin
The above command will server the applying on port 3000
Deploy To deploy the applying on surge observe the three minute information talked about right here: https://daveceddia.com/deploy-create-react-app-surge/
Demo Url:
https://cuddly-number.surge.sh/
You Tube video:
Please present your opinions and feedback, in order that I can enhance the product over time. Moreover, you can too contact me at: [email protected] for extra info. Thanks