{"id":18141422,"url":"https://github.com/dzmitryur/weather-app-react","last_synced_at":"2026-02-22T08:37:28.519Z","repository":{"id":258164051,"uuid":"871149504","full_name":"DzmitryUr/weather-app-react","owner":"DzmitryUr","description":"Weather Application in React with Axios, Tanstack Query, Tailwind CSS and Hooks","archived":false,"fork":false,"pushed_at":"2024-11-13T10:20:59.000Z","size":1038,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-08T18:47:55.136Z","etag":null,"topics":["axios","geolocation","hooks","jsx","openweather-api","react","reactjs","tailwind","tailwindcss","tanstack-query"],"latest_commit_sha":null,"homepage":"https://dzmitryur.github.io/weather-app-react/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DzmitryUr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-11T11:20:57.000Z","updated_at":"2024-12-03T07:34:20.000Z","dependencies_parsed_at":"2024-10-25T11:50:50.710Z","dependency_job_id":"30fd1cc2-4b0d-4792-8386-749c3f0d5f09","html_url":"https://github.com/DzmitryUr/weather-app-react","commit_stats":null,"previous_names":["dzmitryur/weather-app-react"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/DzmitryUr/weather-app-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DzmitryUr%2Fweather-app-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DzmitryUr%2Fweather-app-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DzmitryUr%2Fweather-app-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DzmitryUr%2Fweather-app-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DzmitryUr","download_url":"https://codeload.github.com/DzmitryUr/weather-app-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DzmitryUr%2Fweather-app-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271560498,"owners_count":24780865,"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","status":"online","status_checked_at":"2025-08-21T02:00:08.990Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["axios","geolocation","hooks","jsx","openweather-api","react","reactjs","tailwind","tailwindcss","tanstack-query"],"created_at":"2024-11-01T17:06:51.955Z","updated_at":"2026-02-22T08:37:28.490Z","avatar_url":"https://github.com/DzmitryUr.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Weather App (React)\n\nThis is a weather application built using **React** with **Vite**, styled using **Tailwind CSS**, and fetching weather data from the **OpenWeather API**.\n\nThe app utilizes the `navigator.geolocation` object to retrieve the user's current location, and a custom hook `useGeolocation` was created to handle and provide the user's coordinates. The app also leverages **Axios** for API requests, **Tanstack Query** (formerly React Query) for data fetching and caching, **JSX** for structuring components, and **React Hooks** for state and effect management.\n\n## Features\n\n- Displays current weather based on city input or user's location.\n- Shows temperature, weather conditions, humidity, and wind speed.\n- Uses `navigator.geolocation` to detect the user's current position.\n- Custom `useGeolocation` hook for managing geolocation data.\n- Utilizes **Axios** for handling API requests.\n- Uses **Tanstack Query** for efficient data fetching and caching.\n- Custom `useFetchWeather` hook for managing weather data.\n- Built with **JSX** and **React Hooks** (useState, useEffect) for smooth component management.\n- Responsive design using Tailwind CSS.\n- Fetches data from the OpenWeather API.\n- Google Analytics, npm package React Google Analytics 4\n- React Context API, hook useContext\n- React Icons\n\n## Demo\n\nYou can view a live demo of the app [here](https://dzmitryur.github.io/weather-app-react/).\n\n## Watch on YouTube:\n\nYou can watch a YouTube video on how to build Weather App\n\n\u003cdiv align=\"left\"\u003e\n      \u003ca href=\"https://youtu.be/rJqAmxqKNiw\"\u003e\n         \u003cimg src=\"https://img.youtube.com/vi/rJqAmxqKNiw/0.jpg\" alt=\"Watch Weather App on YouTube\"\u003e\n      \u003c/a\u003e\n\u003c/div\u003e\n\n## Screenshots\n\n### Light Mode\n\n\u003cimg src=\"./assets/Screenshot-Weather-App.png\" alt=\"Screenshot of the Weather App\" width=\"500\"/\u003e\n\n### Dark Mode\n\n\u003cimg src=\"./assets/Screenshot-Weather-App-NewYork.png\" alt=\"Screenshot of the Weather App\" width=\"500\"/\u003e\n\n## Technologies Used\n\n- **React**: Front-end framework\n- **Vite**: Development build tool for fast project setup\n- **Tailwind CSS**: Utility-first CSS framework for styling\n- **OpenWeather API**: Provides weather data\n- **Axios**: Promise-based HTTP client for making requests to the OpenWeather API\n- **Tanstack Query**: Data fetching, caching, and synchronization for handling asynchronous operations\n- **JSX**: Syntax extension for writing HTML in JavaScript\n- **React Hooks**: Custom and built-in hooks for managing component logic (e.g., `useGeolocation`, `useFetchWeather`, `useState`, `useEffect`)\n- **navigator.geolocation**: To access the user's current coordinates\n\n## Installation and Setup\n\nTo get a local copy up and running, follow these steps:\n\n### Prerequisites\n\nMake sure you have the following installed:\n\n- [Node.js](https://nodejs.org/)\n- [Vite](https://vitejs.dev/)\n\n### Installation\n\n1. Clone the repository:\n\n   ```bash\n   git clone https://github.com/DzmitryUr/weather-app-react.git\n   cd weather-app-react\n   ```\n\n2. Install dependencies:\n\n   ```bash\n   npm install\n   ```\n\n3. Create a .env.local file at the root of the project and add your OpenWeather API Key and Google Analytics ID(optional):\n\n   ```bash\n   VITE_API_KEY=your_openweather_api_key\n   ```\n\n   You can get your API key by signing up at [OpenWeather](https://openweathermap.org/).\n   You can use file `.env.example` as an example\n\n4. Start the development server:\n\n   ```bash\n   npm run dev\n   ```\n\n5. Open the app in your browser:\n\n   ```bash\n   http://localhost:5173\n   ```\n\n## Usage\n\n- Enter the name of the city in the search bar or allow the app to access your location.\n- The app will display the current weather information including temperature, humidity, and wind speed.\n- The weather data is fetched in real-time from the **OpenWeather API** using **Axios**.\n- **Tanstack Query** is used for caching and synchronizing the fetched data.\n- If location access is granted, the app will use the `useGeolocation` hook to retrieve your coordinates and display the weather for your current location.\n\n## Contributing\n\nIf you'd like to contribute, feel free to create a pull request or open an issue to discuss the changes.\n\n## License\n\nThis project is licensed under the MIT License.\n\n## Acknowledgements\n\n- [Vite](https://vitejs.dev/)\n- [React](https://reactjs.org/)\n- [Tailwind CSS](https://tailwindcss.com/)\n- [OpenWeather API](https://openweathermap.org/)\n- [Axios](https://axios-http.com/)\n- [Tanstack Query](https://tanstack.com/query/latest)\n- [navigator.geolocation](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdzmitryur%2Fweather-app-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdzmitryur%2Fweather-app-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdzmitryur%2Fweather-app-react/lists"}