← Back

Buoyup

Creator & Developer 2024 — Present buoyup.surf ↗

Overview

Creator of BuoyUp, a comprehensive marine conditions monitoring platform that aggregates real-time data from multiple NOAA sources—buoy readings, tide predictions, wave forecasts, and marine zone forecasts—into a unified, installable PWA. Built to give ocean enthusiasts a single dashboard for all the information scattered across government websites.

Features

The Work

A consolidated marine weather dashboard for surfers, boaters, and ocean watchers who are tired of bouncing between NDBC, CO-OPS, and NWS websites. The platform pulls from four distinct NOAA APIs and presents everything in a unified, mobile-first interface.

Data Integration: Fetches buoy conditions from NDBC (both combined wave height and separated spectral swell/wind wave components), tide predictions from CO-OPS with geocoded station search, NWPS wave forecast imagery with automated playback, and full marine zone forecasts searchable by location or zone ID.

Visualization: Built a custom Three.js polar spectrum viewer that renders directional wave energy as an interactive 3D surface—users can rotate and zoom to explore frequency-direction cells. SVG fallback ensures compatibility when WebGL isn't available.

Intelligent Caching: Three-tier strategy delivers instant load times. Browser localStorage provides immediate display of cached data, Vercel Redis serves as a server-side cache refreshed by cron jobs, and direct NOAA fetches with CORS proxy failover ensure fresh data when needed.

Push Notifications: Background alerts via VAPID-based Web Push. Users set per-station swell height thresholds; a 5-minute cron job checks conditions against subscriptions and fires notifications with 1-hour cooldowns to prevent spam.

Tech Stack: React 18 + Vite, Tailwind CSS, Vercel serverless functions, Upstash Redis for subscriptions and caching, Workbox-powered service worker for offline capability. Four customizable themes including a radar-green "Ops" mode.

Theme
Texture