CabinForge — 3D Product Platform & CMS

Problem & Context

Sell a physical product like a flagship — then hand the keys to the marketing team.

A modular-cabin manufacturer needed a website that felt as engineered as the product itself, and a way for staff to keep it up to date without a developer in the loop.

The challenge

Portable cabins are a considered, high-value purchase. Flat product photos undersell the engineering. The brief was to make the range tangible online — let a buyer "walk around" a cabin and step inside — while staying fast on mobile networks and mid-range CPUs.

At the same time, sales and marketing needed to change copy, swap photography, reorder sections and follow up on enquiries themselves — with zero risk of breaking the delicate 3D scene, camera paths or scroll choreography.

What was built

A real-time WebGL journey: one cabin that assembles and reconfigures across Site Office, Labour, Conference and Storage models as you scroll.
Six marketing routes, each with its own 3D hero, animated statistics and reveal choreography.
A headless CMS API that serves every page's text and imagery — with the site's original hardcoded values as a safe fallback.
A separate, authenticated admin panel: dashboard, page editors, media library and an enquiry pipeline.

Architecture & Tech Stack

Three decoupled apps, one content contract.

The public site, the CMS API and the admin panel are independent deployables. The site reads published content from the API but never depends on it to render — if the CMS is unavailable, it falls back to its built-in content.

Public Web · Dark theme

3D Marketing Site

Scroll-driven Three.js journey and per-route WebGL heroes, orchestrated with GSAP ScrollTrigger and Lenis smooth scroll. Code-split so the homepage doesn't pay for every scene up front.

React 18@react-three/fiber @react-three/dreithree GSAPLenisVite

API · Node

Headless CMS Backend

REST API for published content, media and quote requests. JWT admin auth with bcrypt, Zod validation, Helmet, CORS, rate limiting and HPP. Cloudinary for image storage.

ExpressMongooseMongoDB JWT · bcryptZodCloudinary

Admin · Light theme

CMS Admin Panel

A separate React app: dashboard with KPIs, nested page editors with reorderable sections and toggles, a Cloudinary-backed media library, and a quote-request workflow with private notes.

React 18React Router ViteToken auth

Visitor→ 3D Site→ CMS API↔ MongoDB← Admin Panel→ Quote pipeline

Key Features

Engineering highlights.

🧊

Real-time reconfiguring cabin

A single primitive-built cabin morphs between four product configurations as the visitor scrolls — no pre-baked video, all live WebGL with camera choreography per scene.

🎚️

Content-editable, scene-protected

The CMS drives ordinary text and image values only. 3D geometry, materials, camera paths and animation logic are deliberately out of the editor's reach.

📊

Animated KPI counters

Statistics count up on scroll into view across the Industries, About and Projects routes, reflecting live figures from the CMS.

🛡️

Graceful degradation

Every public page ships with hardcoded fallback content, so the site renders fully even when the CMS API is temporarily unavailable.

✉️

Quote pipeline

Website enquiries flow into the admin as a filterable table with a New → Contacted → Quoted → Closed status workflow and private follow-up notes.

🖼️

Media library

Cloudinary-backed uploads with in-browser cropping, searchable metadata (alt text & captions) and reuse across any page section.

Gallery · Every Section, Every Visual Type

Real, unretouched captures.

Every image below is a live render of the running application, captured against an isolated instance seeded with fictional data. Grouped by section, each shot is tagged with the distinct visual / render types it demonstrates. This is a 3D product experience and a CMS — not an analytics dashboard — so its "visual vocabulary" is WebGL renders, KPI tiles, tables, cards, badges, grids, editors, forms and maps rather than line/bar/pie charts.

Public Site · Home

Dark theme Scroll-driven 3D journey

CabinForge homepage hero with a real-time 3D site-office cabin rendered over a construction-site backdrop.

Homepage hero — live 3D site-office cabin

The scroll journey opens on a fully rendered WebGL cabin. A progress HUD tracks the walkthrough as the visitor scrolls "inside".

3D WebGL renderHero layoutScroll-progress HUD

Public Site · Products

Dark theme 3D walk-around + spec cards

Products page intro reading 'Four cabins. One walk-around.' with a category rail for Site Office, Labour, Conference and Storage.

Products intro & category rail

Page-intro hero with a live progress bar and a per-model category rail that tracks the 3D walk-around.

Hero layoutCategory railProgress bar

Site Office Cabin product detail: a spec card with feature bullets beside a stacked image slider of cabin photography.

Product spec card & image slider

Each model pairs a spec card (model code, feature bullets, CTA) with a layered image slider of real photography.

Product spec cardImage sliderFeature list

Public Site · About

Dark theme Story + feature cards + stats

About page hero reading 'Building smart portable spaces for every business.'

About hero

Full-bleed hero introducing the (fictional) manufacturer, with dual calls to action.

Hero layoutDual CTA

'Our Story' section: an interior cabin photograph beside two paragraphs of narrative copy.

"Our Story" — image + copy

An editorial image-and-copy block, one of several reveal-on-scroll layouts on the route.

Image + copyReveal-on-scroll

Public Site · Industries

Dark theme 3D hero + animated KPIs

Industries hero with a detailed 3D cabin bearing a CabinForge site-sign, above a row of KPI tiles: 6 industries served, 250+ projects delivered, 15+ states covered, 99% on-time delivery.

Industries hero — 3D cabin + KPI stat tiles

A second, more detailed 3D cabin hero, above a row of KPI counters that animate up on scroll into view (captured here at their final, settled values).

3D WebGL renderKPI stat tilesAnimated count-up

Public Site · Contact

Dark theme Live 3D preview · form · map

Contact hero 'Let's talk cabins' with a rotating live 3D cabin preview and a quick-contact card showing anonymized phone, email and region.

Contact hero — live 3D preview

A continuously rotating 3D cabin sits beside a quick-contact card. All contact details are fictional placeholders.

3D WebGL renderQuick-contact card

Quote request form with a product dropdown, requirement textarea and red 'Contact us' button, beside a 'Response time' info card.

Quote request form & info cards

The public enquiry form that feeds the admin quote pipeline, supported by service info cards.

Quote formInfo cardsSelect · textarea

'Location' section with a fictional anonymized address beside an embedded Google Map.

Location — embedded map

An embedded map keyed to the address. Because the address here is a fictional placeholder, the embed resolves to a world view rather than a real pin.

Map embedAnonymized address

Public Site · Projects

Dark theme Stats + reveal gallery

Projects hero 'Real sites. Real cabins. Real fast.' with KPI tiles for projects delivered, states covered, repeat clients and average dispatch time.

Projects hero — KPI tiles

The Projects route (re-enabled in this isolated copy for capture) leads with its own animated statistics.

KPI stat tilesHero layout

'The Gallery' project tile — an aerial highway site labelled 'Highway site office — 6 units'.

Project gallery tile

Large full-bleed project tiles reveal one at a time on scroll. Project codes are generic, fictional placeholders.

Gallery tileReveal-on-scroll

Admin CMS

Light theme Dashboard · tables · editor · media

Split-screen CMS login: a dark branded panel reading 'Your website. Under control.' beside a sign-in form.

Admin login

Split-screen authenticated entry to the CMS. Credentials shown are throwaway demo values.

Auth formSplit layout

CMS dashboard with four KPI cards (managed pages, visible sections, quote requests, CMS status) above a grid of page cards with 'Published' badges.

Dashboard — KPI cards & page grid

Overview KPIs, a page-card grid with publish-state badges, and a persistent sidebar navigation.

KPI stat cardsCard gridStatus badges

Recent quote requests table with columns for customer, product, colour-coded status badge and received date.

Recent enquiries table

The dashboard's recent-quotes table with colour-coded status pills, populated with fictional enquiries.

Data tableStatus badges

Full Quote Requests page: filter chips (All, New, Contacted, Quoted, Closed) above a table of enquiries with contact details and status pills.

Quote Requests — filterable table

The full enquiry pipeline with status filters and per-row contact detail. All names, emails and phones are invented.

Data tableFilter chipsStatus badges

Quote request detail modal for a fictional customer, with email, phone, product, requirement text, a status dropdown and private-notes field.

Quote detail modal

Drill-down modal with the enquiry, a status selector and a private admin-notes field for follow-up.

Detail modalStatus workflowNotes field

Media Library grid of twelve cabin and site photographs, each with a caption and pixel dimensions, plus a search bar and upload button.

Media library — asset grid

Searchable thumbnail grid of Cloudinary-backed assets with alt-text captions and dimensions.

Media gridSearchUpload action

Home Page editor: page settings, publishing status dropdown and SEO fields, with an editing-guide sidebar noting that 3D content is protected.

Page editor — settings & SEO

Per-page editor with publishing state, SEO fields, and a helper sidebar reminding editors the 3D scene is protected.

Nested editorPublish controlHelper panel

Page editor field view: labelled inputs for button labels and scroll targets, and an image field with a Cloudinary URL, alt text and upload/attach controls.

Page editor — nested fields

Deep, typed field editing: button labels, scroll targets and image fields with media-library attach and per-image alt text.

Nested editorImage fieldTyped inputs

Honest Capture Notes

What's real, and what's fictional.

Every screenshot is a live, unretouched render of the running application — no mockups — captured in a consistent light/dark split matching each app.
All data is anonymized. The brand, parent company, people, addresses, phone numbers, emails and figures are fictional placeholders introduced specifically for this portfolio build. Captures ran against an isolated instance with an in-memory database and throwaway credentials — never production data.
No traditional charts exist in this product. It is a 3D marketing experience plus a CMS, so the gallery covers every distinct render/visual type present — WebGL scenes, KPI tiles, tables, cards, badges, grids, editors, forms and a map — rather than inventing line/bar/pie charts that the app does not contain.
The reconfiguring 3D journey (one cabin morphing between four models) is a continuous, scroll-scrubbed animation; the still frames here show representative states of a sequence best experienced live.
The Projects route is commented out in the production build; it was temporarily re-enabled in the isolated copy purely to capture it, and is noted as such.
The Contact map resolves to a world view because it is keyed to a fictional, non-geocoding address — intentional, to avoid revealing any real location.