Back-office platform

The control room for a payments platform.

role: Senior Frontend Engineer
period: 2023 – present
stack: ReactTypeScriptNext.jsTailwind CSSZustandTanStack QueryDockerJestVitestPlaywright

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 →

Illustration, not a screenshot. Drag the handle to see what's under the hood.

the challenge

A payments company runs on many internal tools: merchants, transactions, configuration, and separate portals for different teams. Staff need one secure place to run all of it, strict control over who can see and change what, and a trustworthy record of every action.

what it does

Merchants, transactions and configuration
Day-to-day management of merchants and their transactions, plus the platform's configuration.
Users and access control
Set up back-office users and define what each of them, and by extension each merchant, is allowed to do.
Audit logs
Every action is recorded, so teams can see who did what and when.
A home for other portals
Tenant portals are deployed separately but open from an icon in its sidebar once you've signed in.

what I did

Designed and maintained a microfrontend architecture inside a monorepo, so 15+ engineers across teams build and ship independently.
Worked with DevOps on the routing that lets separately deployed portals appear under one address: requests are routed by URL path, and each portal sets its asset prefix to its own address so its scripts and styles load from the right app.
Set up each portal's Docker build so a single image runs in every environment, by replacing build-time placeholders with the real settings when the container starts.
Wrote the guide other teams follow to add a new portal under the shared address.
Built role-based, permission-aware UI, so people only see the tools and data their role allows.
Managed server state with TanStack Query, caching and syncing API data to cut redundant requests and keep dashboards current.
Set up unit and end-to-end testing (Jest, Vitest, Playwright) to catch regressions before release.
Led adoption of the shared design system across Hydrogen's fintech products.

impact

15+ engineers shipping independently across different teams.
Page build time down 25% through design-system adoption.
Fewer redundant API requests and fresher dashboards.
Regressions caught before release by automated tests.

Back-office platform

## the challenge

## what it does

Merchants, transactions and configuration

Users and access control

Audit logs

A home for other portals

## what I did

## impact

## see also

the challenge

what it does

what I did

impact

see also