Real-Estate Search & Listings Platform
Map-linked property search with deep-linkable filters and fast listing pages.
Role
React / Next.js Developer
Engagement
Full-time at Latitude Technolabs
Client
Latitude Technolabs — proptech client
Period
2021 — 2022
The problem
A property marketplace lives on search: users refine constantly, expect the map and list to agree, and expect listing pages to load instantly from search results and from Google.
My responsibility
Built the search experience and listing pages, including filter state architecture, map/list synchronisation and the image pipeline.
Surfaces shipped
Search experience
Map-and-list split view with filter facets, sorting and pagination.
Listing pages
Individually indexed property pages with galleries, specs and agent contact.
Architecture
How it was structured, and the reasoning behind each boundary.
- 01
URL as the source of truth
Filters, sort, page and viewport are all in the query string. Back button, refresh and shared links behave correctly by construction.
- 02
ISR listing pages
Property pages are statically generated and revalidated on update — fast for users, crawlable for search engines, cheap to serve.
- 03
Map/list coordination
One selection state drives both views, with viewport-based fetching debounced so panning doesn't spam the API.
Key challenges
- 01
Image-heavy listing grids
Property photography is the product. Responsive srcsets, correct aspect-ratio reservation and lazy loading below the fold kept CLS at zero while grids stayed rich.
- 02
Search responsiveness
Every facet change triggers a fetch; requests were debounced, in-flight ones cancelled, and results transitioned without layout jump.
Implementation
- 01
Reserved space everywhere
Cards, map container and gallery all reserve their dimensions so nothing shifts as data arrives.
- 02
Progressive gallery
Listing galleries load a small dominant image immediately and upgrade to full resolution on interaction.
Results
- 01Shareable, indexable search URLs that survive refresh and back-navigation.
- 02Listing pages served statically with strong Core Web Vitals and clean metadata.
- 03Map and list views stay in sync across filter changes with no layout shift.
Technologies
- Next.js
- React
- TypeScript
- React Query
- Tailwind CSS
- Mapbox GL
- Strapi
Technical highlights
- Query-string-driven search state with cancellation
- ISR listing pages for crawlability and speed
- Zero-CLS image strategy on photography-led grids
Building something similar? I’d like to hear about it.
Start a conversation