Let's talk

work.tsx — selected products, and what's under the hood

Products people use every day.

Drag the handle on any project to see the engineering behind it. Previews are illustrations, not screenshots.

back-office-platform.tsx

01 · Fintech · Hydrogen Payment Services

Back-office platform

The control room for a payments platform.

The back office where Hydrogen's teams manage merchants, transactions and configuration, decide exactly who can do what, and see who did what and when. It's also the front door to the company's other portals.

  • React
  • Access control
  • Audit logs
  • Microfrontends

read the case study →

X-ray · under the hood
  • ›React · TypeScript · Tailwind · Zustand
  • ›access control: permission-aware UI per user and merchant
  • ›audit logs: who did what, and when
  • ›tenant portals deployed separately, opened from the platform's sidebar
  • ›microfrontends in a monorepo → 15+ engineers ship independently
  • ›portals routed by URL path; each portal serves its own assets
  • ›TanStack Query: caching + sync, fewer redundant requests

← drag to peek under the hood →

pos-operations-portal.tsx

02 · Fintech · Hydrogen Payment Services · a tenant portal on the back-office platform

POS operations portal

Getting POS terminals to merchants, and keeping track of them.

A portal for the teams that sell and deploy point-of-sale (POS) machines: managing sales, coordinating the field agents who install terminals in merchants' stores, and tracking every device. It lives inside the back-office platform and has its own user management.

  • Tenant portal
  • Field operations
  • POS tracking

read the case study →

X-ray · under the hood
  • ›React · TypeScript · Tailwind · Zustand
  • ›tenant portal on the back-office platform: deployed separately, opened from its sidebar
  • ›its own user management
  • ›sales management
  • ›field agents: POS installs at merchant stores
  • ›POS machine tracking

← drag to peek under the hood →

design-system.tsx

03 · Fintech · Hydrogen Payment Services

Shared design system

One source of truth for every team's UI.

Teams across Hydrogen manage their own code, so screens drifted apart from one product to the next, even inside the back-office platform. The design system is the shared library every team picks its components from, so everything looks and behaves the same and new screens come together about 25% faster.

  • Design system
  • Design tokens
  • Nextra

read the case study →visit site ↗ (opens in a new tab)

X-ray · under the hood
  • ›design tokens → components → docs site (Nextra)
  • ›data tables · dashboard layouts · sidebar · filters · dropdowns
  • ›one library every team picks components from
  • ›hosted in a private npm registry on Azure
  • ›adoption scheduled into each product team's sprint
  • ›used by up to 10 teams, almost everyone adopted it
  • ›page build time −25%

← drag to peek under the hood →

language-ai-platform.tsx

04 · AI · Awarri

Language AI platform

From raw language data to a voice assistant that speaks local languages.

I led the frontend team that built the tools turning raw text and audio into clean training data in local languages, and then the products built on that data: speech and text, voice cloning, and a real-time voice assistant.

  • Team lead
  • Annotation & QA
  • Speech
  • Voice assistant

read the case study →

X-ray · under the hood
  • ›text and audio data in
  • ›annotators translate text or correct machine transcripts
  • ›QA reviewers: validate · confirm · edit · send back
  • ›roles: annotator · QA reviewer · super admin
  • ›up to 100 annotators and 15 QA reviewers

← drag to peek under the hood →

healthcare-platform.tsx

05 · Health tech · MAP Systems, Canada

Healthcare ERP & communications platform

An ERP for healthcare providers, and the real-time communication that connects everyone around it.

Software for healthcare providers that improved administrative efficiency by 80%, plus the chat and calls that let hospitals, medical suppliers and patients communicate seamlessly. I built the frontend for every app.

  • ERP
  • Real-time
  • MediaSoup
  • WebSockets
  • PeerJS

read the case study →

X-ray · under the hood
  • ›separate apps for hospitals, medical suppliers, patients and more
  • ›ERP: appointments, orders, inventory and billing
  • ›administrative efficiency up 80%
  • ›I built the frontend for all of them

← drag to peek under the hood →

kwasrra.tsx

06 · Government · Kwara State

KWASRRA (opens in a new tab)

A state's residents registry, online.

The official site of the Kwara State Residents Registration Agency, which is building a database of residents to support public services and the Kwara State Residents Card.

  • React
  • Vite
X-ray · under the hood
  • ›React · Vite
  • ›owned the frontend end to end

← drag to peek under the hood →

proxima-forte.tsx

07 · Cloud · Welfare & payroll

Proxima Forte (opens in a new tab)

The public site for a cloud technology company.

The public site for a company that provides welfare disbursement, payroll and data tools to governments and financial institutions.

  • React
  • Vite
X-ray · under the hood
  • ›React · Vite
  • ›owned the frontend end to end

← drag to peek under the hood →