Weather • Tides • UV Index • Activity Scores • Webcams • Dark Mode
Van Beaches pulls together live weather, tide predictions, and UV data into a single dashboard so you can figure out the best time to hit the beach — no tab-juggling required.
It covers 9 beaches across Vancouver: English Bay, Kitsilano, Jericho, Spanish Banks, Locarno, Second Beach, Third Beach, Sunset Beach, and Trout Lake.
| Feature | Details | |
|---|---|---|
| Live Weather | Temperature, wind, UV, humidity, and 5-day forecast | Open-Meteo |
| Tide Predictions | Animated chart with high/low markers and a live "now" indicator | Canadian IWLS API |
| Best Time to Visit | Hourly scoring based on weather, UV, tide level, and golden hour | Composite algorithm |
| Activity Scores | Swimming, sunbathing, volleyball, kiteboarding rated against conditions | Per-activity weights |
| Beach Comparison | Side-by-side compare up to 3 beaches | — |
| Favorites | Save favorite beaches; returning users land on their top pick | LocalStorage |
| Webcams | Live feeds where available | — |
| Dark Mode | System-aware with manual toggle | — |
| Water Quality | Status badges (synthetic for now, real API planned) | — |
vanbeaches/
├── client/ React 19 + Vite + Tailwind — the SPA
├── shared/ Types, beach data, API response helpers
├── worker/ Cloudflare Worker — scheduled cache refresh
└── functions/ Cloudflare Pages Functions — on-demand API
A Cloudflare Worker runs cron jobs to keep a KV cache warm (weather every 30 min, tides hourly, water quality every 6 h). Pages Functions serve API requests cache-first, falling back to upstream on a miss. Both share the same KV namespace.
┌─────────┐ ┌──────────────────┐ ┌──────────┐
│ Client │───▶ Pages Functions │───▶│ KV │
└─────────┘ └──────────────────┘ └────┬─────┘
│
┌──────────────────┐ │
│ Worker (cron) │─────────┘
└───────┬──────────┘
│
┌──────────┴──────────┐
▼ ▼
Open-Meteo DFO IWLS
Prerequisites: Node.js >= 20, pnpm 9
pnpm install # install dependencies
pnpm build # build all workspaces (shared builds first)
pnpm dev # start local dev server via Wranglerpnpm check # lint with Biome
pnpm type-check # typecheck all workspaces
pnpm test # run Vitest + PlaywrightNo API keys required — Open-Meteo and IWLS are both free and open.
| Source | What it provides | Refresh rate |
|---|---|---|
| Open-Meteo | Weather, UV index, wind, humidity | 30 min |
| DFO IWLS | Tide predictions (Point Atkinson) | 1 h |
MIT