Case Study — 2026

Trabonato

A video-first luxury property platform where every listing breathes through cinematic video tours, built on a CMS-driven architecture that scales effortlessly.

Role
Full-Stack Dev
Type
Web Application
Timeline
1 week
Client
Trabonato
Trabonato Homepage — Hero & Listing Grid
Overview

The brief

A platform that lets travellers experience properties through video before they commit to a booking.

Trabonato came with a clear vision: the standard property listing is broken. Photos lie. Descriptions exaggerate. Travellers arrive expecting one thing and find another.

The solution was radical transparency: every listing would lead with a full cinematic video tour, giving guests a genuine sense of the space, its light, atmosphere, and character. My job was to build the platform that made this vision a scalable reality.

Next.js 15Directus CMSTypeScriptVimeo APINodemailerCSS ModulesGoogle MapsreCAPTCHA v3
01 — 02

Problem & Goals

The Problem

Content that couldn't keep up

  • Every content update required a developer, leaving the client with no autonomy.
  • Listings needed flexible templates per category.
  • Video-first meant performance was non-negotiable.
  • No structured way to manage seasonal rates or partners.
  • Booking requests were manual, untracked, and error-prone.
The Goals

A system that scales gracefully

  • CMS-driven architecture where the client owns the content entirely.
  • Category pages that feel distinct but share a coherent system.
  • Automated booking pipeline with email notifications.
  • Custom Vimeo controls with fully branded video and no ugly defaults.
  • SEO-complete from day one: metadata, sitemap, Open Graph.
03

The approach

01

Architecture First

Designed the Directus schema before writing a single line of frontend code. Collections for listings, categories, seasonal rates, blog posts, static pages, and site settings — all relational, all typed. The CMS became the single source of truth.

02

Component System

Built reusable components for every listing interaction: the video card with custom Vimeo controls, booking form with live price calculation, multi-filter search, and a hero that adapts per context. Every component typed, every edge case handled.

03

Performance & SEO

ISR with 1-hour revalidation keeps content fresh without sacrificing speed. Vimeo thumbnails pre-fetched server-side. Poster images eliminate black flash on hero video. Dynamic sitemap, robots.txt, and full Open Graph baked in from the start.

04

Key screens

Homepage — Hero & Listing Grid
Homepage — Hero & Listing Grid
Listing Detail — Custom Video Controls & Tabs
Listing Detail — Custom Video Controls & Tabs
05

Tech stack

▲
Next.js 15
App Router, ISR, Server Components, API Routes
⬡
Directus CMS
Headless CMS, REST API, file management, SEO interface
◈
TypeScript
End-to-end type safety across all components and API calls
▶
Vimeo API
Custom player SDK, server-side thumbnail fetch, branded controls
✉
Nodemailer
Automated booking & contact emails with HTML templates
◉
CSS Modules
Scoped styles, custom design system with CSS variables
⊕
Google Maps
Embed API for property location on listing detail pages
⊘
reCAPTCHA v3
Invisible bot protection across all forms
06

What was delivered

9
Fully built pages
Homepage to 404
100%
CMS-driven content
Zero dev needed for updates
3
Automated email flows
Booking, contact, partner
0
Vimeo default controls
Fully custom-branded player
~1hr
Content revalidation
ISR keeps pages fresh
GA4
Analytics from day one
Sitemap submitted to GSC

"The hardest constraint was performance. A video-first platform has to feel instant. Every architectural decision was made in service of that."

Chris Babis, Developer
07

What I learned

01
Schema design is the product
Getting the Directus collections right before touching the frontend saved weeks. The relationships between listings, categories, seasonal rates, and partners determined what was possible: designing them carefully gave the client genuine autonomy.
02
Custom controls are worth every hour
Replacing Vimeo's default controls with a custom player — draggable progress handle, mute toggle, time display, fullscreen — transformed the listing experience. It's the kind of detail that separates a polished product from a template.
03
ISR is the sweet spot for content sites
Full SSG breaks the moment a client updates content. Full SSR is expensive. ISR with a 1-hour window gives the performance of static with the freshness of dynamic, which is exactly what a CMS-driven platform needs.
04
SEO is architecture, not afterthought
Building the metadata system, dynamic sitemap, Open Graph, and robots.txt from the start meant none of it needed retrofitting. The Directus SEO interface gave the client control over every page's metadata without a developer.