📌 Project Overview
The Real Estate template is a full-featured property listing portal built for agencies, brokers, and individual agents who need a professional, search-optimized platform to showcase properties and capture qualified leads. With Algolia-powered instant search, an interactive Mapbox split-view layout, Swiper.js property galleries, and Cloudinary-optimized images, this template delivers the browsing experience that modern property buyers expect.
Designed for both agents managing their own listings and larger agencies managing multiple properties and agents, the platform includes lead capture with direct agent email notifications, a favorites system for authenticated users, and an Algolia sync pipeline to keep search results always up to date.
🧩 Core Features
1. Algolia-Powered Property Search
The Search/Listings page uses Algolia InstantSearch with facets for price range, number of bedrooms, property type, and location radius — delivering sub-100ms search results as users type.
2. Split-View Map + Listing Layout
A side-by-side layout places property cards on the left and a Mapbox interactive map on the right. Clicking a map pin highlights the corresponding card, and hovering a card highlights its map pin — creating an intuitive, map-native browsing experience.
3. Swiper.js Property Gallery
Each Property Detail page features a full-screen Swiper.js image gallery with thumbnails, a specs grid showing bedrooms, bathrooms, and square footage, and a lead contact form that emails the listing agent via Resend.
4. Agent Profiles
Each agent has a dedicated profile page showing their bio, years of experience, total listings, and all their active properties — helping buyers connect with the right person for their needs.
5. Favorites with Optimistic UI
Authenticated users can save and unsave properties to a personal favorites list. React Query optimistic updates make the interaction feel instant even before Supabase confirms the write.
6. Algolia Sync Pipeline
A Supabase Edge Function listens for insert, update, and delete events on the listings table and automatically pushes changes to the Algolia index — ensuring search results always reflect current inventory.
🧰 Tech Stack
| Feature Area | Technology | Purpose |
|---|---|---|
| Frontend Framework | Next.js 14 (App Router) + TypeScript | Dynamic listing pages with SSR |
| Styling | Tailwind CSS | Property card grid layouts |
| Maps | Mapbox GL JS | Interactive property map with clustering |
| Search | Algolia InstantSearch | Property search with faceted filters |
| Gallery | Swiper.js | Property image slider |
| Forms | React Hook Form + Zod | Lead capture & enquiry forms |
| Images | Cloudinary + next/image | Property image optimization |
| Database | Supabase (PostgreSQL) | Listings, agents, enquiries, favorites |
| Auth | Supabase Auth | Agent & admin logins |
| Search Sync | Algolia + Supabase Edge Function | Real-time listing index sync |
| Resend | Lead notification emails to agents | |
| Hosting | Vercel | Hosting & deployment |
🗂️ Website Structure
| Page / Component | Functionality |
|---|---|
| Home | Featured properties, search bar, location highlights, CTA |
| Search / Listings | Algolia faceted search with split Mapbox/card view |
| Property Detail [slug] | Swiper gallery, specs grid, lead form, agent card |
| Agent Profile [slug] | Bio, contact info, listing count, and active properties |
| Favorites | User-saved properties with optimistic add/remove |
| Contact Agent | Pre-filled enquiry form emailed to the agent via Resend |
🔒 Key Technical Highlights
- Algolia geo-search configuration with location radius filtering
- Mapbox clustering support for portals with 100+ listings
- Cloudinary responsive image loader with auto srcset generation
- Algolia sync Edge Function for insert, update, and delete events
- Supabase schema: properties, property_images, agents, enquiries, favorites, users