weather_forecast

🌤️ Global Weather Explorer

Explore weather forecasts for 170+ cities worldwide

✨ Overview

Global Weather Explorer is an interactive web application for exploring real-time and forecast weather conditions across cities worldwide.

Originally developed as a Coursera assignment and independently expanded into a fully featured global weather application.

✨ Features

🌍 170+ Global Cities across Europe, the Americas, Asia, Africa & Oceania
🔍 Smart City Search with real-time geocoding
📋 Continent-Based Dropdown Navigation for guided exploration
📅 7-Day Weather Forecasts powered by the 7timer.info API
🎨 Dynamic City Backgrounds that update with each selection
🗺️ Interactive Maps using Leaflet + OpenStreetMap
🔁 “Change City” Navigation for smooth user flow
📬 City Request Contact Form for user-driven expansion
📱 Fully Responsive Design (desktop, tablet, mobile)

🧭 Project Scope & Enhancements

Original Coursework Requirements

Fixed list of 20 European cities
Static UI
Basic weather display

Enhancements Beyond Coursework

Global expansion with cities grouped by continent
Dual city selection (dropdown + search)
Dynamic, city-specific backgrounds
Improved navigation and user flow
Automated image asset management
User feedback loop via contact form

Rather than stopping at the minimum academic requirements, the project was treated as a real-world web application, with emphasis on usability, maintainability, and visual polish.

🏗️ Architecture

The application follows a client–server architecture.

Front End

HTML, CSS, and vanilla JavaScript
Dynamic UI rendering and state management
City selection, background switching, and navigation
Weather data and map visualisation

Back End (Lightweight)

Node.js server for application serving
Automation scripts for background image management
Integration with external APIs and image sources

The back end is intentionally lightweight, supporting automation and asset handling rather than acting as a full custom API or database layer.

🎨 Design & Visual Assets

Default Background (AI-Assisted Design)

The default landing background—featuring a world map with weather icons and wind motifs—was created using multi-turn, prompt-driven image generation. Prompts were iteratively refined through human-in-the-loop evaluation before integrating the final static asset into the application.

City Background Images

City-specific background images are sourced from Pixabay and retrieved through an automated download workflow. This approach supports scalability while ensuring consistent visual quality and compliance with Pixabay’s free-use licensing terms.

🛠️ Technologies Used

JavaScript (ES6+)
HTML5 / CSS3
Node.js
7timer.info Weather API
Leaflet & OpenStreetMap
Pixabay Image Sourcing
GitHub Pages / Render for deployment

🚀 Getting Started

git clone https://github.com/longchung90/weather_forecast.git](https://weather-forecast-global.onrender.com/
cd weather_forecast
npm install
npm start

💖 Support & Funding

If you find this project useful:

⭐ Star the repository
🐛 Open issues or suggest improvements
🤝 Contribute features or enhancements
💖 Support future development via GitHub Sponsors

Funding options are configured through GitHub’s native sponsorship system.

📄 License

This project is released under the MIT License.

🌐 Rendering & Deployment

This application is not rendered by GitHub’s markdown or static preview system. The UI is rendered by the application itself using a client-side rendering pipeline and is deployed via GitHub Pages with a custom configuration and domain.

All dynamic content—including city selection, weather data, background imagery, and navigation state—is generated at runtime by the application rather than being statically rendered by GitHub.

☁️ Hosting & Operational Ownership

This application is deployed on a managed cloud platform with paid hosting and email services, which I actively maintain. Ongoing costs (hosting, domain, and email delivery) are covered monthly to ensure availability, reliability, and proper user communication.

This reflects a deliberate choice to treat the project as a maintained application rather than a temporary demo, with responsibility for deployment, runtime behaviour, and user contact channels.

🙌 Acknowledgements

Weather data provided by public weather APIs
City imagery sourced from Pixabay
AI-assisted tools used responsibly for design-time asset creation