Collab Realty

Real estate agencies must deliver polished branding while surfacing accurate, live property data across diverse user intents, buyers, sellers, landlords, and tenants, without compromising speed or clarity.

Collab Realty operates across two distinct New Zealand regions (Bay of Plenty and Hawke's Bay) and needed a platform that could:

• Surface live sales listings from REX Software and live rental listings from GetPalace, with filtering, pagination, and map-based exploration.
• Present an interactive Mapbox map with custom markers and property detail popups alongside a traditional paginated grid.
• Give non-technical staff full editorial control over every page through a headless CMS.
• Display verified agent reviews and ratings from RateMyAgent on both the homepage and individual agent profile pages.
• Remain fast under simultaneous loads: hero video, GSAP scroll animations, map rendering, and third-party API data.

A two-repository architecture was chosen: a Next.js frontend handling presentation and CMS-driven content, and a Laravel backend acting as a data normalisation and sync layer for all third-party property APIs.

Built on Next.js 16 with App Router, the frontend integrates three independent data sources at both the server and client layers:

• Sanity v4 for all editorial content (page copy, CTAs, team bios, testimonials).
• Laravel backend API for normalised property data (sales via REX, rentals via GetPalace).
• RateMyAgent API for verified agent ratings and testimonials.

Key frontend decisions:

A unified page architecture via the Sanity template field uses a single Sanity page document type to handle all non-listing pages (Home, About, Listings, Rentals, Sold, Contact, Appraisal, Procedure, Team, Team Member, Privacy), with each document carrying a template field that routes it to the correct component tree, eliminating schema duplication. The listings and rentals pages provide a dual-view experience, defaulting to an interactive Mapbox map with a collapsible filter sidebar and offering a toggle to a paginated grid view. Both views share the same URL-synchronised filter state (city, suburb, price range, bedrooms, bathrooms, floor area, land area, garages), making filtered searches fully shareable and browser navigable. Rather than using an embedded iframe, the map is built directly with the Mapbox GL JS SDK, where custom markers render for each property, clicking a marker triggers a flyTo animation and displays a property card carousel, and the sidebar closes automatically on mobile when a marker is activated.

Homepage sections are staggered with 100 ms intervals to prevent main thread saturation during simultaneous API, animation, and media loading. Lenis smooth scrolling is disabled on listing pages in map view, where the page height is fixed to 100dvh, and re-enabled on grid and content pages. Team member pages fetch active listings, sold listings, RateMyAgent reviews, and the RateMyAgent rating badge concurrently at the server level, ensuring no client-side loading states for above-the-fold content. All listing, team member, and editorial pages emit appropriate Schema.org JSON-LD, while a Next.js sitemap.ts generates a dynamic sitemap that includes CMS pages and property slugs. Listing filters and pagination use React Query hooks (useProperties, useSuburbs) so filter changes reflect without full page reloads while maintaining a shared cache. The homepage testimonial section uses Embla Carousel with infinite scroll, loading RateMyAgent review pages on scroll to support large review counts.

Built on Laravel 11 (PHP 8.2), the backend acts as a dedicated data sync and normalisation service. It pulls from three external APIs on a schedule, stores normalised records locally in SQLite, and exposes clean REST endpoints to the Next.js frontend. The REX Software integration authenticates with the REX API and caches the session token to avoid redundant round trips. Listings are pulled in reverse modification order with full detail (images, contract info, internet adverts) and stored locally, while the backend exposes paginated, filterable endpoints by region, suburb, price, bedrooms, bathrooms, floor area, land area, and garages. The GetPalace integration authenticates with the GetPalace API and syncs all available rental properties, with searchable fields normalised to a consistent schema so the frontend filter experience is identical whether a visitor is browsing sales or rentals. The RateMyAgent integration manages the OAuth2 client credentials flow against the RateMyAgent identity server with automatic token refresh on expiry or rejection. Agent reviews are fetched in paginated batches and stored locally, while agent records are bootstrapped from Sanity so the sync always targets the correct profiles without manual configuration.

The project began with stakeholder discovery, mapping the distinct journeys of four user types, buyers, sellers, landlords, and tenants, and identifying where live data, editorial control, and performance would intersect.

Design established a clean editorial visual language using PP Neue Montreal typography and a warm neutral palette (#EFEDE8 base), chosen to present property photography without competition.

On the frontend, the most complex engineering challenge was the dual-view listing system: keeping filter state, URL params, pagination, Mapbox map state, and sidebar visibility all in sync across both views without triggering unnecessary re-renders or causing visible layout shifts when toggling between map and grid.

The backend architecture decision, a separate Laravel service rather than calling REX and GetPalace directly from Next.js API routes, was made to avoid direct third-party credentials exposure in the frontend environment and to allow scheduled syncing independent of traffic. This means the Next.js API routes proxy to the Laravel backend, which in turn returns pre-normalised, database-backed records, reducing external API latency on user-facing requests.

Agent profile pages were built as rich, self-contained stories: server-prefetched listings (active and sold), RateMyAgent star ratings, paginated reviews loaded on scroll via Embla Carousel, a YouTube short section, a photo gallery, and a contact form, all managed entirely through Sanity.

• Live property data (sales and rentals) accessible immediately on page load via server-side prefetch.
• Seamless toggling between interactive map and grid views with shared, URL-preserved filter state.
• Full editorial independence: the content team manages every page, section, and team member profile through Sanity without engineering involvement.
• Scheduled hourly syncing keeps listing data current without frontend-to-third-party API coupling.
• Verified agent ratings surfaced on the homepage testimonial carousel and individual agent profile pages.
• Strong organic discoverability through JSON-LD structured data on listings, agents, and editorial pages.

Dual-repository architecture: Separating the Next.js frontend from the Laravel backend gave each layer a clear responsibility. The backend syncs, normalises, and stores; the frontend fetches, renders, and caches. This also means either layer can be deployed, scaled, or replaced independently.

Dual-view listing system: Presenting listings simultaneously as a full-screen Mapbox map and a filtered grid with a seamless toggle is technically demanding. Mapbox requires explicit resize calls when its container transitions from `display: none`, filter state must survive view switches, and the map's `fitBounds` logic must recalculate per region filter, all handled in a single `ListingsClient` component with URL-first state.

Multi-API agent profile pages: Each team member page coordinates four parallel server-side fetches (active listings, sold listings, RateMyAgent reviews, RateMyAgent profile badge) before rendering, ensuring no above-the-fold loading spinners on the most conversion-critical pages.

Unified Sanity schema: A single page document type with a template discriminator field covers all content pages. This means the CMS interface is consistent and predictable for non-technical editors, regardless of which page type they are editing.