Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hari7261/advancedweatherapp
Advanced Weather Website! This web application provides real-time weather information, forecasts, and news, making it your go-to platform for everything related to weather.
https://github.com/hari7261/advancedweatherapp
advanced-weather-forecasting-app axios-react hari7261 newsapi openweathermap-api react reactjs tailwindcss vercel vercel-deployment weather-app weather-forecast
Last synced: 10 days ago
JSON representation
Advanced Weather Website! This web application provides real-time weather information, forecasts, and news, making it your go-to platform for everything related to weather.
- Host: GitHub
- URL: https://github.com/hari7261/advancedweatherapp
- Owner: hari7261
- Created: 2024-11-03T11:44:13.000Z (11 days ago)
- Default Branch: main
- Last Pushed: 2024-11-03T11:51:07.000Z (11 days ago)
- Last Synced: 2024-11-03T12:27:17.342Z (11 days ago)
- Topics: advanced-weather-forecasting-app, axios-react, hari7261, newsapi, openweathermap-api, react, reactjs, tailwindcss, vercel, vercel-deployment, weather-app, weather-forecast
- Language: JavaScript
- Homepage: https://advanced-weather-five.vercel.app/
- Size: 0 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🌌 **Advanced Weather Dashboard**
Welcome to the **Advanced Weather Dashboard**! This cutting-edge web application offers real-time weather information, detailed forecasts, and the latest news, providing you with all the tools needed to stay informed about weather conditions worldwide.
[Demo](https://advanced-weather-five.vercel.app/)
---
## 📚 **Table of Contents**
1. [Features](#features)
2. [Technologies Used](#technologies-used)
3. [Installation](#installation)
4. [Usage](#usage)
5. [Components](#components)
6. [Contributing](#contributing)
7. [License](#license)
8. [Contact](#contact)
---
## 🌟 **Features**
The Advanced Weather Dashboard is packed with powerful features designed for your convenience:
| 🌈 Feature | 🌐 Description |
|-----------------------------|--------------------------------------------------------------|
| **Current Weather** | Get up-to-date weather info for any city around the globe. |
| **5-Day Forecast** | Access detailed forecasts to plan your week ahead. |
| **Interactive Charts** | Visualize weather data trends in engaging and dynamic charts. |
| **Weather News** | Stay informed with the latest weather news articles. |
| **User-Friendly Search** | Quickly search for the latest weather updates in your city. |
| **Customizable Settings** | Tailor your experience with adjustable temperature units and update intervals. |
| **Data Privacy** | We value your privacy; no personal data is stored. |
### 🧭 **Feature Highlights:**
- 🌍 **Global Reach**: Supports weather updates for cities worldwide.
- ⚡ **Real-Time Updates**: Get instant updates every 5 minutes to stay informed.
- 🔄 **Seamless Experience**: Responsive design for both desktop and mobile.
---
## 💻 **Technologies Used**
This project leverages modern web technologies to deliver a smooth user experience:
- **React.js**: A powerful library for building interactive UIs.
- **Tailwind CSS**: A utility-first CSS framework for modern styling.
- **Axios**: A promise-based HTTP client for making API requests.
- **OpenWeatherMap API**: Provides current weather data and forecasts.
- **News API**: Fetches the latest news articles relevant to weather conditions.
---
## 🚀 **Installation**
To set up the Advanced Weather Dashboard locally, follow these steps:
1. **Clone the Repository**:
```bash
git clone https://github.com/your-username/advanced-weather-dashboard.git
```
2. **Navigate into the Directory**:
```bash
cd advanced-weather-dashboard
```
3. **Install Dependencies**:
```bash
npm install
```
4. **Add Your API Keys**:
Create a `.env` file in the root directory and add your API keys:
```plaintext
REACT_APP_WEATHER_API_KEY=your_openweather_api_key
REACT_APP_NEWS_API_KEY=your_news_api_key
```
5. **Run the Application**:
```bash
npm start
```
### 🔑 **Environment Variables**:
| Variable | Description |
|--------------------------------|---------------------------------------|
| `REACT_APP_WEATHER_API_KEY` | Your OpenWeather API key |
| `REACT_APP_NEWS_API_KEY` | Your News API key |
---
## 📖 **Usage**
1. **Search for Weather**: Use the search bar to enter a city name and retrieve current weather updates.
2. **View 5-Day Forecast**: Navigate to the forecast section for predictions on upcoming weather conditions.
3. **Explore Interactive Charts**: Analyze weather trends through dynamic visual representations.
4. **Stay Updated with Weather News**: Browse through the latest articles to keep abreast of weather-related topics.
---
## 🧩 **Components**
The application is structured into several key components:
- **Header**: Displays the main title and navigation options.
- **Search Bar**: Allows users to input city names for quick weather queries.
- **Weather Cards**: Present current weather details and forecasts in an interactive format.
- **Charts**: Show graphical representations of weather data for better comprehension.
- **News Section**: Provides links to the latest weather news articles for reading.
---
## 📜 **License**
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
---
## 💬 **Contact**
For any inquiries or feedback, feel free to reach out!
- **Website**: [site](https://www.hariompandit.me)
---
Thank you for exploring the Advanced Weather Dashboard! We hope you find it both informative and enjoyable to use. 🌈✨
---
### 📅 **Stay Updated with Weather Changes!** 🌦️
Follow us for the latest updates and features as we continue to improve and enhance your weather experience!