{"id":29245782,"url":"https://github.com/arnobt78/live-weather--react","last_synced_at":"2025-07-13T08:05:51.427Z","repository":{"id":302173117,"uuid":"864102246","full_name":"arnobt78/Live-Weather--React","owner":"arnobt78","description":"Weather App is a React-Vite weather project, using OpenWeather API, display the Weather Status, Temperature, Humidity, Wind of any City in the world, and deploy on Vercel.","archived":false,"fork":false,"pushed_at":"2025-06-30T23:55:10.000Z","size":383,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-01T00:38:04.218Z","etag":null,"topics":["javascript","openweather-api","openweathermap-api","react","react-vite","recatjs","vercel-deployment","weather-data","weather-forecast","weather-station"],"latest_commit_sha":null,"homepage":"https://weather-arnob.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/arnobt78.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-09-27T13:51:26.000Z","updated_at":"2025-06-30T23:55:31.000Z","dependencies_parsed_at":"2025-07-01T00:48:08.234Z","dependency_job_id":null,"html_url":"https://github.com/arnobt78/Live-Weather--React","commit_stats":null,"previous_names":["arnobt78/weather--react"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/arnobt78/Live-Weather--React","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FLive-Weather--React","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FLive-Weather--React/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FLive-Weather--React/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FLive-Weather--React/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arnobt78","download_url":"https://codeload.github.com/arnobt78/Live-Weather--React/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FLive-Weather--React/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263415911,"owners_count":23463109,"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":["javascript","openweather-api","openweathermap-api","react","react-vite","recatjs","vercel-deployment","weather-data","weather-forecast","weather-station"],"created_at":"2025-07-03T22:38:14.196Z","updated_at":"2025-07-03T22:38:15.812Z","avatar_url":"https://github.com/arnobt78.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Weather Live - ReactVite Web Application\n\n![Screenshot 2024-09-27 at 15 40 36](https://github.com/user-attachments/assets/c1ab3e86-b62f-4b61-8a1f-7ef3feb74c54) ![Screenshot 2024-09-27 at 15 42 03](https://github.com/user-attachments/assets/fbc53aa5-25e9-44c2-a018-f27dc9e4c763) ![Screenshot 2024-09-27 at 15 41 23](https://github.com/user-attachments/assets/e58c3b84-dde1-4d33-a4ca-0e3bd0b5a315)\n\n---\n\n## Project Summary\n\n**Weather-ReactVite** is a fast, minimal, and modern weather web application built with React and Vite. It lets users search any city in the world and view up-to-date weather details including temperature, humidity, and wind information using the [OpenWeather API](https://openweathermap.org/). Designed for learning and demonstration, this project is ideal for beginners and intermediates who want to understand how to build and deploy a real-world React app with API integration and Vercel deployment.\n\n- **Live-Demo:** [https://weather-arnob.vercel.app/](https://weather-arnob.vercel.app/)\n\n---\n\n## Table of Contents\n\n1. [Project Summary](#project-summary)\n2. [Features](#features)\n3. [Live Demo](#live-demo)\n4. [Technology Stack](#technology-stack)\n5. [Project Structure](#project-structure)\n6. [Installation \u0026 Setup](#installation--setup)\n7. [How It Works](#how-it-works)\n8. [API Integration](#api-integration)\n9. [Usage Examples](#usage-examples)\n10. [Learning Points](#learning-points)\n11. [Conclusion](#conclusion)\n\n---\n\n## Features\n\n- 🌦️ **Real-Time Weather Data** – Fetches live weather info for any city worldwide.\n- 🔍 **City Search** – Users can search for any city and get instant results.\n- 🌡️ **Details Displayed** – Temperature, humidity, wind speed, and weather status.\n- ⚡ **Fast \u0026 Modern** – Built using React + Vite for fast HMR and lightweight builds.\n- 📱 **Responsive Design** – Looks great on both desktop and mobile.\n- 🚀 **Deployed on Vercel** – Easy one-click deployment and live demo.\n- 💡 **Great for Learning** – Clean code, API usage, and React best practices.\n\n---\n\n## Technology Stack\n\n- **Frontend Framework**: [React](https://react.dev/)\n- **Build Tool**: [Vite](https://vitejs.dev/)\n- **API**: [OpenWeather API](https://openweathermap.org/)\n- **Deployment**: [Vercel](https://vercel.com/)\n- **Other Tools**: ESLint, Babel or SWC for Fast Refresh, CSS\n\n---\n\n## Project Structure\n\n```\nWeather--ReactVite/\n│\n├── .eslintrc.cjs        # Linting configuration\n├── .gitignore           # Git ignore file\n├── index.html           # Main HTML file\n├── package.json         # NPM dependencies and scripts\n├── package-lock.json    # NPM lock file\n├── vite.config.js       # Vite configuration\n├── README.md            # Project documentation\n│\n└── src/\n    ├── App.jsx                # Main React component\n    ├── main.jsx               # App entry point\n    ├── index.css              # Global CSS\n    ├── assets/                # Images, icons, etc\n    └── Components/            # Reusable React components\n```\n\n---\n\n## Installation \u0026 Setup\n\nFollow these steps to get the project running locally:\n\n### 1. Install Node.js\n\nDownload and install Node.js from [nodejs.org](https://nodejs.org/en/).\n\n---\n\n### 2. Clone the Repository\n\n```bash\ngit clone https://github.com/arnobt78/Weather--ReactVite.git\ncd Weather--ReactVite\n```\n\n---\n\n### 3. Install Dependencies\n\n```bash\nnpm install\n```\nThis installs all required packages from `package.json`.\n\n---\n\n### 4. Get OpenWeather API Key\n\n- Register for free at [OpenWeather](https://openweathermap.org/).\n- Get your API key from your dashboard.\n\n---\n\n### 5. Run the App Locally\n\n```bash\nnpm run dev\n```\nVisit [http://localhost:5173/](http://localhost:5173/) in your browser.\n\n---\n\n## How It Works\n\n1. **Search for a City**: Type a city name and submit.\n2. **API Request**: The app fetches weather data for the city using OpenWeather API.\n3. **Display Data**: Weather details (temperature, humidity, wind, status) are shown.\n4. **Responsive UI**: The design adapts to your device for a seamless experience.\n\n---\n\n## API Integration\n\nThis app uses the **OpenWeather API** to fetch weather data. You’ll need an API key to use it.\n\n**Basic fetch example:**\n\n```js\nconst apiKey = \"YOUR_API_KEY\";\nconst url = `https://api.openweathermap.org/data/2.5/weather?q=London\u0026appid=${apiKey}\u0026units=metric`;\n\nfetch(url)\n  .then(response =\u003e response.json())\n  .then(data =\u003e {\n    // Use data.main.temp, data.weather[0].description, etc.\n  });\n```\n\n---\n\n## Usage Examples\n\n### Example: Main Weather Fetch Function\n\n```jsx\nasync function fetchWeather(city) {\n  const response = await fetch(\n    `https://api.openweathermap.org/data/2.5/weather?q=${city}\u0026appid=YOUR_API_KEY\u0026units=metric`\n  );\n  const data = await response.json();\n  // Display data.main.temp, data.weather[0].description, etc.\n}\n```\n\n### Example: Simple Weather Card Component\n\n```jsx\nfunction WeatherCard({ city, temp, humidity, wind, status }) {\n  return (\n    \u003cdiv className=\"weather-card\"\u003e\n      \u003ch2\u003e{city}\u003c/h2\u003e\n      \u003cp\u003e{status}\u003c/p\u003e\n      \u003cp\u003eTemperature: {temp}°C\u003c/p\u003e\n      \u003cp\u003eHumidity: {humidity}%\u003c/p\u003e\n      \u003cp\u003eWind: {wind} m/s\u003c/p\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n---\n\n## Learning Points\n\n- **React Fundamentals**: State, props, component structure, hooks.\n- **API Calls**: Using `fetch`/`async-await` to integrate remote APIs.\n- **Vite Tooling**: Fast development, hot reloading, and minimal config.\n- **Component-Based Design**: Modular UI for easy extension and maintenance.\n- **Environment Variables**: How to safely use API keys locally.\n- **Deployment**: How to publish your app with Vercel.\n\n---\n\n## Keywords\n\nReact, Vite, OpenWeather, Weather App, API Integration, JavaScript, Frontend, Web Development, Vercel Deployment, Learning Project, Beginner Friendly\n\n---\n\n## Conclusion\n\nThis project demonstrates how to build a simple, powerful, and modern weather web app using React and Vite. It's perfect for learning about React, working with APIs, and deploying frontend apps. Feel free to fork, modify, and use it as your own weather dashboard or as a starter for more advanced projects.\n\n---\n\n## References\n\n- [OpenWeather API Documentation](https://openweathermap.org/current)\n- [React Documentation](https://react.dev/)\n- [Vite Documentation](https://vitejs.dev/)\n- [Vercel Documentation](https://vercel.com/docs)\n\n---\n\n## Happy Coding! 🚀\n\nThank you for checking out this project! If you have suggestions or find it helpful, feel free to star the repo and share it with others.  \n**Happy Coding!** 😊\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2Flive-weather--react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farnobt78%2Flive-weather--react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2Flive-weather--react/lists"}