AI-era frontend architecture for interfaces that move real things. Real-time 3D, hardware bridges, and Node.js, PostgreSQL and Redis underneath.
Measured in this browser from this page load: paint timings, transfer size and server response. No invented uptime.
React 19, Next.js 16, TypeScript, Tailwind v4 and Framer Motion on the surface. Behind it, typed Node.js services, PostgreSQL data models and Redis caching that keep the interface honest under real load.
Three.js and React Three Fiber scenes with physical materials, custom lighting, responsive canvases and motion that respects the visitor.
Low-voltage devices, solar and battery telemetry, serial and thermal interfaces, and the automation pipelines that move their data into the browser.
Chapter 01
Things I built and what changed after they shipped. Every number is a metric I instrumented, not a round number I picked.
A retro-style terminal POS built with Bun + OpenTUI + SQLite
Interactive demo
Loaded on request - the embed pulls its own bundle and we would rather you got the page first.
An enterprise commerce and FBR compliance engine with hardware-locked licences.
An ERP and POS suite engineered for 1080p terminals and the 2am rush.
A Tauri POS terminal that runs the till, the kitchen and the stock in one binary.
A bakery platform with a production-grade admin, built on Next.js 16.
A clothing commerce platform with a full admin panel and a POS system attached.
A restaurant management system in two halves: a native app and the web back office.
A checkout and webhook sandbox SDK for Pakistani mobile wallets.
A React Native point of sale for pharmacies, with receipt OCR built in.
Chapter 02
9 domains and 54 technologies, mapped as one stack. Tap a domain to see the years behind each tool and what I actually shipped with it.
Capability map
The shape of the stack
9 domains / 54 technologies
Active signal
8 tools / Frontend
Select a domain above to redraw the map and inspect the tools behind it.
Interface architecture at scale: rendering strategy, state that does not fight itself, and accessibility treated as a requirement rather than a retro-fit.
Shipped the Control Plane admin surface: ~120 components, co-located hooks, and a virtualised table holding 50k rows without dropping frames.
Moved a documentation site from SPA routing to the App Router and cut TTFB by routing static content at build time instead of shipping it to the client.
Typed an internal API surface end to end and turned a class of runtime shape bugs into compile errors, which is the only reason refactors stopped being scary.
Built a token-driven design system where every colour is contrast-checked in both themes in CI, so a theme flip cannot silently ship unreadable text.
Used deliberately and sparingly - layout transitions and drawer choreography only. Animation that blocks interaction is a bug with a nice easing curve.
Took three production apps to WCAG 2.2 AA: keyboard paths, focus management, live regions, and a contrast budget enforced by a pull-request check.
Built inventory and licence screens with server-state caches and virtualised tables that stay responsive at 50k rows.
Measured LCP, INP and TTFB in the browser rather than trusting a lab score; kept the 3D chunk off the initial load and capped DPR on a procedurally built scene.
Chapter 03
A 1969 Ford Mustang in classic black, built as a real-time scene rather than a rendered video. Drag to orbit, scroll to zoom, or use the view controls. Metallic paint, custom lighting and contact shadows are all computed in the browser.
live canvas
1969 Ford Mustang · classic black
Initializing 3D canvas
three.js · react three fiber
8% · loading chunk
Drag to orbit · scroll or pinch to zoom. Keyboard: use the view controls.
Procedural geometry · physical materials · no pre-rendered video, no remote model download.
Chapter 04
The same discipline that keeps a production frontend predictable also runs a solar bus, a thermal printer and a serial telemetry link. These are interactive vector instruments: flip a mode, watch a trace, follow a packet from device to dashboard.
simulated telemetry12V BUS
Webhooks, serial frames, solar telemetry and thermal print jobs arrive on one boundary.
HTTP · UART · MQTT
Schemas, units and ids are reconciled before anything downstream sees a value.
Schema · dedupe
Classification, summaries and anomaly scores run behind a typed interface, not in the UI.
LLM · embeddings
Thresholds, authorization and retries decide what is safe to publish or actuate.
Guards · retries
Dashboards, alerts and hardware commands leave through one observable path.
UI · alerts · relay
Automation pipeline. Ingestion, AI enrichment, validation and dispatch, drawn as one trace.
Chapter 05
Rather than ask you to take my word for it, here is a terminal. Run commands against my actual background data — all client-side, no network, no shell access.
Chapter 06
Tell me what you are building and what is going wrong with it. I reply within a day, usually from ahsawwn.com.
Come and sit. He answers faster than the form does.