RealEstateListingPlatform

The Challenge

UrbanNest Realty is a boutique real estate agency in New York City that was losing ground to larger competitors with flashier websites. Their existing site was a WordPress theme that loaded slowly, had no map integration, and required manual updates every time a listing changed. Property photos were unoptimized, pages took over two seconds to load on mobile, and they had almost no organic search visibility. UrbanNest needed a platform that could showcase their curated listings with the sophistication their brand demanded while actually driving leads.

The Approach

I built the platform on Next.js with incremental static regeneration so that listing pages were pre-rendered and served from the edge, but automatically refreshed when data changed in the CMS. Prisma connected to a PostgreSQL database that synced nightly with UrbanNest's MLS feed, ensuring listings were always current without manual intervention. All property images were processed through Cloudinary on upload, generating responsive variants and WebP formats automatically.

The centrepiece of the site was an interactive Mapbox-powered search experience. Users could draw custom boundaries on the map, filter by price, bedrooms, and amenities, and see results update in real time. I implemented marker clustering to keep the map performant even when displaying hundreds of listings across Manhattan and Brooklyn.

// Mapbox integration with dynamic marker clustering
import mapboxgl from "mapbox-gl";
import Supercluster from "supercluster";
 
interface ListingFeature {
  type: "Feature";
  geometry: { type: "Point"; coordinates: [number, number] };
  properties: { id: string; price: number; address: string };
}
 
export function initClusteredMap(
  container: HTMLElement,
  listings: ListingFeature[]
) {
  const map = new mapboxgl.Map({
    container,
    style: "mapbox://styles/mapbox/light-v11",
    center: [-73.985, 40.748],
    zoom: 12,
  });
 
  const cluster = new Supercluster({ radius: 60, maxZoom: 16 });
  cluster.load(listings);
 
  function updateMarkers() {
    const bounds = map.getBounds();
    const zoom = Math.floor(map.getZoom());
    const clusters = cluster.getClusters(
      [bounds.getWest(), bounds.getSouth(), bounds.getEast(), bounds.getNorth()],
      zoom
    );
 
    document.querySelectorAll(".marker").forEach((el) => el.remove());
 
    clusters.forEach((point) => {
      const el = document.createElement("div");
      el.className = point.properties.cluster
        ? "marker marker-cluster"
        : "marker marker-single";
      el.textContent = point.properties.point_count?.toString() ?? "";
 
      new mapboxgl.Marker(el)
        .setLngLat(point.geometry.coordinates as [number, number])
        .addTo(map);
    });
  }
 
  map.on("moveend", updateMarkers);
  map.on("load", updateMarkers);
  return map;
}

Search and Performance

Beyond the map, I built an advanced filtering system that combined URL-based state with debounced API calls. Every filter combination produced a unique, shareable URL, which meant that specific search results could be bookmarked or shared between partners looking at apartments together. This also made each filtered view crawlable by search engines, which was a major factor in the organic traffic gains.

Virtual tour embeds from Matterport were lazy-loaded below the fold on listing detail pages to avoid blocking the initial render. I also implemented a neighbourhood guide section with ISR-powered pages for each NYC neighbourhood, seeded with local data like school ratings, transit access, and walkability scores. These pages became organic search magnets, ranking for long-tail queries like "best apartments near Prospect Park" within weeks.

Results and Impact

The new platform launched ten weeks after kickoff, on schedule and within budget. Page load times dropped from 2.3 seconds to 0.9 seconds on average, and the interactive map experience increased average time-on-site by 65 percent. Most importantly, UrbanNest saw a threefold increase in leads from organic search within the first quarter, driven by the neighbourhood guide pages and the crawlable filter URLs.

The agency's agents reported that clients frequently mentioned the website as the reason they reached out, a sharp contrast to the old site which rarely generated inbound interest. UrbanNest has since expanded the platform with a mortgage calculator and a saved-search notification system, both of which were straightforward to add thanks to the modular architecture.