The live application can be accessed at walkhilbre.co.uk.
Problem
Hilbre Island, a local nature reserve in the Dee Estuary, is only accessible on foot from West Kirby during low tide. Because the estuary tide rises rapidly and floods the low-lying sandbanks first, walkers who rely solely on raw high/low tide times risk getting cut off from the mainland or trapped by dangerous tidal currents. Traditional tables fail to visualize water levels or dynamically calculate the safe crossing windows.
Approach
- Safe Window Calculations: Implemented algorithms that consume harmonic tidal constituents and real-time station data to dynamically calculate safe, time-bounded crossing windows (the low-tide transit safety buffer).
- Inundation Mapping: Developed an interactive mapping interface using Leaflet and local bathymetry datasets. The map overlays simulated water boundaries relative to the current or selected tide height, highlighting safe paths (like the route via Little Eye and Middle Eye).
- PWA and Offline-First Design: Engineered the application as a Progressive Web App (PWA) utilizing Service Workers and client-side storage to cache mapping tiles and tide data. This ensures full functionality out on the sands where mobile signal is highly unreliable.
- Pre-fetch Optimizations: Integrated a pre-render bootstrap script that starts fetching telemetry and mapping data immediately on document load, bypass-loading resources before the main framework bundle executes to optimize Largest Contentful Paint (LCP).
Key Highlights
- Real-World Utility: Solves a safety-critical navigation problem for local hikers, nature enthusiasts, and tourists.
- Resilient Offline Mapping: Offline tile caching guarantees mapping availability during cellular dropouts.
- High-Performance Architecture: Fast-boot loading ensures the tide tracker runs smoothly on low-power mobile devices under outdoor glare conditions.