Dávid Novák
SK
Case 05 of 05

Pushing a large, legacy, multi-team storefront towards a design system.

PRODUCT
Storefront for a large European e-commerce retailer
ROLE
Frontend Engineer; lead contributor on two proofs of concept
YEARS
2021–2022
STACK
React, TypeScript, Webpack, Storybook, MSW, Jest
TEAM
Mixed: the client’s own engineers and an external delivery team
~140components in the storefront codebase.
~270Storybook stories, rendering with realistic mocked data.
2proofs of concept I led: a pattern library and a micro-frontend architecture.
CONTEXT

A large European e-commerce retailer with a server-rendered PHP storefront, worked on by several teams.

MY ROLE

Frontend Engineer and one of the most active contributors to the storefront frontend, in a mixed team. In 2022 I was the lead contributor on two proofs of concept.

THE CHALLENGE

Modernise the frontend inside a large, legacy, multi-team codebase, without replacing the backend underneath it.

What I didThree edits to the plan
AModernised in place
EXISTING SETUP

Struck out: Server-rendered PHP templates for every interactive part of the page.

MY EDIT

Inserted: React “islands”: login, search, product availability and account pages mount into specific spots on the PHP pages, from bundles the templates read via a manifest.

RESULT

Modern UI, shipped piece by piece, without replacing the backend.

BPackaged every pattern
THE PROBLEM

Struck out: Different teams re-implementing the same UI patterns.

MY PROPOSAL

Inserted: A shared pattern library, where each pattern is a packaged, documented unit (component, tests and style guide) tied to the brand guidelines.

RESULT

A proof of concept I led in 2022.

CExplored the next architecture
THE QUESTION

How the storefront could be split between teams.

WHAT I BUILT

Inserted: A micro-frontend proof of concept, with separate home, navigation, search and checkout apps.

RESULT

A proof of concept I led in 2022.

TOOLING
  • Storybook + Mock Service Worker
  • Jest + Testing Library
  • BEM, recorded as an architecture decision

I wrote many of the stories and tests, so components render with realistic data and stay covered.

OUTCOME

A modern component layer that works with the existing PHP backend, and a clear path towards a shared design system that different teams can build on.

“David is one of the strongest frontend engineers I've worked with, and his technical craft is impeccable.”
— Engineering manager
NEXT CASE01 Automated investment platform