Modernizing Frontend Architecture
From Bootstrap to a Unified Design System with MUI
I led the migration from a heavily customized Bootstrap stack to Material UI, creating a scalable design system that unlocked theming, white-labeling, and faster development across products.
Duration
2 Years
My Role
Lead Frontend Engineer
Team
6+ Engineers
The Challenge
SafeBase supported multiple product surfaces with different branding needs: the core application and customer-facing Trust Centers. Bootstrap had no true theming model, which meant every customization required layers of workarounds and duplicate components.
- Separate button implementations for App and Trust Center due to different primary colors
- Extensive styled-components wrappers and SCSS overrides
- Fragile override chains that caused regressions and styling drift
- Difficult and expensive white-labeling and dark mode implementation
- Slow feature velocity due to complexity and duplication
My Approach
Start Small, Prove Value
Rebuilt the broken sidebar with MUI, then introduced foundational components like typography, menus, and forms.
Build the System
Created a shared component library with design tokens, Storybook docs, and theme-aware components.
Shift the Architecture
Product differences became theme differences. One component adapts to the closest theme automatically.
Scale Across Products
Rolled out light & dark mode in Trust Center, then extended the same token system to the application.
The Results
We retired Bootstrap, Atlantis, react-select, sass, and legacy overrides and replaced them with a unified Material UI design system that continues to support product growth today.
280+
React-Bootstrap imports removed
3
Frameworks retired (Bootstrap, Atlantis, Custom SCSS)
2
Themes supported (Light & Dark Mode)
1
Unified design system shared across products
Faster
Feature delivery with less duplication and fewer regressions
Impact
The migration transformed frontend development from a collection of disconnected styling systems into a cohesive platform. Engineers spend less time fighting CSS and more time building features that deliver value to our customers.
Back to Work