{"id":22158365,"url":"https://github.com/themehraaryan/mausam","last_synced_at":"2026-04-20T10:06:21.193Z","repository":{"id":257100576,"uuid":"857313908","full_name":"themehraaryan/Mausam","owner":"themehraaryan","description":"Mausam: A responsive React web app that shows weather info for major cities on the homepage. You can also search for any city worldwide to get details like current temperature, date, time, sunset, sunrise, max and min temperatures, hourly forecast, rain chances, humidity, wind speed, and air quality. Optimized for desktop viewing but web responsive","archived":false,"fork":false,"pushed_at":"2024-09-14T13:39:52.000Z","size":3573,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-24T15:09:19.568Z","etag":null,"topics":["css","design","github","html","javascript","project","react","weather","weather-app","web-development","website"],"latest_commit_sha":null,"homepage":"https://mister-aryanmehra.github.io/Mausam/","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/themehraaryan.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}},"created_at":"2024-09-14T10:19:55.000Z","updated_at":"2024-09-14T13:53:22.000Z","dependencies_parsed_at":null,"dependency_job_id":"7ba8b780-dd2b-4ca4-8cdc-226a1e1a312e","html_url":"https://github.com/themehraaryan/Mausam","commit_stats":null,"previous_names":["mister-aryanmehra/mausam","themehraaryan/mausam"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themehraaryan%2FMausam","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themehraaryan%2FMausam/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themehraaryan%2FMausam/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themehraaryan%2FMausam/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/themehraaryan","download_url":"https://codeload.github.com/themehraaryan/Mausam/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245294768,"owners_count":20591900,"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":["css","design","github","html","javascript","project","react","weather","weather-app","web-development","website"],"created_at":"2024-12-02T03:31:48.857Z","updated_at":"2026-04-20T10:06:21.181Z","avatar_url":"https://github.com/themehraaryan.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Mausam - Weather Web App 🌤️\n\nA beautiful, responsive weather application built with React that provides real-time weather information for major cities around the world.\n\n## 🌟 Features\n\n- **Real-time Weather Data**: Get current weather conditions for 9 major cities worldwide\n- **Detailed Weather Information**: \n  - Current temperature and \"feels like\" temperature\n  - Humidity levels and precipitation chances\n  - Air quality index (PM 2.5)\n  - Sunrise and sunset times\n  - Hourly forecast\n  - Wind speed and direction\n  - Air quality parameters (PM 2.5, PM 10, NO2, SO2, O3)\n- **City Search**: Search for any city worldwide with autocomplete suggestions\n- **Responsive Design**: Works seamlessly on desktop, tablet, and mobile devices\n- **Beautiful UI**: Modern dark theme with city-specific background images\n\n## 🚀 Live Demo\n\nVisit the live app at: [https://themehraaryan.github.io/Mausam/](https://themehraaryan.github.io/Mausam/)\n\n## 🛠️ Technologies Used\n\n- **React** - Frontend framework\n- **Bootstrap 5** - CSS framework for responsive design\n- **WeatherAPI** - Weather data provider\n- **Axios** - HTTP client for API requests\n- **GitHub Pages** - Hosting platform\n\n## 📦 Installation\n\n1. Clone the repository:\n```bash\ngit clone https://github.com/themehraaryan/Mausam.git\ncd Mausam\n```\n\n2. Install dependencies:\n```bash\nnpm install\n```\n\n3. Start the development server:\n```bash\nnpm start\n```\n\nThe app will open at [http://localhost:3000](http://localhost:3000)\n\n## 🏗️ Build \u0026 Deploy\n\n### Build for Production\n```bash\nnpm run build\n```\n\n### Deploy to GitHub Pages\n```bash\nnpm run deploy\n```\n\nThis will automatically build the app and push it to the `gh-pages` branch.\n\n## 📂 Project Structure\n\n```\nMausam/\n├── public/\n│   ├── index.html\n│   ├── logo.png\n│   └── ...\n├── src/\n│   ├── components/\n│   │   ├── Card.js          # Weather card component\n│   │   ├── Home.js          # Home page with city cards\n│   │   ├── Navbar.js        # Navigation bar\n│   │   ├── SearchResult.js  # Search results page\n│   │   ├── Spinning2.js     # Loading spinner\n│   │   └── covers/          # City background images\n│   ├── App.js               # Main app component\n│   ├── App.css              # Styles\n│   └── index.js             # Entry point\n├── package.json\n└── README.md\n```\n\n## 🎨 Features Breakdown\n\n### Home Page\n- Displays weather cards for 9 major cities: New Delhi, New York, London, Dubai, Sydney, Tokyo, Paris, Shanghai, and Moscow\n- Each card shows:\n  - Current temperature\n  - 2-day forecast\n  - Humidity\n  - Rain chances\n  - Air quality (PM 2.5)\n  - Feels like temperature\n  - Sunrise and sunset times\n\n### Search Functionality\n- Type-ahead search with city suggestions\n- Comprehensive weather details for searched cities:\n  - Current conditions\n  - Min/max temperatures\n  - Hourly forecast (next 8 hours)\n  - Air quality parameters\n  - Wind information\n  - Detailed weather metrics\n\n## 🔑 API Key\n\nThis project uses the [WeatherAPI](https://www.weatherapi.com/) for weather data. The API key is included in the code for demonstration purposes. For production use, please:\n\n1. Sign up for your own free API key at [WeatherAPI](https://www.weatherapi.com/)\n2. Replace the API key in the following files:\n   - `src/components/Home.js`\n   - `src/components/Navbar.js`\n   - `src/components/SearchResult.js`\n\n## 🤝 Contributing\n\nContributions are welcome! Feel free to:\n- Report bugs\n- Suggest new features\n- Submit pull requests\n\n## 📝 License\n\nThis project is open source and available under the MIT License.\n\n## 👨‍💻 Developer\n\nCreated with ❤️ by [Aryan Mehra](https://www.linkedin.com/in/mister-aryanmehra/)\n\n## 🌍 Climate Change Awareness\n\nThis app is dedicated to raising awareness about climate change. Learn more about [Climate Change](https://en.wikipedia.org/wiki/Climate_change) and how we can make a difference.\n\n---\n\n### Available Scripts\n\nIn the project directory, you can run:\n\n#### `npm start`\nRuns the app in development mode. Open [http://localhost:3000](http://localhost:3000) to view it in your browser.\n\n#### `npm test`\nLaunches the test runner in interactive watch mode.\n\n#### `npm run build`\nBuilds the app for production to the `build` folder. It correctly bundles React in production mode and optimizes the build for the best performance.\n\n#### `npm run deploy`\nBuilds and deploys the app to GitHub Pages.\n\n---\n\n**Note**: This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthemehraaryan%2Fmausam","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthemehraaryan%2Fmausam","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthemehraaryan%2Fmausam/lists"}