WeatherHub 🌤️ A modern, responsive, real-time weather dashboard built with Python, Flask, HTML, CSS, and Vanilla JavaScript.
WeatherHub automatically detects the user's location when browser permission is granted and displays current weather conditions, a 7-day forecast, a 24-hour forecast, air-quality information, and an interactive map.
Developer: Lakshya Vijay Singh
GitHub: github.com/Lakshya-hu
LinkedIn: linkedin.com/in/lakshya-vijay-singh-152964376
Live Demo: Lakshya09.pythonanywhere.com
Stack: Python · Flask · HTML · CSS · Vanilla JavaScript
Services: Open-Meteo · Nominatim · Leaflet.js · OpenStreetMap
✨ Features 🌍 Automatic Location Detection Uses browser geolocation to detect the user's current location and load weather data automatically.
🔍 Worldwide City Search Search for cities anywhere in the world, including Jaipur, Delhi, Mumbai, London, Tokyo, New York, Dubai, and more.
🌡️ Current Weather Displays:
Temperature Feels-like temperature Weather condition Humidity Wind speed UV index Atmospheric pressure Visibility Cloud cover 📅 7-Day Forecast Displays exactly seven forecast days with:
Daily high and low temperatures Weather conditions Rain probability The forecast is horizontally scrollable on smaller screens.
⏱️ 24-Hour Forecast Displays hourly temperature and precipitation probability in a horizontally scrollable timeline.
💨 Air Quality Displays:
US AQI PM2.5 PM10 Air-quality classification 🗺️ Interactive Weather Map Uses Leaflet.js and OpenStreetMap to display the selected location and update the map when the location changes.
🌙 Dark / Light Mode Allows users to switch between dark and light themes.
🕐 Live Digital Clock Displays the current local time and updates automatically.
🔄 Refresh Weather Refreshes weather information without requiring a full page reload.
📱 Responsive Design Designed to work across desktop, laptop, tablet, and mobile devices.
🔑 No API Key Required The external weather, geocoding, and air-quality services used by the application do not require a user-provided API key.
🛠️ Technology Stack Layer Technology Backend Python 3, Flask Frontend HTML5, CSS3, Vanilla JavaScript HTTP Requests Python Requests Weather API Open-Meteo Forecast API Geocoding Open-Meteo Geocoding API Reverse Geocoding Nominatim Air Quality Open-Meteo Air Quality API Map Leaflet.js + OpenStreetMap 🌐 How It Works WeatherHub follows this basic flow:
User opens WeatherHub ↓ Browser requests location permission ↓ GPS coordinates are obtained ↓ Flask backend receives coordinates ↓ Nominatim reverse-geocodes the coordinates ↓ Open-Meteo APIs provide weather and air-quality data ↓ Flask returns the data ↓ JavaScript renders the dashboard Location Detection When the page opens, JavaScript requests the browser's GPS coordinates. If permission is granted, the coordinates are sent to the Flask backend through the /location route. Flask uses Nominatim to reverse-geocode the coordinates and determine the location name. Flask requests current, hourly, and daily weather data from Open-Meteo. Flask requests air-quality data from the Open-Meteo Air Quality API. The returned data is sent to the frontend. JavaScript renders the weather dashboard and updates the map. If location permission is denied, the user can search for a city manually through the search bar.
📁 Project Structure weather-hub/ │ ├── app.py # Flask backend, routes, and API helpers ├── requirements.txt # Python dependencies ├── .gitignore # Files excluded from Git ├── README.md # Project documentation │ ├── templates/ │ └── index.html # Main HTML page and Jinja2 template │ └── static/ ├── style.css # Application styling and responsive design └── script.js # Location, search, weather rendering, and map logic 💻 Local Development (Windows)
- Clone the Repository git clone https://github.com/Lakshya-hu/weather-hub.git cd weather-hub
- Create a Virtual Environment py -m venv venv
- Install Dependencies PowerShell .\venv\Scripts\python.exe -m pip install -r requirements.txt Command Prompt venv\Scripts\python.exe -m pip install -r requirements.txt
- Run the Application .\venv\Scripts\python.exe app.py
- Open WeatherHub Open the following address in your browser:
http://127.0.0.1:5000 📱 Accessing WeatherHub from Your Phone (Same Wi-Fi) The Flask application listens on all network interfaces using:
host="0.0.0.0" This allows another device connected to the same Wi-Fi network to access the local application.
Step 1: Start Flask .\venv\Scripts\python.exe app.py You should see output similar to:
- Running on all addresses (0.0.0.0)
- Running on http://127.0.0.1:5000
- Running on http://192.168.x.x:5000 Step 2: Find Your PC's IPv4 Address Open another PowerShell or Command Prompt window:
ipconfig Look under the Wi-Fi adapter for the IPv4 address.
Example:
Wireless LAN adapter Wi-Fi:
IPv4 Address. . . . . . : 192.168.1.5 Step 3: Open WeatherHub on Your Phone Connect your phone to the same Wi-Fi network as your PC.
Then open:
http://192.168.1.5:5000 Replace 192.168.1.5 with your PC's actual IPv4 address.
Both the PC and phone must be connected to the same Wi-Fi network.
🔥 Windows Firewall: Allow Port 5000 If your phone cannot connect to the local Flask server, Windows Firewall may be blocking port 5000.
Run PowerShell as Administrator:
netsh advfirewall firewall add rule name="WeatherHub Flask 5000" dir=in action=allow protocol=TCP localport=5000 profile=private This creates a firewall rule for the Private network profile.
To remove the rule later:
netsh advfirewall firewall delete rule name="WeatherHub Flask 5000" 🚀 Online Deployment (PythonAnywhere) WeatherHub is deployed publicly using PythonAnywhere.
Live Website: https://Lakshya09.pythonanywhere.com
The existing PythonAnywhere WSGI configuration is already working and should not be modified unnecessarily.
Updating the Application After making changes locally:
Commit and push the changes to GitHub. Upload the required changed application files through the PythonAnywhere Files tab. Keep the existing directory structure. Go to the Web tab. Click Reload to restart the deployed application. Typical application files are located under:
/home/Lakshya09/mysite/ with the following structure:
/home/Lakshya09/mysite/ │ ├── app.py ├── templates/ │ └── index.html └── static/ ├── style.css └── script.js Important: The existing WSGI configuration is working. Do not modify it unless a deployment problem specifically requires it.
📍 Browser Location Permission WeatherHub uses the browser's Geolocation API.
When opening the application for the first time, the browser may ask:
"Allow this site to access your location?"
Select Allow to automatically load weather for your current location.
If location permission is denied, use the city search feature instead.
Browser geolocation works on localhost and secure HTTPS websites such as the PythonAnywhere deployment.
🔍 City Search WeatherHub supports worldwide city search.
Enter a city name in the search bar and press Enter or use the search button.
Examples:
Jaipur Delhi Mumbai London New York Tokyo Dubai The application retrieves the city's coordinates and loads the corresponding weather information.
📦 Requirements The project requires:
Flask Requests The exact package versions are defined in:
requirements.txt Install them with:
.\venv\Scripts\python.exe -m pip install -r requirements.txt 🔗 Project Links GitHub Repository: https://github.com/Lakshya-hu/weather-hub
GitHub Profile: https://github.com/Lakshya-hu
LinkedIn: https://www.linkedin.com/in/lakshya-vijay-singh-152964376/
Live Website: https://Lakshya09.pythonanywhere.com
📄 License This project was built as a college learning project.
Feel free to use, modify, and learn from it.
Built with ❤️ by Lakshya Vijay Singh