Xan Torres
Back to work
MongoDBDeveloper Platform2023 – 2024mongodb.com

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.

Why it matters

Design-system change at mongodb.com traffic levels: semver-safe API evolution, releases sequenced across three package layers, a Pardot-to-Eloqua migration across hundreds of marketing forms with zero production incidents, and performance work measured in Core Web Vitals.

Readouts

the fetchPriority change that moved LCP on the top landing pages
2 lines
incidents migrating hundreds of marketing forms
0
package layers released in sequence, no consumer broke
3

Highlights

  • Built a multi-promo announcement bar across tokens, component library code, and the shared navigation package: a three-month cross-repo epic whose release chain shipped without breaking consumers.
  • Set fetchPriority="high" on hero images across high-traffic landing pages: two lines, with the LCP movement showing up in Core Web Vitals.
  • Worked through the Pardot-to-Eloqua migration across hundreds of marketing forms with zero production incidents: 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.
  • Migrated hundreds of marketing forms from Pardot to Eloqua with zero production incidents.
  • 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
All workGet in touch