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 (about 2 months ago)
- Default Branch: main
- Last Pushed: 2024-11-12T15:34:08.000Z (about 2 months ago)
- Last Synced: 2024-12-21T23:49:08.374Z (10 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: 3.89 MB
- Stars: 1
- 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.
---
## Meet Our Team
### 👨💻 Hariom Kumar (me)| **Software Developer**
Hariom builds the backbone of our platform, making sure everything runs smoothly behind the scenes. With his efficient code and eye for detail, he ensures our systems stay fast, responsive, and reliable.
### 🤖 Himanshu Kumar | **AI Researcher**
Himanshu is our machine learning expert. He’s the mind behind the algorithms that make our forecasts so accurate. Constantly exploring new ways to improve our models, Himanshu is always pushing the limits of what AI can do in weather forecasting.
### 📊 Dharani | **Data Scientist**
Dharani digs into vast amounts of weather data to find the patterns that shape our forecasts. With her analytical skills, she keeps our models updated and precise, helping us stay ahead of changing weather conditions.
### 🖥️ Arullaln | **Frontend Developer**
Arullaln is the creative force behind our user interface. He designs clean, easy-to-use layouts that make it simple for you to find and understand the forecast. His work makes our platform both beautiful and functional.
### 🔧 Ujjwal Kaushik | **Back-End Developer**
Ujjwal makes sure our platform is always up and running, no matter how many users are checking the weather. With his experience in server-side programming, he keeps everything fast, efficient, and ready to deliver forecasts in real time.
### 🚀 Ashwin Sundar | **Product Manager**
Ashwin keeps us focused on what matters most: our users. With a vision for the future and a clear sense of purpose, he brings together our team’s talents to create features that truly make a difference in your daily life.
---
## Our Vision for the Future
We’re committed to a future where advanced weather forecasting helps people everywhere stay prepared for whatever comes next. As we grow, we’re excited to bring you even better, more detailed, and more timely weather insights.
---
## 💻 **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!