Skip to main content
Back to Projects

Web Development

Stratus Update

Weather forecasting made elegant

Stratus Update screenshot

Overview

A modern weather dashboard built with vanilla JavaScript that features city search, geolocation, 3-day forecasts, animated weather icons, and dark/light themes, with a secure Firebase backend proxy for API calls.

Key Features

  • Dual deployment architecture with proxy mode for production security and direct mode for local development
  • Context-aware dynamic backgrounds with 8+ weather-based UI themes featuring animated effects (rain, snow, lightning)
  • Intelligent autocomplete search with 300ms debouncing, keyboard navigation, and query highlighting
  • Persistent recent searches with localStorage and intelligent deduplication based on coordinates
  • Comprehensive error handling with user-friendly messaging and context-aware retry options

Challenges & Solutions

The project addressed several technical challenges including API key security through Firebase Cloud Functions reverse proxy with CORS handling, dynamic background rendering across both dark and light themes using CSS custom properties and class switching, real-time temperature unit conversion between Fahrenheit and Celsius using centralized formatting, timezone-aware date formatting with client-side offset calculations, efficient 3-day forecast extraction from 40 data points using Map-based deduplication, modular architecture with ES modules requiring no build tools, and loading state management with coordinated visual feedback across parallel API calls.

Tech Stack

HTML5CSS3JavaScriptFirebaseFirebase FunctionsOpenWeatherMap APICSS Grid

Project Type

Web Development