WeatherFlow — Modern Weather Dashboard

WeatherFlow is a modern, responsive weather dashboard developed using Django, HTML, CSS, and JavaScript. It provides real-time weather information, hourly and weekly forecasts, air quality insights, and interactive visualizations by integrating the Open-Meteo API.

The application focuses on delivering an intuitive user experience with dynamic weather animations, theme customization, temperature conversion, and detailed atmospheric information.

---

Project Overview

WeatherFlow enables users to search for any city or district and view detailed weather conditions along with environmental data.

The application integrates multiple external APIs to fetch accurate weather information and presents the data through an interactive, responsive dashboard.

---

Key Features

Weather Information

• Search weather by city or district
• Real-time weather conditions
• Current temperature and weather status
• Humidity details
• Wind speed and direction
• Atmospheric pressure
• Visibility information
• Sunrise and sunset timings

---

Weather Forecasts

• 24-hour hourly forecast
• 7-day weather forecast
• Temperature trend visualization
• Weather condition predictions

---

Air Quality and Environmental Data

• Air Quality Index (AQI)
• UV Index monitoring
• Environmental insights
• Atmospheric condition analysis

---

User Interface

• Responsive modern dashboard design
• Light and dark theme support
• Celsius/Fahrenheit temperature conversion
• Dynamic weather animations
• Weather radar animation
• Interactive globe visualization

---

Technology Stack

Backend

• Python
• Django 5

Frontend

• HTML5
• CSS3
• JavaScript (ES6)
• Canvas API

External APIs

Open-Meteo Weather API

Used for:

• Current weather conditions
• Hourly weather forecast
• Daily weather forecast

Open-Meteo Geocoding API

Used for:

• City and district search
• Location coordinate mapping

Open-Meteo Air Quality API

Used for:

• AQI information
• Environmental measurements

---

Project Structure

WeatherFlow-Django/
│
├── weather/
│   ├── views.py              # Weather application logic
│   ├── urls.py               # Application routes
│   └── services.py           # External API integration
│
├── weatherapp/
│   ├── settings.py           # Django configuration
│   └── urls.py               # Main URL configuration
│
├── templates/
│   └── weather/
│       └── dashboard.html    # Dashboard UI
│
├── static/
│   ├── css/                  # Stylesheets
│   ├── js/                   # JavaScript files
│   └── images/               # Static assets
│
├── requirements.txt
├── manage.py
├── README.md
└── .gitignore

---

Installation and Setup

Clone Repository

git clone https://github.com/your-username/WeatherFlow-Django.git

Navigate to Project Directory

cd WeatherFlow-Django

Create Virtual Environment

python -m venv venv

Activate the environment:

Windows

venv\Scripts\activate

Linux / macOS

source venv/bin/activate

---

Install Dependencies

pip install -r requirements.txt

---

Apply Database Migrations

python manage.py migrate

---

Run Development Server

python manage.py runserver

Open the application:

http://127.0.0.1:8000/

---

API Endpoints

Endpoint	Description
/	Weather dashboard
/api/weather/?city=<city>	Fetch weather information

Example request:

GET /api/weather/?city=Mumbai

Example response:

{
    "temperature": 28,
    "humidity": 75,
    "wind_speed": 12,
    "condition": "Cloudy"
}

---

Supported Locations

WeatherFlow supports thousands of locations worldwide.

Examples:

• Pune, India
• Mumbai, India
• Delhi, India
• Bangalore, India
• London, United Kingdom
• Tokyo, Japan
• New York, USA
• Dubai, UAE

---

Future Enhancements

Planned improvements:

• Current location weather detection
• Favorite cities management
• Weather alert notifications
• Interactive weather maps
• Historical weather analytics
• Multi-language support
• Progressive Web App (PWA)

---

Learning Outcomes

Through this project, I gained practical experience in:

• Django backend development
• REST API integration
• External API consumption
• JavaScript asynchronous programming
• Dynamic UI rendering
• Responsive web design
• Data visualization using Canvas API

---

Developer

Harshali Kulkarni

---

License

This project is licensed under the MIT License.

You are free to use, modify, and distribute this project with proper attribution.

weatherFlow.1.mp4