Improved mongodb.com component libraries without breaking downstream teams.
At MongoDB I worked on the shared packages behind mongodb.com: design tokens, component library code, and navigation. The work was mostly semver-safe API changes, release sequencing, performance fixes, and debugging style precedence in a Tailwind + theme-ui stack.
Design system
Performance
Semver
What changed
Kept changes semver-safe, sequenced package releases, and made style-precedence fixes local instead of global.
Measured outcomes
- LCP
- Hundreds
- 3
Highlights
- Built a multi-promo announcement bar across tokens, component library code, and the shared navigation package. The release chain shipped without breaking consumers.
- Set fetchPriority="high" on hero images for a measurable LCP improvement on high-traffic landing pages. Small diff, real Core Web Vitals impact.
- Worked through the Pardot-to-Eloqua form migration across hundreds of forms: field mapping, post-submit rich text, and defensive handling for incomplete CMS payloads.
- Revamped card grids with variant sizing, hover treatments, inverse-theme fixes, and graceful deprecation of legacy props.
- Introduced a scoped override pattern for style-precedence bugs in the Tailwind + theme-ui stack, then documented it as a team practice.
- Unified image, video, and embed handling behind one media component API so rich-text JSON embeds had a single path.
- Hardened components against CMS drift with null checks and type exports, avoiding build failures when payloads were incomplete.
Outcomes
- Contributed across design tokens, high-level components, and shared navigation with semver discipline and snapshot-test coordination.
- Improved Core Web Vitals on mongodb.com landing pages.
- Shipped the multi-promo banner without breaking downstream consumers.
Stack
- React
- TypeScript
- Next.js
- Tailwind
- theme-ui
- Jest
- React Testing Library
- Storybook
- Contentstack
- API Extractor