David Lata Real Estate

Overview

David Lata is a licensed real estate salesperson based in Manhattan, NY. He needed a professional web presence that he could manage himself — updating property listings, rotating testimonials, and tweaking his marketing copy — without touching code or filing a support ticket every time a new listing dropped.

The result is a fully headless, CMS-driven website built on Next.js and Payload CMS, deployed on Vercel with PostgreSQL as the database and Vercel Blob for media storage.

The Challenge

Most real estate agents end up with one of two things: a generic template from their brokerage, or a custom site they can never update on their own. Neither is great.

David wanted something that felt premium and on-brand — dark navy, gold accents, a Manhattan luxury feel — but that he could operate as an admin. The key requirements:

Property listings he could add, update, and mark as Sold without a developer
Testimonials he could rotate on his homepage
Hero copy and stats he could edit without a redeploy
Contact form submissions captured and stored in one place
SEO-ready out of the box — structured data, OpenGraph, sitemaps

Solution & Architecture

Payload CMS as the Content Backbone

Rather than reaching for WordPress or Webflow, I chose Payload CMS 3 — a code-first, TypeScript-native headless CMS that lives inside the same Next.js app. This meant David's admin panel is part of the same deployment: one URL, one Vercel project, zero third-party SaaS fees.

The schema covers six collections and three globals:

Collections

Properties — listings with status (for-sale, for-rent, sold, off-market), beds/baths/sqft, rich text description, image gallery, and a featured flag for homepage pinning
Testimonials — client reviews pulled into the homepage carousel
Clients — relationship data tied to listings
Media — all uploads, routed to Vercel Blob
ContactSubmissions — form submissions stored directly in Postgres
Users — admin access control

Globals

SiteSettings — agent name, phone, email, social links, profile image, footer copy, SEO defaults, and JSON-LD structured data fields
HomePageContent — hero eyebrow, headline (with split highlight), subline, CTA labels and URLs, stat cards, section headings, and value propositions — all editable
AboutPageContent — the about page bio sections, pull quotes, and timeline — fully CMS-driven

ISR + On-Demand Revalidation

Every page uses export const revalidate = 60, so Next.js serves a cached page and quietly rebuilds it in the background every 60 seconds. For instant updates — say David marks a property as Sold — every Payload afterChange hook fires a /api/revalidate call that purges the cache immediately. Listings update within seconds of a save, not on the next deploy.

Framer Motion & Animated Hero

The hero section features a custom FlightPath SVG background — an animated path that traces across the section, evoking New York's aerial grid. All entrance animations (headline, stats, CTAs) are orchestrated with Framer Motion's staggerContainer and fadeInUp variants, giving the page a polished, intentional feel without a heavy animation library footprint.

The headline itself is split into three parts (headlineBefore, headlineHighlight, headlineAfter) so David can change just the highlighted word from the CMS without breaking the gold-accent styling.

Media & Storage

All image uploads go through Vercel Blob via the official @payloadcms/storage-vercel-blob plugin. Sharp handles server-side resizing and optimization. The Media collection is the single source of truth — no S3 bucket to configure, no CDN to wire up separately.

SEO & Structured Data

JSON-LD RealEstateAgent schema injected via a server component, populated from the SiteSettings structured data group (business URL, E.164 phone, address, areas served)
OpenGraph tags on every page, with per-page overrides via generateMetadata
Canonical URLs, robots.ts, and sitemap.ts auto-generated from Next.js app router conventions
Properties page and individual listing pages each carry their own meta.title and meta.description fields in the CMS for fine-grained SEO control

Admin Live Preview

The Payload admin panel ships with live preview enabled for the homepage and about page globals. David can toggle between Mobile (375px), Tablet (768px), and Desktop (1440px) while editing copy — seeing the rendered page update in an iframe beside the fields. This dramatically reduces the guess-work of content editing.

Key Pages

Homepage

Server-rendered, data fetched in parallel (Promise.all) from three Payload queries — homepage global, site settings, and homepage testimonials. The client component (HomePageClient) receives serialized props, keeping all data-fetching on the server and the interactive animations on the client.

Sections:

Hero — headline with gold highlight, two CTAs, animated stat bar
Featured Listings — pulls properties where featured: true, ordered by the order field David sets in the admin
Why David — editable value propositions
About Snapshot — profile image + bio excerpt with CTA to full about page
Testimonials — CMS-managed client reviews

Properties Page

Full listing grid with filtering by status. Each property links to a /properties/[slug] detail page. Slugs are auto-generated from the listing title on save (via a Payload beforeChange hook) and are unique-constrained in the DB — no slug collision surprises.

Contact Page

Hero copy, subtitle, and form labels pulled from the SiteSettings.contactPage group. Form submissions write directly to the ContactSubmissions Payload collection — David sees every inquiry in his admin panel with timestamps.

Tech Stack

Layer	Choice
Framework	Next.js 15 (App Router)
CMS	Payload CMS 3
Database	PostgreSQL via Neon
Media	Vercel Blob
Styling	Tailwind CSS v4
Animations	Framer Motion
Language	TypeScript
Hosting	Vercel
Image processing	Sharp

Outcome

David has a site that looks like it cost five times what it did, and that he can operate entirely on his own. New listing goes live? He logs into /admin, fills in the fields, uploads photos, hits Save — and the site updates in under a minute without a single Slack message or code push.

The CMS-driven architecture also means the site can grow with him: adding an open houses calendar, a market insights blog, or a client portal are all additive changes, not rebuilds.