Collab Realty

Real estate agencies face a uniquely complex digital challenge: they must deliver a polished, brand-first experience while simultaneously surfacing accurate, live property data from external listing systems - all across a wide range of user intents. Collab Realty, a bold and people-first agency based in Tauranga, New Zealand, needed a website that could serve buyers searching for properties, sellers evaluating agents, landlords exploring rental management, and tenants browsing available rentals - without compromising on speed, clarity, or brand quality.

The core challenges were significant from the outset. Property listing data had to be fetched in real time from an external API, keeping prices, availability, statuses, and details accurate without degrading the user experience or page performance. The site required a premium, immersive map-based search powered by Mapbox GL JS, complete with custom markers, filter panels, and carousel-style property popups - alongside a traditional grid view with full pagination and filtering by suburb, region, price, bedrooms, and property type. At the same time, every piece of content across all pages needed to be editable by non-technical staff through a headless CMS, eliminating developer dependency for day-to-day marketing updates.

Performance added a further layer of complexity. The home page needed to simultaneously render a full-screen hero video, GSAP-powered scroll animations, live testimonials fetched from the RateMyAgent API, an interactive property map, and a dynamically loaded gallery section - while still meet the bar expected of a premium real estate brand. Lenis smooth scroll, ScrollTrigger animations, and progressive section loading had to be engineered carefully to avoid jank, layout shifts, or blocking the main thread. Delivering all of this as a cohesive, premium digital product was the core challenge the team set out to solve.

The solution was built as a modern Next.js 16 platform using the App Router, architected around a clean separation between server-rendered data fetching and client-side interactivity. Three primary data sources were integrated: Sanity CMS for all editorial content, an external property API for live listings and rentals, and the RateMyAgent API for verified client testimonials - each fetched at the right layer and revalidated on the right cadence.

Content architecture was centralised in Sanity using a single page document type distinguished by a template field, allowing every page - home, about, team, listings, rentals, contact, and more - to be managed through a unified schema. This gave the Collab Realty team full editorial control over every section of every page, from hero images and statistics to agent bios, CTA copy, and area descriptions. A global settings document managed the navigation links, footer content, logo assets, and social media accounts, ensuring brand-wide consistency without any hardcoded values in the codebase.

For live property data, a resilient API integration layer was built with Next.js fetch and 60-second revalidation, supporting rich filtering by status, suburb, region, price range, and bedroom count. The listings experience featured a dual-view architecture: a default map view built on Mapbox GL JS with custom pin markers, filter panels, and Airbnb-style popup cards for each property; and a paginated grid view with skeleton loading states and smooth transitions between views. Contextual layout rules ensured the Navbar and Footer were intelligently hidden in full-screen map mode, giving users a distraction-free browsing experience.

Performance was engineered at every level of the home page. Seven major sections were loaded progressively using a loadIndex timer pattern, staggering mounts at 100ms intervals to prevent main thread saturation. Lenis smooth scroll was conditionally applied - enabled on editorial pages for a premium feel, and disabled on map-heavy listing pages where native scroll behaviour was required. GSAP ScrollTrigger animations were managed with a global ResizeObserver to maintain accurate trigger positions as dynamically loaded content changed the page height.

The team experience was built around a location-based data model in Sanity, separating operations staff and sales agents by office location. Individual agent profile pages featured GSAP-animated photo galleries, YouTube short previews, integrated RateMyAgent review widgets, and dedicated contact forms - all driven by Sanity content, requiring no code changes to update. Across all pages, JSON-LD structured data, dynamic sitemaps, and Sanity-driven SEO metadata ensured strong discoverability from day one.

Before writing a single line of code, we spent time understanding what Collab Realty truly needed - not just a website, but a digital presence that could match the ambition and personality of an agency doing things differently in the New Zealand property market. We mapped the experience from every angle: buyers who needed to find and filter properties quickly, sellers who wanted to understand and trust the team behind the brand, and landlords or tenants navigating the rental side. These conversations shaped every decision that followed.

Our design team established the visual language early - warm off-white backgrounds, a clean editorial typographic system using PP Neue Montreal, and a layout philosophy that let the properties and people speak for themselves. Once the design direction was locked in, we designed the CMS schema in Sanity to mirror it exactly, ensuring the content team could update any section of any page without touching code. Navigation, logos, socials, CTAs, team bios, and page content were all built to be fully editable from day one.

Engineering began with the foundations: the dual-view listing experience was one of the most technically complex features on the platform. Building a Mapbox GL JS map with custom markers, filter panels, Airbnb-style popup carousels, and seamless switching between map and grid views required careful state management and layout engineering. We introduced intelligent Navbar and Footer visibility rules so the interface adapted naturally between browsing modes, giving users the full-screen focus they needed when exploring the map.

With the core listing experience stable, we turned to performance and polish. The home page progressive loading system was designed to mount seven major sections in a controlled sequence, preventing any single section from blocking the render of others. Lenis smooth scroll, GSAP scroll animations, and RateMyAgent testimonials were woven into the experience thoughtfully, always with an eye on how they performed on real devices. Each agent profile page was built as a rich, self-contained story - gallery, YouTube shorts, reviews, and a contact form - all managed through Sanity without developer involvement.

Through rounds of QA, cross-device testing, and content refinement, the platform was polished into something that felt genuinely premium. Not flashy for the sake of it, but considered, calm, and built to represent a brand that takes real estate seriously.

Collab Realty now has a digital platform that genuinely reflects the quality and professionalism of the agency behind it. What was previously a fragmented presence - static pages, outdated listings, no way to surface live data or manage content independently - has been replaced by a fully integrated, real-time platform that works as hard as the team it represents.

Buyers and sellers interact with live property data the moment they land on the site. The map experience makes it effortless to explore available properties across the Bay of Plenty and surrounding regions, filtering by suburb, price, bedrooms, and type without ever leaving the page. Switching between map and grid view feels instant and natural, meeting users wherever their browsing style takes them. The result is a search experience that competes with dedicated property portals, delivered within a brand-first website.

For the Collab Realty content team, independence is one of the most meaningful outcomes of the project. Every piece of content across every page - hero sections, team bios, statistics, area descriptions, testimonials, CTAs, and navigation links - can be updated through Sanity without a developer. New agents can be added, existing profiles enriched with galleries and YouTube shorts, and seasonal campaigns run without waiting on technical resources. The CMS was built to match how a real team actually operates.

The performance architecture means the site loads fast and feels smooth, even with live API data, Mapbox maps, GSAP animations, and RateMyAgent reviews all running simultaneously. Organic discoverability was baked in from the start through structured data, dynamic sitemaps, and Sanity-driven SEO metadata. Collab Realty doesn't just look premium - it performs like it.

Collab Realty is a strong example of how thoughtful engineering and editorial design can come together to serve a business that genuinely cares about its brand. The platform doesn't try to be a generic real estate portal - it is designed from the ground up to feel like Collab Realty: warm, considered, and built around people.

What makes it stand out technically is the dual-view listing architecture. Switching seamlessly between a full-screen Mapbox map and a paginated grid view - with shared filter state, contextual layout adjustments, and intelligent Navbar and Footer visibility - is a genuinely difficult engineering problem, solved in a way that feels completely invisible to the user. The map is not an embed; it is a core part of the experience, with custom markers, carousel popups, and filter panels purpose-built for the platform.

The CMS architecture is another area where the project goes beyond the standard. Rather than managing each page in a separate document type, every page across the site is managed through a single Sanity schema with a template field. This makes the content model consistent, predictable, and easy to extend - and it means the Collab Realty team can update anything on any page without confusion or developer dependency.

Perhaps most importantly, the performance engineering tells a story about care. Progressive section loading, conditional Lenis smooth scroll, GSAP ScrollTrigger management with ResizeObserver, and Sanity revalidation tags were all implemented not because they are impressive features, but because they make the experience faster, smoother, and more reliable for every user who visits the site.

This is what a well-built real estate platform looks like: live data, editorial control, premium design, and performance that holds up in the real world.