← Back to projects

ZDP Components Library

Zones2022 — 2024

ReactTypeScriptMUILernaStorybook

Overview

Created and maintained 40+ base components using Material UI.

Problem

  • Multiple apps had inconsistent UI patterns, duplicated components, and slow delivery due to rework.

Approach

  • Built a shared component library with strict variants, conventions, and documentation.
  • Used Lerna to manage packages and versioning across internal products.
  • Added Storybook to make adoption easy and reduce misuse/misalignment.

Architecture

  • React + MUI component system with reusable primitives and composable patterns.
  • Monorepo multi-package tooling (Lerna) + Storybook docs.

Challenges

  • Maintaining backward compatibility while shipping improvements.
  • Driving adoption across teams and ensuring consistent usage.

Outcome

  • Faster feature delivery across apps and consistent design language.
  • Reduced duplication and improved developer experience via docs and shared primitives.

Highlights

  • Managed multi-package architecture using Lerna.
  • Built Storybook documentation for previews and developer onboarding.
  • Components were reused across 5+ internal apps for consistency and speed.

Tech stack

React • TypeScript • MUI • Lerna • Storybook

Demo / Media

Screenshots

Key flows and configuration screens from the production system.

UI Library + Storybook

Reusable components with documented variants and usage guidelines.