Location-based discovery looks simple in a Figma mockup: drop some pins on a map, draw a line, and show how many kilometers away the nearest professional is. In production, geolocation quickly collides with user privacy, spatial database edge cases, and prototype mock data that hides broken queries.
Here is how I built the interactive Mapbox discovery engine in React and Vite—and how I solved the privacy and spatial query traps we hit along the way.
The 'Missing Artisan Address' Privacy Architecture
During development, we noticed an apparent discrepancy: an artisan's authenticated private endpoint (/me/) returned their full residential street address and raw coordinates, whereas the public discovery endpoint (/profiles/artisans/) omitted them.
That omission wasn't a bug—it was essential privacy architecture. Exposing the exact home address of independent tradespeople to anonymous public browsers is a serious safety risk. Instead of fighting the privacy boundary, I adapted the discovery UI and Haversine proximity engine to work with relative distance and approximate coverage zones ('Covers 15 km radius'), giving customers accurate arrival estimates without doxxing the artisan's home.
Debugging the 'Geo-Search Zero-Result Trap'
At one point, searching for a valid Lagos address in the discovery view returned 0 results—even though we knew verified artisans existed in the database. Rather than guessing, I traced the request from the React filter state down to the spatial query and uncovered three overlapping conditions firing at once:
- 1. Spatial Database Geometry: The backend geo-query strictly excluded records where latitude or longitude was NULL—meaning any test profile created without geocoded coordinates was invisible to spatial search.
- 2. Active Role Self-Suppression: The frontend intentionally filtered out isOwnProfile so an artisan logged into a dual account couldn't book themselves while testing.
- 3. The 'Available Now' Filter: The default discovery state required online_status: 'online', silently hiding artisans who were verified but currently toggled offline.
Ripping Out Prototype Mock Data & Overseas Distance Sanity
Early in the repo's life, DiscoverMapbox.tsx relied on a synthetic fallback generator (createDemoArtisans, complete with 'dummy-plumber' entries) whenever the API returned empty. While convenient for early UI styling, fallback generators are dangerous in staging because they mask whether live database coordinates and map clusters are actually working.
I stripped out all synthetic generators and demo toggles so the Mapbox canvas, coverage circles, and route preview lines strictly reflect 100% live, verified backend records. Finally, I added a proximity sanity threshold (≤ 150 km) to the Haversine distance badges so QA testers or diaspora users browsing from outside Nigeria don't see absurd badges like '13,969.3 km away' breaking the card layout.