APP STUDIO · CONCEPTUAL VIEWOriginal illustration · not a product screenshot
01 — CONTEXT
Modernize the interface. Keep the boundary explicit.
App Studio brought together application-building tools in a Backbone.js, Marionette and jQuery codebase. My work combined the move toward React with improvements to the API Builder, metadata and stage logic.
02 — MY ROLE
What I owned.
I led the Backbone-to-React micro-frontend migration via Web Components. Alongside that architecture work, I resolved API Builder bugs, delivered enhancements, built Figma-driven components and documented the work in Confluence.
03 — WHAT I BUILT
A bridge between generations.
Backbone.js / Marionette / jQueryWeb Components THE BRIDGEReact micro-frontends
01
Web Components as the bridge.
I used Web Components to bridge the Backbone-based application and React micro-frontends. The architectural framing is strangler-pattern-style: modernization through a boundary between the existing UI and its React components, rather than treating the two as unrelated applications.
02
Architecture and product work, together.
I worked on metadata and stage-logic performance while resolving 90% of API Builder bugs. The migration was one part of my contribution; improving the application-building tools was another.
03
More capable stage workflows.
I delivered 5+ enhancements, including stage duplication, copy-paste, actions, rules and automation.
04
Components with a shared reference.
I built Figma-driven components and documented work in Confluence. Those contributions sat alongside the migration and the product enhancements.