Building Lavvi: The Tech Architecture Behind Our Real-Time Map

When we set out to build Lavvi, we had a very specific engineering challenge: How do you serve thousands of map markers on a mobile web browser instantly, while allowing users to actively review, upvote, and flag them in real-time?

Public utility maps often suffer from two extremes. They are either highly curated static maps that take months to update, or they are crowdsourced apps that become bloated, slow, and impossible to load on a 3G network in a crowded market.

The Tech Stack

We decided early on that performance was a feature. We chose Next.js for our frontend framework. By utilizing Server-Side Rendering (SSR), we ensure that the initial map load is incredibly fast. The user gets the interface immediately, while the specific geographic data points load dynamically based on their viewport.

For the backend, we needed a robust geospatial database. Traditional relational databases struggle with complex coordinate math at scale. This led us to Supabase with the PostGIS extension.

PostGIS and Real-Time Clustering

If you zoom out on a map of Delhi, loading 5,000 individual toilet markers would crash the browser. PostGIS allows us to perform server-side clustering. We wrote a custom Remote Procedure Call (RPC) that calculates the user's exact bounding box (viewport) and only returns the necessary data.

Our `toilets_in_viewport` function doesn't just return coordinates. It joins real-time review data, calculates the average confidence score, and determines if a location meets the strict criteria for our "Saheli Mode." All of this happens in milliseconds within the PostgreSQL database, meaning the client device does almost zero heavy lifting.

The result is a buttery smooth map experience that stays perfectly synchronized with the community's live feedback.