{"id":19776529,"url":"https://github.com/m-sehrawat/weather-app","last_synced_at":"2025-04-30T19:30:55.620Z","repository":{"id":56935904,"uuid":"487358435","full_name":"m-sehrawat/Weather-App","owner":"m-sehrawat","description":"This project is about building a web application to show a weather forecast using weather API.","archived":false,"fork":false,"pushed_at":"2022-07-04T04:05:02.000Z","size":729,"stargazers_count":30,"open_issues_count":0,"forks_count":19,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-06T04:11:53.848Z","etag":null,"topics":["chakra-ui","css","javascript","react","react-redux","redux","vitejs"],"latest_commit_sha":null,"homepage":"https://mohit-weather-app.vercel.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/m-sehrawat.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":"2022-04-30T18:58:05.000Z","updated_at":"2025-02-10T17:08:12.000Z","dependencies_parsed_at":"2022-08-21T07:20:56.534Z","dependency_job_id":null,"html_url":"https://github.com/m-sehrawat/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/m-sehrawat%2FWeather-App","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m-sehrawat%2FWeather-App/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m-sehrawat%2FWeather-App/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m-sehrawat%2FWeather-App/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/m-sehrawat","download_url":"https://codeload.github.com/m-sehrawat/Weather-App/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251769269,"owners_count":21640876,"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":["chakra-ui","css","javascript","react","react-redux","redux","vitejs"],"created_at":"2024-11-12T05:20:26.903Z","updated_at":"2025-04-30T19:30:54.157Z","avatar_url":"https://github.com/m-sehrawat.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eWeather App\u003c/h1\u003e \n\n![weather app cover](https://user-images.githubusercontent.com/91532881/166434542-76727ccb-0c98-4646-84fb-58e86d7ec3ff.png)\n\n\u003ch2 align=\"center\"\u003eWeb application to show the current and upcoming week weather forecast.\u003c/h2\u003e    \n\n\u003cbr /\u003e\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/React_(17.0.2)-20232A?style=for-the-badge\u0026logo=react\u0026logoColor=61DAFB\" alt=\"reactjs\" /\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Redux_(4.1.2)-593D88?style=for-the-badge\u0026logo=redux\u0026logoColor=white\" alt=\"redux\" /\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Chakra%20UI-3bc7bd?style=for-the-badge\u0026logo=chakraui\u0026logoColor=white\" alt=\"chakra-ui\"/\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Rest_API-02303A?style=for-the-badge\u0026logo=react-router\u0026logoColor=white\" alt=\"restAPI\"/\u003e\n    \u003cimg src=\"https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge\u0026logo=css3\u0026logoColor=white\" alt=\"css3\"/\u003e     \n\u003c/p\u003e\n\n\n\n     \n    \n  \u003ch3 align=\"center\"\u003e\u003ca href=\"https://mohit-weather-app.vercel.app/\"\u003e\u003cstrong\u003eWant to see live preview »\u003c/strong\u003e\u003c/a\u003e\u003c/h3\u003e\n   \n    \n  \u003cp align=\"center\"\u003e \n    \u003cbr /\u003e\u0026#10023;\n    \u003ca href=\"#Demo\"\u003eView Demo\u003c/a\u003e   \u0026#10023;  \n    \u003ca href=\"https://github.com/m-sehrawat/Weather-App/issues\"\u003eReport Bug\u003c/a\u003e    \u0026#10023;\n    \u003ca href=\"#Getting-Started\"\u003eGetting Started\u003c/a\u003e \u0026#10023; \u003ca href=\"#Install\"\u003eInstalling\u003c/a\u003e \u0026#10023;    \n    \u003ca href=\"#Contact\"\u003eAuthor\u003c/a\u003e \u0026#10023;\n  \u003c/p\u003e\n\n\n\n\u003cbr/\u003e\n\n\nThis project is about building a web application to show a weather forecast using weather API from external services [Open weather map](https://openweathermap.org/). Here you will be able to search for a specific location in the world and also it will automatically detect your current location in the beginning (for that you need to allow location) and will display all the important weather details.\n\nIt have some cool features like save the weather data in redux-store and session-storage to reduce the dependency of network requests, search weather details according to the city, detect your current location for displaying weather data, shows a map of that location, sync data to get the latest updated details of the current weather, toast notification for every action, pop up modal to display extra details of seven-day forecast weather, cool zoom-in zoom-out animations and responsive for every screen size.\n\nTo use the app, type a name of the city and click on search/press Enter or else click on the Your location weather button, every time you click on the button first it will check if the data is available in the session storage or not, and if not then it will send a network request else it will take the data from session-storage. \n\n\n## 🚀 Features\n- Saving the weather data in redux-store and session-storage to reduce the dependency of network requests\n- Search weather details according to the city\n- Detect your current location for displaying weather data\n- Shows a map of that location\n- Sync data to get the latest updated details of the current weather\n- Toast notification for every action\n- Pop up modal to display extra details of seven-day forecast weather\n- Cool zoom-in zoom-out animations \n- Responsive for every screen size.\n\n\u003cbr/\u003e\n\n\n\n![Mobile responsive](https://user-images.githubusercontent.com/91532881/166426445-3aeee29c-bca7-4d95-a082-70269bb192fd.png)\n\n![weatherapp](https://user-images.githubusercontent.com/91532881/166334689-ac7807e2-6d40-4a8f-b232-c53955f6ea03.png)\n\n![weatherapp2](https://user-images.githubusercontent.com/91532881/166334796-48e0faa6-3e3c-46e5-9cd1-857da895379d.png)\n\n\u003cbr /\u003e\n\n## Demo\n\nhttps://user-images.githubusercontent.com/91532881/166426542-b271be2e-e7d9-4b3c-bfe7-5e9e51e26be4.mp4\n\n\n\u003cbr/\u003e\n\n\n## Getting Started\n\nThis project was built using React v 17.0.2, Redux v 4.1.2, Chakra UI, CSS and Rest API. It is a web application and for running on your local environment you should follow these guidelines.\n\n\n### Prerequisites\n\n- NPM \n\n### Setup\n\n\nThe project repository can be found in [GitHub link](https://github.com/m-sehrawat/Weather-App) or just clone the project using this command. \n\n\n```\nUsing HTTPS\n\n# git clone  https://github.com/m-sehrawat/Weather-App.git\n```\n\n+ Open terminal on your workspace with\n\n```\ncd /home/workspace/Weather-App\n```\n\n\n## Install\n\nInstall NPM\n\nCheck that you have node and npm installed\n\nTo check if you have Node.js installed, run this command in your terminal:\n\n\n```\nnode -v\n```\n\nTo confirm that you have npm installed you can run this command in your terminal:\n\n\n```\nnpm -v\n```\n\n\nTo install all the dependences of the project, run the following command:\n\n\n```\nnpm install\n```\n\n\nTo run the application, run the following command:\n\n```\nnpm run dev\n```\n\n\n### Tools used on this project\n\n- Visual Studio Code\n- Vite Js React Template\n\n\u003cbr/\u003e\n\n\n\n## Contact\n\nIf you want to contact me, you can reach me through below handles.\n\n[![linkedin](https://img.shields.io/badge/Mohit_Sehrawat-0077B5?style=for-the-badge\u0026logo=linkedin\u0026logoColor=white)](https://www.linkedin.com/in/m-sehrawat/)\n[![Twitter](https://img.shields.io/badge/Mohit_Sehrawat-20232A?style=for-the-badge\u0026logo=Github\u0026logoColor=white)](https://github.com/m-sehrawat/)\n\n© 2022 Mohit Sehrawat\n\n\n\n## Show your support\n\nGive a ⭐️ if you like this project!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fm-sehrawat%2Fweather-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fm-sehrawat%2Fweather-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fm-sehrawat%2Fweather-app/lists"}