MJ Properties sells Sobha Realty developments to buyers who expect video walkthroughs, director credibility, and fast mobile pages, not a PDF brochure. A six-week deadline ruled out a heavyweight CMS integration and a media pipeline that proxies large tour files through Vercel.
We split the problem. Supabase Postgres holds listing metadata, slugs, SEO fields, and lead form submissions. AWS S3 holds video tours, gallery sets, and team photos behind CloudFront. Next.js App Router ties them together with server-rendered property pages and server actions for lead capture.
Why Supabase for content
- Postgres with Row Level Security: public read on published listings, staff write via service role in admin tools
- Typed client: Next.js server components fetch listing rows without a custom CMS API
- Migrations in git: schema changes deploy with the app, not through a plugin marketplace
- Lead forms write directly to a submissions table with no third-party form SaaS required for v1
S3 and CloudFront for property media
Video tours cannot live in the Next.js bundle or Postgres blobs. We upload to a private S3 bucket organized by asset type. CloudFront serves public URLs with long cache TTLs. Listing pages store CDN URLs in Supabase, so updating a tour means uploading to S3 and changing one row, not redeploying.
s3://mj-properties-media/
tours/ walkthrough MP4s (versioned filenames)
gallery/ per-project photo sets
team/ director and advisor portraits
og/ social share images per listing- Bucket private: no direct S3 URLs exposed
- CloudFront OAC: only the CDN reads from origin
- Immutable cache headers on video so edge nodes serve repeat views without hitting S3
- Presigned PUT URLs for admin uploads so the app never proxies file bytes
Next.js page pattern
Each property slug is a server component. Metadata, structured data, and hero content render from Supabase on the server. Video elements point at CloudFront URLs, so the HTML response stays small regardless of tour size.
export async function generateMetadata({ params }: Props) {
const listing = await getListing(params.slug);
return {
title: `${listing.title} | MJ Properties`,
description: listing.summary,
openGraph: { images: [listing.ogCdnUrl] },
};
}
// Page body: stream video from CDN, metadata from Supabase
<video src={listing.tourCdnUrl} controls preload="none" poster={listing.posterCdnUrl} />Lead capture without exposed secrets
Investment inquiry forms post through Next.js Server Actions. Validation runs server-side. Rows insert into Supabase via the service role and notification email fires from the server. The browser never holds database keys, which is appropriate for a client site an agency hands off.
AWS stack summary
- Vercel: Next.js hosting and edge SSR for listing pages
- Supabase: Postgres content store and auth for internal editors
- Amazon S3: private media origin
- Amazon CloudFront: global CDN for tours and gallery images
- Amazon Route 53 and ACM: custom domain with HTTPS on the distribution
Outcome
- Six-week delivery with featured Sobha projects, tours, director sections, and lead forms
- Mobile-first LCP: HTML and text from the server, heavy bytes from CloudFront
- Editor workflow: publish and unpublish listings in Supabase without a redeploy
- Scalable media: new tour uploads do not touch the Next.js deployment pipeline
MJ Properties is the pattern we repeat for brochure-plus-listing sites under tight timelines: Supabase for structured content, S3 for bytes, Next.js for SEO and UX. Each layer does one job without slowing the others down.
