Back to PortfolioReal Estate CRM

EstateFlow

Purpose-built CRM for real estate agents with AI-powered listing generation

Live Demo GitHub
3
views: Grid / List / Map
7
deal pipeline stages
AI
buyer-property matching
EstateFlow main screenshot
EstateFlow screenshot 2
EstateFlow screenshot 3
EstateFlow screenshot 4
The Problem

Why this needed to be built

Generic CRMs (Salesforce, HubSpot) speak corporate sales language. Real estate agents need a tool that understands properties, showings, deals — not opportunities and contacts. Agents were managing properties in spreadsheets, deals in Trello, showings in Google Calendar, and photos in Drive — four separate systems that never sync.
The Solution

How it works

01Property database with multi-photo upload, Leaflet map view, grid, and list views
02AI listing generator: paste bullet points → get a full professional property description
03Drag-and-drop deal pipeline with 7 configurable stages and deal value tracking
04Showings calendar with conflict detection and buyer confirmation flow
05AI buyer-property matching: describe what a buyer needs → ranked property list
06Row Level Security in Supabase — each agent sees only their own properties
Tech Stack

Built with

Next.js 15TypeScriptSupabaseOpenAILeaflet.js@dnd-kitSupabase StorageTailwind CSSFramer Motion
Architecture

System design

React Frontend (Next.js 15) ├── Property Manager │ ├── Grid View ──► Supabase Storage (photos) │ ├── List View │ └── Map View ──► Leaflet.js + OpenStreetMap ├── Deal Pipeline │ ├── @dnd-kit drag-drop │ └── 7 stages × deal cards ├── AI Generator │ └── OpenAI → listing descriptions ├── Calendar │ └── Showings scheduling └── Buyer Matcher └── Embedding-based property matching Backend (Supabase) ├── PostgreSQL (properties, deals, buyers) ├── Row Level Security (agent isolation) ├── Storage Bucket (property photos) └── Realtime (live pipeline updates)
Key Decisions & Lessons

What I learned

UX for non-tech users: simplicity over features

Real estate agents are busy and not developers. Every feature had to pass a 3-tap test: can a user accomplish this in 3 taps or fewer? The drag-drop pipeline was refined 4 times before passing. Removing the 'advanced filters' modal and replacing it with a persistent sidebar filter doubled usability in informal testing.

Why dark mode matters in real estate

Agents often show properties at night or in dim environments (showings at dusk, evening calls). Dark mode with proper contrast ratios isn't just aesthetics — it's the difference between comfortable use and eye strain on a phone during a 9pm showing walkthrough.

Leaflet + Next.js 15 SSR: the hydration trap

Leaflet requires browser APIs that don't exist in Node.js. Dynamic imports with `ssr: false` solved this, but the map still flashed on initial load. The fix was a CSS skeleton that matched the map dimensions exactly — users see a placeholder that's the right size, then the map fades in seamlessly.

What I'd do differently

I'd implement optimistic UI updates for the drag-drop pipeline from day one. The current 300ms server round-trip before UI reflects the move creates a perceptible stutter on slower connections. React Query mutations with rollback would eliminate this entirely.

Want me to build something similar for you?

Hire me for your project →