{"id":13519535,"url":"https://github.com/starkblaze01/Weather-App","last_synced_at":"2025-03-31T13:30:53.860Z","repository":{"id":42127168,"uuid":"331935400","full_name":"starkblaze01/Weather-App","owner":"starkblaze01","description":"It is what it is! Not another Blazing Super Fast Framework","archived":false,"fork":false,"pushed_at":"2022-04-12T13:16:29.000Z","size":604,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-07T16:27:21.569Z","etag":null,"topics":["antd","chartjs","debounce","geolocation","googlemaps-api","hacktoberfest","openweathermap-api","place-autocomplete","reactjs","responsive","weather-app"],"latest_commit_sha":null,"homepage":"https://hawapani.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/starkblaze01.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-01-22T12:09:51.000Z","updated_at":"2023-11-17T07:53:50.000Z","dependencies_parsed_at":"2022-08-12T07:20:39.291Z","dependency_job_id":null,"html_url":"https://github.com/starkblaze01/Weather-App","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/starkblaze01%2FWeather-App","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/starkblaze01%2FWeather-App/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/starkblaze01%2FWeather-App/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/starkblaze01%2FWeather-App/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/starkblaze01","download_url":"https://codeload.github.com/starkblaze01/Weather-App/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246473739,"owners_count":20783333,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["antd","chartjs","debounce","geolocation","googlemaps-api","hacktoberfest","openweathermap-api","place-autocomplete","reactjs","responsive","weather-app"],"created_at":"2024-08-01T05:02:00.254Z","updated_at":"2025-03-31T13:30:53.399Z","avatar_url":"https://github.com/starkblaze01.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# Weather-App\n _This App is built using ReactJS, Ant-Design, and ChartJS_\n\n---\n![Main View](https://github.com/starkblaze01/Weather-App/blob/main/Main.png)\n\n\u003c/div\u003e\n\n---\n\n### About the App:\n\nThis app was built just for the exploration purpose of ChartJS library and Google Maps API.\n\nYou can check the [Chart.js](/client/src/components/Chart.js) for getting an idea how I implemented the line graph.\n\nBy default it will ask for user's location permission and on approval it will populate the weather info of the user's location. If the location access is not given then it will show the weather of coordinates:`lat=33.441792 \u0026 lon=-94.037689` .Users can search for a particular location, it will show recommendation using [Google Map Autocomplete API](https://developers.google.com/maps/documentation/javascript/places-autocomplete), select the option and it will populate the weather of that place. All the weather information is being fetched via [Open Weather Map](https://openweathermap.org/api/one-call-api).\n\n---\n\n### Setup:\n\n1. Clone the Repository\n2. Run command `cd client/`\n3. Run command `yarn install`\n4. Setup the environment variable: `REACT_APP_OPEN_WEATHER_APP_API_KEY`, and `REACT_APP_GOOGLE_MAPS_PLACE_API_KEY`. You can generate these API keys from https://openweathermap.org/appid, and https://developers.google.com/maps/documentation/javascript/cloud-setup respectively.\n5. Make sure to Enable the Place API, and Maps JavaScript API for the `API_key` you generated from Google Console Page.\n\n**Debug**:\n\nEarlier I was using the [Web-services API](https://developers.google.com/maps/documentation/places/web-service/autocomplete) of Google Maps to get the place recommendation/autocomplete and fetch the coordinates of that place, but Google Maps doesn't allow CORS for client-side application so I switched over to [Maps JS API](https://developers.google.com/maps/documentation/javascript/places-autocomplete). Follow the setup procedure [here](https://developers.google.com/maps/documentation/javascript/places-autocomplete). \nNow to use this Maps JS API, you need to make sure you have enabled [restrictions](https://cloud.google.com/api-keys/docs/add-restrictions-api-keys) for it. For me I wasn't able to enable restrictions from UI, it was failing and not updating so I used Cloud Shell at the Google Cloud Console to apply the restriction by running this command:\n\n```\ngcurl https://apikeys.googleapis.com/v2/projects/PROJECT_NUMBER/locations/global/keys/KEY_ID?updateMask=restrictions \\\n  --request PATCH \\\n  --data '{\n    \"restrictions\" : {\n      \"browserKeyRestrictions\": {\n        \"allowedReferrers\": \"www.example.com\"\n      }\n    },\n    \"etag\": \"ETAG\"\n  }'\n```\nReplace `PROJECT_NUMBER`, `KEY_ID`, and `ETAG` with the actual values.\nBefore running this command you need to set the gcurl alias by running this:\n\n`alias gcurl='curl -H \"Authorization: Bearer $(gcloud auth print-access-token)\" -H \"Content-Type: application/json\"'`\n\nTo get the values of `PROJECT_NUMBER`, `KEY_ID`, and `ETAG` you can run this command:\n\n`gcurl https://apikeys.googleapis.com/v2/projects/PROJECT_NAME/locations/global/keys`\n\nCheck [SearchBar.js](/client/src/components/SearchBar.js) and [index.html](/client/public/index.html#L9) to see how Maps JS API were used.\n\n---\n\n### Credits:\n\n\u003cdiv\u003eIcons made by \u003ca href=\"https://www.flaticon.com/authors/linector\" title=\"Linector\"\u003eLinector\u003c/a\u003e from \u003ca href=\"https://www.flaticon.com/\" title=\"Flaticon\"\u003ewww.flaticon.com\u003c/a\u003e\u003c/div\u003e\n\n\u003cbr\u003e\n\nP.S. I am using free-tier APIs and try to maintain the request limit under the free-tier, please try the demo wisely and generate your own API for your personal use. Liked the repo?  Hit the ⭐ Button!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstarkblaze01%2FWeather-App","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstarkblaze01%2FWeather-App","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstarkblaze01%2FWeather-App/lists"}