Web & API

WeatherHub

A sleek weather application fetching real-time meteorological data via REST APIs with a responsive interface deployed on Firebase.

JavaScript REST API Firebase

Live Demo Browse GitHub Profile

Project Type Live API

My Role Frontend Engineer

Status Deployed

Overview

WeatherHub is a modern, responsive web application designed to provide users with accurate and up-to-date weather forecasts. By interacting with external REST APIs, it processes complex JSON payloads and dynamically updates the DOM to deliver a seamless user experience.

Key Features

Real-Time Telemetry

Fetches live weather data, temperature, humidity, and forecasts from reliable 3rd party APIs.

Responsive Design

Flawlessly adapts to any device, offering a native app-like experience on mobile.

Geolocation Search

Allows users to instantly search for weather conditions by city name or location.

Firebase Hosting

Deployed seamlessly via Firebase, ensuring low-latency asset delivery and high availability globally.

System Architecture Pipeline

Client-to-cloud asynchronous weather pipeline handling user search input, client caching, third-party REST telemetry, and global edge delivery via Firebase.

Asynchronous Weather Telemetry Pipeline

Vanilla ES6+ Fetch API Open-Meteo REST Firebase Edge

01 / User Input

Location Query City search query or browser GPS coordinate prompt Geolocation API

Debounce Filter 350ms input buffer to minimize excessive upstream queries Rate Limiter

02 / Client State

Async Fetch Engine Promise-based non-blocking HTTP client with fallback cache Fetch API · ES6+

Reactive DOM Renderer Dynamic temperature, humidity & 7-day forecast views Zero Dependency

03 / Weather Services

Open-Meteo REST API Real-time meteorological metrics, forecasts & solar indices JSON Over HTTPS

Geocoding Endpoint Reverse coordinate translation & country boundary mapping REST API Service

04 / Global Edge

Firebase Edge CDN Anycast distributed edge routing for sub-50ms TTFB globally Edge Caching

HTTPS Endpoint Automated SSL/TLS certificate termination and security TLS 1.3 Security

Performance Sub-200ms Render Instant cached query responses and fluid weather card repaints

Dependency Footprint Zero External Frameworks Pure modern ES6+ JavaScript ensuring lightweight, instant loading

Resilience Graceful Error Boundary Offline local storage caching and clear API rate-limit notifications

Global Delivery Firebase Edge CDN Globally replicated static distribution with instant SSL security