Inspired by adventure. Powered by code.
© 2025 Long Hoa Chung
Explore weather forecasts for 170+ cities worldwide
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.
- 🌍 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)
- Fixed list of 20 European cities
- Static UI
- Basic weather display
- 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.
The application follows a client–server architecture.
- HTML, CSS, and vanilla JavaScript
- Dynamic UI rendering and state management
- City selection, background switching, and navigation
- Weather data and map visualisation
- 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.
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-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.
- JavaScript (ES6+)
- HTML5 / CSS3
- Node.js
- 7timer.info Weather API
- Leaflet & OpenStreetMap
- Pixabay Image Sourcing
- GitHub Pages / Render for deployment
git clone https://github.com/longchung90/weather_forecast.git](https://weather-forecast-global.onrender.com/
cd weather_forecast
npm install
npm startIf 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.
This project is released under the MIT License.
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.
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.
- Weather data provided by public weather APIs
- City imagery sourced from Pixabay
- AI-assisted tools used responsibly for design-time asset creation