I wanted to answer the "Will we have a White Christmas?" question without wading through ad-heavy weather sites, so I built a dedicated SPA to visualize the data on a 3D globe.
The Stack:
Frontend: React + Mapbox GL JS (using the globe projection).
Data: Open-Meteo API (fetching 20 years of historical daily snow depth + live forecasts).
Visuals: HTML5 Canvas for the snow particle engine (optimized for mobile) and a Glassmorphism UI overlay.
The Logic: The probability score isn't just a static historical average. It uses a weighted "blended" model. Right now (early Dec), it leans heavily on 20 years of climatology data. As we get within the 16-day forecast window, the app dynamically shifts weight toward the live deterministic forecast. By Dec 21st, it switches entirely to live radar models.
Challenges: Handling the API rate limits was tricky. I had to implement a split-routing strategy where historical data hits the public archive (to avoid auth errors) while forecasts use a commercial key, all cached in-memory to prevent re-fetching the same city twice.
stlattack•2mo ago
I wanted to answer the "Will we have a White Christmas?" question without wading through ad-heavy weather sites, so I built a dedicated SPA to visualize the data on a 3D globe.
The Stack:
Frontend: React + Mapbox GL JS (using the globe projection).
Data: Open-Meteo API (fetching 20 years of historical daily snow depth + live forecasts).
Visuals: HTML5 Canvas for the snow particle engine (optimized for mobile) and a Glassmorphism UI overlay.
The Logic: The probability score isn't just a static historical average. It uses a weighted "blended" model. Right now (early Dec), it leans heavily on 20 years of climatology data. As we get within the 16-day forecast window, the app dynamically shifts weight toward the live deterministic forecast. By Dec 21st, it switches entirely to live radar models.
Challenges: Handling the API rate limits was tricky. I had to implement a split-routing strategy where historical data hits the public archive (to avoid auth errors) while forecasts use a commercial key, all cached in-memory to prevent re-fetching the same city twice.
It’s live at https://whitexmas.app
I’d love to hear your thoughts on the UX or the probability logic!