Building the Surf Forecast Dashboard
Visualizing Wind & Waves for Santa Cruz
One of my ongoing side projects has been building a custom Surf Forecast Dashboard — something that gives me exactly the information I want when deciding where and when to paddle out here in Santa Cruz.
I’ve been refining it over time, and it’s become a super useful tool. Here’s a quick look at how it works and what went into it.
The Idea
There are plenty of great surf forecasting tools out there — Surfline, Windy, NOAA — but I wanted something tailored to my surf spots and my style of checking conditions:
- Prioritize wind maps — I love seeing the movement of low pressure systems and wind patterns across the entire Pacific.
- Show swell, tide, and wind data side by side, with minimal clicking.
- Highlight my local spots — the breaks I actually surf — with a simple match score and quick-read display.
- Integrate Surfline’s short-term human forecasts and visual cues right in the dashboard.
The Dashboard
Here’s what the dashboard does:
Wind Visualizer (Windy API)
The left side is a full Pacific Ocean wind visualization — live and animated, powered by the Windy API. I’m always scanning for low pressure zones and wind fetches that signal incoming swell. Seeing the entire ocean pattern is key to understanding what’s coming 5–7+ days out.
Spot Tiles (Match Score + Quick Stats)
At the top, I display a row of Santa Cruz spots:
- Steamer Lane
- Indicators
- Four Mile
- The Hook
- Jack’s / 38th Ave.
- Capitola
Each tile shows a Match Score — a calculated value based on how current conditions match each spot’s ideal swell direction, wind direction, and tide stage.
Also displayed:
- Water temp
- Wind direction & speed
- Primary swell height & period
- Spot-specific swell energy
The goal is to instantly know which spot looks promising — no hunting through individual forecast pages.
Split-Screen Surfline Forecast
The right side of the screen integrates a live Surfline forecast for the region:
- Current surf conditions and rating
- Wind + swell breakdown
- Tide chart
- Water temperature
- Surfline short-term written forecast
- “Days to Watch” — their call on best days ahead
This split-screen format lets me compare the big picture (wind + swell across Pacific) to the local Surfline forecast — without jumping between tabs.
Under the Hood
I built the dashboard using:
- HTML + JavaScript frontend
- Windy API for animated wind visualization
- NOAA buoy data and Surfline API scraping for swell/tide
- Custom spot match scoring logic based on ideal conditions I’ve built up from experience
- Hosted on my own server, optimized for fast loading on both desktop and mobile
Why I Built It
Like shaping boards, this project came from the desire to create something that fit my way of looking at surf data — not just a generic forecast page.
I surf mostly early mornings, and the wind conditions can make or break a session. I wanted a dashboard where I could glance at:
- How is the wind shaping up?
- Where is the swell energy coming from?
- Which spot is going to light up best for the next tide window?
And just like with boards, I’ll keep refining it. Next steps:
- Add more subtle swell info — secondary & tertiary swell directions visualized better
- Integrate live webcam previews behind the spot tiles
- Add alerting when match score hits thresholds for my top spots
Final Thoughts
Like building boards, this project is about understanding the variables and making better choices — and having fun doing it.
I don’t always get it right, but this dashboard helps me stay more tuned in to what’s happening out there. And just like shaping, the process of building and refining the tool is as rewarding as the sessions it helps me score.