Skip to content

Selected work

A back-office merchants use all day

Ucommerce · Frontend lead · 2022 – 2025

Owned the frontend of Ucommerce's back-office, the application merchants use daily to run products, orders, pricing and promotions: modernized it from Vue 2 to Vue 3 and TypeScript, introduced TanStack Query and Playwright, and built an extension framework and embeddable widgets.

  • Vue 3 + TSmodernized from Vue 2, app by app
  • Playwrightend-to-end suite built from scratch and run in CI
  • Web Componentscustomer extensions without core changes

Context

Ucommerce is a SaaS e-commerce platform in the Umbraco ecosystem. Its back-office is where merchants manage products, catalogs, orders, price groups, currencies, promotions, campaigns, stores and settings, often for hours at a time.

When I joined, the frontend was a Vue 2 codebase spread across separate projects.

My role

I joined as a Senior Frontend Developer. Six months in, the frontend lead left and the CTO asked me to take over. I owned frontend architecture, technical decisions, feature planning and delivery in a team of four, working directly with the CTO and product stakeholders, and coached two backend engineers into full-stack contributors through pairing and code review.

Modernization

  • Led the move from Vue 2 to Vue 3, the Composition API and TypeScript, app by app and component by component.
  • Introduced TanStack Query for server state and caching, first for currencies and then for products, orders, pricing and settings, replacing hand-written fetching and store code.
  • Helped consolidate the frontend into an Nx monorepo and owned its tooling: Nx targets, Vite, ESLint, Commitizen and Husky, plus a one-command Docker environment with the database, API and search for local development.

Release confidence

I introduced Playwright and built the end-to-end suite from scratch: page objects, data factories and a seeded SQL database restored in Docker, run in CI through Nx. It covers orders, products, catalogs, campaigns, promotions, stores, the customer center and settings. Flaky tests were treated as bugs and fixed.

Built for daily use

  • Server-paginated ag-Grid views for large product and catalog lists.
  • A products query builder with nested rule groups and saved, editable searches.
  • An undo system for destructive actions, saved order filters and drag-and-drop product sorting.
  • Keyboard-first navigation through search results and lists in every app, with consistent loading, error and 404 states.

Extensibility

A UI extension framework lets customers inject their own Web Components into defined placeholders in the back-office, with change events and entity context, without touching core code.

A separate Widgets project compiles Vue components into Web Components, with a GraphQL service, so pieces of Ucommerce UI such as a product picker can be embedded in customers' CMS platforms.

Leaving it better

I wrote a frontend handbook so backend and full-stack developers could make UI changes safely when no frontend developer was around, and kept dependencies current with regular upgrades.

Back-office software is used for hours by the same people. Keyboard paths, undo, saved filters and fast lists add up, and they deserve the same engineering care as a public webshop.

Stack

  • Vue 3
  • Composition API
  • TypeScript
  • TanStack Query
  • Playwright
  • Vitest
  • Nx
  • Vite
  • ag-Grid
  • Web Components
  • GraphQL
  • REST
  • Tailwind CSS
  • Docker