Chill Epic Surf - Live Surf Conditions & Community by Vincent PasiliChill Epic Surf - Live Surf Conditions & Community by Vincent Pasili
Built with MagicPath

Chill Epic Surf - Live Surf Conditions & Community

Portfolio project
Vincent Pasili

Epic Surf - Case Study

Overview

Epic Surf is a real-time surf forecasting platform that provides conditions and forecasts for 300+ surf spots worldwide. Surfers can check wave heights, wind conditions, tides, and get personalized recommendations—all optimized for mobile use.

The Problem

Surfers need quick, accurate surf forecasts but face:
Scattered information across multiple websites
Complex data that requires expertise to interpret
Limited mobile-friendly options
No community platform to share conditions

The Solution

A mobile-first web app that aggregates authoritative marine weather data and presents it in an easy-to-understand format with social features.

Tech Stack

Frontend: React + TypeScript, Vite, Tailwind CSS, shadcn/ui
Backend: Express.js, PostgreSQL (Neon), Drizzle ORM
APIs: NOAA Marine Weather, Open-Meteo, Google Maps
Storage: Supabase for media files

Key Features

Smart Surf Ratings: Automated algorithm analyzing wind, waves, and swell
5-Day Forecasts: Interactive charts with hourly breakdowns
Interactive Map: 300+ spots with color-coded condition markers
Social Feed: Share photos/videos with the community
Favorites System: Save and track your go-to spots
Mobile-First Design: Bottom navigation for easy thumb access

Technical Highlights

Intelligent Rating Algorithm

Analyzes multiple factors:
Wind direction (offshore = clean waves)
Wave height and period
Swell direction
Assigns ratings: Epic, Chill-Epic, Good, Rideable, Flat

Real-Time Data Pipeline

Automated updates every 6 hours
Smart caching reduces API calls by 90%
Manual refresh available for immediate updates

Mobile Optimization

70% of users on mobile
Bottom navigation for thumb-friendly access
Responsive charts and images
Fast load times with code splitting

Challenges Solved

Data Aggregation: Combined NOAA (US) and Open-Meteo (international) APIs into unified format
Performance: Implemented two-tier caching (memory + database) for fast responses
User Experience: Created automated surf ratings so users don't need to interpret raw data
Video Processing: Built non-blocking upload system—posts succeed even if thumbnail generation fails

Impact

300+ global surf spots covered
Sub-2-second page loads
Real-time conditions updated automatically
Community engagement through social feed

Inspiration

Surfline: Professional forecast presentation
Magic Seaweed: Community-driven reports
Windy: Beautiful weather visualization
Strava: Social feed patterns

Future Plans

10-day extended forecasts
User-submitted condition reports
Live surf cameras
Push notifications for epic conditions
Offline PWA mode

Key Learnings

Mobile-first is essential for outdoor activity apps
Reliable data sources build user trust
Smart defaults (automated ratings) improve accessibility
Non-blocking architecture keeps users happy even when features fail

Built with modern web technologies to serve the global surfing community.

5 likes · 105 views · Nov 7, 2025

Discover surf conditions worldwide with real-time marine weather data. Join the surf community to share experiences, view forecasts, and find the best waves.

Timeline

Aug 11, 2025 - Ongoing

Tags