Overview
Real Estate Agency is a full-stack real estate platform I designed and developed to demonstrate how a modern headless CMS can power a high-end property showcase website. The project addresses a concrete problem: real estate agencies need to update their listings, manage their team, and control homepage content autonomously, without depending on a developer for every change. I built an editorial backend on Sanity.io with custom schemas for properties, agents, offices, and homepage sections, plus a Sanity Studio deployed on dedicated Sanity hosting that lets the agency operate with complete independence.
The frontend is built with React 19 and Vite, Tailwind CSS v4, and React Router v7 for client-side routing. The most technically significant element is the homepage: a scroll-driven sequence built with GSAP and ScrollTrigger that includes a property collage that expands fullscreen on scroll, category cards that stack in sequence, an animated counters section, and custom page transitions with an animated fog effect. Every animation creates a narrative flow that guides the visitor through the agency's portfolio without perceivable interruption.
The property listings feature full-text search, multiple filters (contract type, property type, price range), sorting, and fully custom dropdown components built from scratch without native select elements. Each property page includes a navigable fullscreen gallery, detailed technical specifications, and the assigned agent's contact information, all fed dynamically via GROQ queries from Sanity. GROQ lets me retrieve exactly the required fields without overfetching, keeping CMS queries precise and performant.
The editorial panel gives the agency full control: which properties to feature on the homepage, the order of categories, which to highlight in the carousel, all without touching code. Real Estate Agency is a concrete example of a JAMstack architecture where frontend and content management are cleanly decoupled.
Real Estate Agency achieves a Lighthouse Performance score of 94/100 on desktop and 71/100 on mobile, validated by Google PageSpeed Insights in production. On desktop: First Contentful Paint 0.7s, Largest Contentful Paint 1.2s, Total Blocking Time 0ms, Cumulative Layout Shift 0.104. On mobile: FCP 2.9s, LCP 6.0s, TBT 0ms, CLS 0.09. The higher mobile LCP is expected for a headless CMS-driven site: property images are served from Sanity CDN via remote URLs, removing the possibility of the static precaching that a Vite bundle enables. TBT at 0ms on both devices confirms a fully unblocked main thread.
Desktop
MobileFAQ
- What is Real Estate Agency?
- It is a full-stack real estate platform with a React frontend and Sanity headless CMS backend, featuring a public website with search and filters, detailed property pages, and an editorial administration panel for the agency.
- How does the administration panel work?
- The agency manages properties, agents, offices, and editorial content through Sanity Studio, a visual interface deployed on dedicated hosting. They can choose which listings to feature on the homepage, the order of categories, and which to highlight in the carousel, without ever touching code.
- What technologies were used?
- Frontend: React 19, Vite, Tailwind CSS v4, React Router v7, GSAP with ScrollTrigger, and Portable Text for rich content rendering. Backend: Sanity.io as the headless CMS with custom schemas and GROQ queries for data fetching. Deployment: Vercel for the frontend, Sanity hosting for the Studio.
- How are the scroll-driven animations built?
- With GSAP and ScrollTrigger: the homepage collage uses pin and scrub to expand fullscreen on scroll, cards stack with sequential animations, counters animate on viewport entry, and page transitions use a custom fog effect. All animations respect the prefers-reduced-motion preference.
- What is GROQ and why was it used?
- GROQ (Graph-Relational Object Queries) is Sanity's query language. It lets you write precise queries that fetch exactly the required fields without overfetching, simplifying data management compared to classic REST and natively integrating the custom content types defined in Sanity schemas.