PROJECT001

BLNCO

A dive-operator platform combining a cinematic public site with customer, instructor and admin portals — expeditions, training, Field Notes and bookings on one API.

CATEGORYWEB
YEAR2025
STATUSLIVE / EVOLVING
ACCESSPUBLIC

STATUS STATUS UNAVAILABLE

PRODUCTION / STATUS UNAVAILABLE
LAST CHECK · JUST NOW

React
Vite
Three.js
React Three Fiber
GSAP
Zustand
NestJS
Prisma
MySQL
Docker

VISIT BLNCO.XYZ WORK INDEX

01 OVERVIEW

What I built

BLNCO is a premium expedition and dive-operator platform. The public site sells the journey; the customer and instructor portals handle the operational side; the admin console is the source of truth for content, departures, training and finance. Everything talks to one NestJS API on MySQL.

02 MOTIVATION

Why it exists

Dive operators need one place to sell trips, run PADI-style courses, keep travellers ready (documents, medical, payments, messages), and let staff publish Field Notes and expedition pages without maintaining separate sites. BLNCO was built to hold that whole surface in one product.

03 EXPERIENCE

Product surfaces

Four client surfaces share the same records.

01
Public site
Cinematic homepage, expeditions, courses, Field Notes, about and contact — CMS-driven marketing that still books into the ops system.
02
Customer portal
Dashboard for bookings, documents, payments, medical questionnaire, certifications, messaging and account settings.
03
Instructor portal
Course schedules, students, progress, certificates, expedition support and messaging for training staff.
04
Admin / CMS
Mission Control for departures, training, sales, finance, website CMS, SEO and system configuration.

04 PUBLIC SITE

Expeditions, courses and Field Notes

Screens captured from the live public site. No customer account data.

BLNCO Expeditions page with dive photography hero and destination search — EXPEDITIONSExpedition discovery with dive photography and destination search.

BLNCO Courses page listing dive training offerings — COURSESPADI-style course catalog feeding into training and booking flows.

BLNCO Field Notes page featuring a thresher shark story card — FIELD NOTESEditorial Field Notes — destination storytelling published from the CMS.

ABOUTBrand and immersion storytelling paired with underwater photography.

05 ARCHITECTURE

One API, four surfaces

Public site, customer portal and instructor routes live in the main Vite app. Admin is a separate React app. Both talk to a NestJS API with Prisma on MySQL, Redis for realtime, and integrations for Stripe, email and web push. Docker Compose packages web, admin, API and Redis.

SURFACE MAPPublic-safe diagram of marketing, portals and admin over a shared API — not a network map.Design diagram / not a screenshot

06 WORKFLOW

From discovery to departure

01Browse expeditions & courses
02Book / enquire
03Customer portal readiness
04Admin Mission Control
05Departure & training ops

07 TECHNOLOGY

Stack in use

Confirmed from the BLNCO monorepo package and config files — not placeholder tags.

React
Vite
Three.js
React Three Fiber
GSAP
Zustand
NestJS
Prisma
MySQL
Docker
Socket.IO
Stripe
Redis

08 DECISIONS

What mattered

Admin is the authoring source of truth; public and portal clients consume the same API records.
Payment UI is ledger-driven so booking balances stay consistent with finance.
Cookie isolation separates customer/instructor sessions from studio admin sessions.
Motion and Three.js systems are chunked so the cinematic layer does not block the ops surfaces.

09 STATUS

Where it stands

BLNCO is live at blnco.xyz with real expedition, course and Field Notes content. The product keeps evolving — especially ops depth and SEO — so this case study describes the shipped public system without claiming a finished roadmap.