WEB · CMS INFRA

Airfree Geospatial

A marketing site for an Australian geospatial consultancy with a custom Redis-backed CMS that lets non-technical staff edit content live, no code required.

↓ SCROLL

The problem

Airfree Geospatial is a specialised geospatial intelligence consultancy serving Australian government, utilities, and engineering operations from three national offices. Its non-technical staff needed to manage their own marketing site — hero slides, page backgrounds, company details, office addresses, and typography — without editing code or waiting on a developer. The content editing had to live inside the site itself rather than in a separate system.

The approach

The site ships with a custom CMS built into it. A split-screen admin panel at /admin lets staff edit every content field and see the result immediately. Edits save to browser localStorage on every keystroke so the editor stays responsive, then debounce-sync to Upstash Redis 1.5 seconds after typing stops, making content durable and shared across devices. Each save also appends to a Redis sorted set, so the full edit history is preserved and any earlier state can be restored.

System design

Language / runtimeTypeScript (strict), Next.js 15 App Router
Core componentsSplit-screen /admin panel, useCMS hook, Redis client
Data storeUpstash Redis via REST API, browser localStorage
Styling / motionTailwind CSS v4, Framer Motion, Google Fonts
Version historyRedis sorted set, one audit entry per save
DeployVercel

How it works

01

Edit in the admin panel

The /admin route opens a split-screen editor for hero slides, page backgrounds, company details, office addresses, and typography settings.

02

Instant local save

Every change writes to browser localStorage immediately, so the editor stays responsive and nothing is lost between keystrokes.

03

Debounced sync to Redis

1.5 seconds after the last edit, the change syncs to Upstash Redis over its REST API, making content durable and shared across devices.

04

Live device preview

Desktop and mobile mockups in the panel refresh automatically to show how the edit lands on each screen size.

05

Version history

Each save appends an entry to a Redis sorted set, building an audit trail that any previous state can be rolled back to.

What it does

In-site content editing

Staff manage hero slides, backgrounds, company details, office addresses, and typography from one panel, with no code required.

Real-time preview

Desktop and mobile device mockups update as you edit, showing the result across screen sizes before it goes live.

Version history and rollback

Every save is recorded in a Redis sorted set, preserving the full edit history and letting staff revert to any earlier state.

Works without Redis configured

Edits persist to localStorage and keep working locally even without credentials set; they sync across devices once Redis is connected.

Responsive 320px to 1536px

Headlines scale with clamp() and navigation collapses to a hamburger below 768px, covering foldables through large desktops.

Stack

Next.js 15TypeScriptTailwind CSS v4Framer MotionUpstash RedisGoogle FontsVercel
2025Year
Next.js 15Stack
SoloRole
LiveStatus