ZDP Components Library
Zones • 2022 — 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.