Whale Call

landing page + map
tourism + island info
fleet list
medical supplies

Inspiration

Island hopping in the Caribbean is fragmented, relying on word-of-mouth schedules or static ferries that can't adapt during emergencies. We built Whale Call to fix this: a smart dispatch platform that seamlessly balances everyday tourism, supply deliveries, and urgent emergency response across 7 islands.

What it does

Whale Call connects Anguilla, Antigua, Nevis, St. Barths, St. Kitts, St. Martin, and Sint Eustatius through distinct operating modes:Travel & Tourism Mode: Allows users to explore interactive island hubs featuring photo galleries, island history, and optimal travel windows (e.g., December–April peak dry season). Travelers can seamlessly book 4 vessel classes (water taxis, cruisers, speedboats, catamarans) with dynamic fare calculation.Supply Mode: Dispatches essential cargo and relief goods based on vessel weight and payload capacity ($kg$) limits.Emergency Mode: Instantly shifts the system into Response Mode to prioritize life-saving, rescue-equipped boats.Live Fleet Engine: Tracks boats in real time with dynamic map markers, heading indicators, and route overlays.

How we built it

Whale Call is built on a full-stack TypeScript stack designed for low-latency spatial rendering and high client-side responsiveness:

Frontend: React, Tailwind CSS, TypeScript, and Lucide Icons.

State & Data Fetching: @tanstack/react-query configured with staleTime: 15_000, paired with custom auto-generated API hooks (@workspace/api-client-react) for optimistic UI state and aggressive client-side caching.

Interactive Mapping: Custom Leaflet.js integration (CaribbeanMap.tsx) powered by OpenStreetMap tile services, utilizing low-overhead HTML/CSS markers (L.divIcon), dynamic z-indexing (z-[1000]), canvas-rendered island boundaries, and vector polyline route interpolation.

Routing & Auth: Micro-routing via wouter with Clerk Authentication integration (ClerkProvider).

Challenges we ran into

Map Layering: Map elements kept covering our UI popups, so we tweaked Leaflet's stacking context and set high-priority overlays to z-[1000].

Distance Calculations: We wrote a custom Haversine math formula in client state to calculate accurate nautical distances and dynamic boat fares on the fly.

Smooth Marker Performance: Rendering over 40 live boats without lag meant replacing heavy render loops with lightweight SVG CSS rotations based on each boat's heading.

Accomplishments that we're proud of

Delivered a fully working platform that unifies passenger travel, cargo dispatch, and maritime emergency response into one cohesive, accessible product. Successfully integrated an on-the-fly Haversine calculation engine to deliver instant, accurate fare estimates based on actual nautical miles between island docks.

What we learned

Handling Multiple Modes: Structuring the app to easily flip between travel, cargo, and emergency modes taught us how to keep complex code clean and easy to scale. We learned how to keep map markers updating in real time without causing the whole app to lag.

What's next for Whale Call

What's next for Whale Call is adding live weather updates to automatically reroute boats around rough waves, along with an in-depth review system for rating rides and safety. We are also building a simple driver registration portal so captains can easily join the platform and stream their live GPS location. Finally, we are expanding our fleet to include new boat options like fast catamarans, eco-friendly electric launches, cargo boats, and rescue tenders. Also adding a better live tracking system of the boats.