Buoyup
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
- Real-time NOAA NDBC buoy data (standard + spectral)
- Interactive tide charts with location-based search
- 144-hour wave forecast imagery with playback
- Marine zone text forecasts
- Live beach webcam feeds
- 3D directional wave spectrum viewer (Three.js)
- Customizable push notification thresholds
- Multi-layer caching (localStorage → Redis → NOAA)
- Installable PWA with offline support
- Drag-to-reorder, swipe-to-delete mobile UX
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.