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.

Measured outcomes

LCP win on high-traffic landing pages
fetchPriority
production incidents migrating hundreds of marketing forms
0
package layers released together
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 for a measurable LCP improvement on high-traffic landing pages. Small diff, real Core Web Vitals impact.
  • 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 workWork together