Project Peak
About the Project
A luxury adventure travel booking platform offering bespoke trekking itineraries across the Himalayas. The application features interactive geographic maps showing elevations, path routes, weather statistics, and dynamic booking forms. The interface is optimized to make exploring high-altitude routes visual, inspiring, and straightforward.
The Challenge
Integrating geographic maps (Mapbox GL JS) into a fast React booking flow caused severe memory leaks. As users switched between categories or opened detail panels, map canvases failed to garbage collect, eventually crashing the browser tab. Additionally, querying mountain weather APIs for multiple checkpoints during route switches added significant network delays.
The Solution
I architected an asynchronous React wrapper around Mapbox GL JS, utilizing React's cleanup hooks to explicitly release WebGL contexts and canvas elements upon component unmounting. I built a local caching and state synchronization middleware using Redux, caching route details and weather coordinates. This eliminated redundant API requests and ensured seamless route switches without loading delays.
Technologies Used
