Air Mart Engineering

Product Vision

Air Mart Engineering — a premium AC repair, servicing and supply company working island-wide in Sri Lanka — didn't want a brochure. They wanted two things that rarely come together: a "super-luxury" web presence for a trade that's usually marketed generically, and a real operational system underneath it — customers booking online, staff managing jobs, invoices going out — without stitching together a rack of third-party SaaS.

So the work split cleanly in two: make an AC company look like a luxury brand, and turn a static page into a working booking business.

• Who it's for: the client and their founder, Mr. Nafhan Nowsan; their customers, who book in a few taps; and their staff, who run the jobs and bill for them.
• The constraint that shaped everything: one person, one codebase, both halves — a luxury brand and a secure backend — on a stack cheap and simple enough for a small business to actually keep running.
• Success looked like: a site that reads as a premium brand, sitting on a system that quietly runs the business behind it.

Architecture Stack

The build has two faces: a hand-crafted luxury front end, and a security-first Supabase backend that turns it into a product.

The brand layer. The direction took its cue from the gold-on-dark logo — deep charcoal, gold gradients, glass surfaces and slow, deliberate motion, closer to a luxury-hospitality brand than an HVAC company. Throughout: nested "double-bezel" cards, a floating glass nav pill, macro-whitespace, a film-grain overlay, custom cubic-bezier easing, and IntersectionObserver scroll reveals. Playfair Display (serif) pairs with Jost (a geometric sans echoing the wordmark). The signature touch is a cooling animation — frost and logo-shaped snowflakes drifting through soft "cool-air vents," theme-tuned and reduced-motion aware.

The product layer. Where it stops being a website and becomes a business, on Supabase:

• Security-first, by policy — Row-Level Security lets the public create a booking but never read one. Availability is exposed only through SECURITY DEFINER functions that return counts, never records — the site can show "Fully booked" without ever leaking a customer.
• No double-booking, ever — slots are exclusive (slot_capacity() = 1), and book_slot() is an atomic Postgres function that takes a pg_advisory_xact_lock on the date-and-slot, re-checks capacity, then inserts. Two simultaneous clicks can't both win — verified live.
• Invoicing built in — line items in LKR, auto-incrementing INV- numbers from a Postgres sequence, then print / save as a PDF on a branded letterhead. Bookings carry human refs like AM-3F9C21.
• Zero-dependency front end — no framework, no build step; the only runtime dependency is the Supabase client from a CDN (@supabase/supabase-js via jsDelivr).
• Graceful degradation — before any keys are set, the site falls back to WhatsApp-only booking and a "connect Supabase" admin screen. Nothing breaks half-configured.

PM Execution

This was a close, iterative client engagement, and the two best decisions came straight out of client feedback.

• Turning point 1 — "too dark" → a real theme system. The most valuable iteration came from a single piece of client feedback. Instead of a one-off recolor, I refactored the site into a variable-driven light/dark theme with a toggle that persists across visits and applies before first paint (no flash). The same toggle carries into the staff console, so the whole product feels like one brand.
• Turning point 2 — the founder portrait. The founder section began with a gold monogram. When the client shared a casual photo, I generated an identity-preserving AI studio portrait from it — his real likeness, in a tailored suit against a dark studio backdrop whose gold glow blends into the card.

Selected problems solved. Availability without data exposure (the definer count-functions); the last-slot race (advisory lock + atomic insert); a theming bug where CSS was overriding the hidden attribute (a global [hidden] fix); and a stretched founder portrait caused by an HTML height attribute overriding the CSS (height: auto).

The Pitch

Air Mart Engineering is a site that reads as a premium brand and a booking-to-invoice system that runs the business behind it — customer picks a slot → the appointment locks → the invoice prints — on a secure, low-cost, low-maintenance stack with no third-party booking SaaS.

What it proves:

• Range — luxury design craft and serious backend engineering (RLS, SECURITY DEFINER availability, advisory-lock concurrency) delivered by one person, in one codebase.
• Judgement for a small business — every choice optimised for a client who has no dev team: zero build step, one CDN dependency, near-zero monthly cost, and a system that degrades gracefully instead of breaking.
• Client craft — the best parts of the build came from listening to the client and turning "too dark" and "here's a phone photo" into a theme system and a studio portrait.

The bar was to make an air-conditioning company look expensive and run like software. One codebase does both — and the database never trusts the pretty part.