Delivery snapshot
Record date: September 10, 2026. Technology and screenshots describe the delivered version documented on this date. Any performance observations belong to the same point-in-time record. The linked live site may include later changes made by the client or other providers.Business context
RampTracker Web is a personal product I designed and built as the browser companion to my RampTracker mobile app. I own both projects, from product direction and implementation to release and ongoing maintenance. The website gives boaters a way to explore launch locations before installing the app and share a specific ramp with someone using a browser.
Problem
Choosing a boat ramp involves more than finding a pin on a map. People need to compare locations, check available facilities, and understand what information is known before planning a trip. That discovery should work on a desktop at home and on a phone near the water, without requiring an app download.
Constraints
A large geographic catalog needs a usable map and a readable results list on very different screen sizes. Ramp information can be incomplete, location access may be unavailable, and a map or data request can fail. The web experience also needs English and Spanish navigation and individual ramp pages that people can open directly.
Decision
I built the experience around a synchronized map and results panel. Moving the map changes the visible results; search and facility filters help narrow the selection. Desktop users can browse the map beside the list, while the mobile interface uses map/list navigation and a bottom sheet for results and details.
Delivered experience
Explore and compare
Interactive maps group nearby ramps into clusters and let visitors search by ramp name or location. Filters cover facilities such as docks, restrooms, and trailer parking. Nearby-location controls help orient the map, and selecting a result connects the map position to its ramp details.
Open and share a ramp
Each public ramp has a dedicated page with location information, available facility details, directions, and a way to report an issue. English and Spanish routes make the directory and individual records accessible in either language. Unknown information stays explicit instead of being presented as a confirmed facility or status.
Keep discovery usable
The interface includes loading, empty, and error states, a list fallback when the map cannot load, and server-rendered directory and detail content. The website also connects visitors to the mobile app and provides product support and feedback paths.
Ownership and support
I own the responsive interface, mapping integration, public ramp routes, data integration, bilingual content, and Cloudflare deployment workflow. I maintain the website alongside the mobile app as two connected parts of the same independent product.
Technology
React, TypeScript, Vite, and React Router power the interface. MapLibre GL renders the map with OpenFreeMap tiles. Cloudflare Pages and Pages Functions deliver the site and public ramp routes, with Supabase-backed services supplying ramp data. Responsive layouts, keyboard focus handling, and reduced-motion support are built into the explorer.