The role
For close to five years I led the frontend on MyServiceCloud, the platform behind Broker Online Exchange, a B2B energy-brokerage product for brokers. Four of those years were at Broker Online Exchange itself; in the last year AppDirect acquired the company and the work continued under them.
I led the frontend the whole way through: set the direction for how we built UI, owned the architecture and component patterns, ran code review, and mentored the junior engineers on the team. When a new product area landed on the roadmap, I was the person who decided how it got built on the client and made sure it shipped.
The product itself is private production tooling for registered broker agents. The live dashboard sits behind login/invite access, so this case study is intentionally built from public walkthrough videos and redacted interface screenshots rather than a public demo link. Most of the UI shown in those materials is what my team and I shipped.
The platform
That's the product walkthrough. Nearly everything on screen (the quoting flows, dashboards, catalog, document handling) is the frontend I led. It's a dense, data-heavy application: a real B2B tool where every screen holds a lot of state and still has to feel workable.
The UI, flow by flow
These are the platform's own walkthroughs from the public resource hub, the day-to-day flows brokers actually use. Creating customers and accounts, the customer list, building quotes and proposals, and the commercial-raise / contract-generation screens (pricing to contract). The frontend in every one of these is what my team and I built and maintained.
Real walkthroughs of the live platform. Customer creation, accounts, quoting, proposals, and contract generation. The frontend in every one of these flows is what my team and I built and maintained. full resource hub ↗
The interface
Rebuilding the design language
The work I'm proudest of is the design-system overhaul. After AppDirect acquired the company, I led a full re-theme of MyServiceCloud: rebuilding the UI on a Mantine-based component system and bringing the whole platform onto AppDirect's design language, with a new visual language, tokens, and consistent component patterns across the app. New feature areas were built in React (Mantine + Zustand) alongside the existing Vue codebase.
Leading that work meant:
- Owning the visual language: turning AppDirect's design direction into tokens, components, and patterns the whole team could build on.
- Keeping it shippable: re-theming a live, revenue-bearing platform incrementally, in small steps. The product kept shipping the whole time.
- Setting the React patterns: for the new areas, component structure, state with Zustand, and how we used Mantine and styled it to the product instead of shipping default-kit UI.
This is the work that's invisible in a screen recording but is exactly what "lead frontend" means: choosing the design system and patterns a team builds on, and being responsible for them staying coherent over years.
Flagship: Bill Scan to Quote
The feature I'm proudest of shipping is the flow that turns a scanned utility bill into a structured quote. A broker uploads a PDF or photo of a customer's existing bill; the system reads it with Gemini Vision OCR, extracts the line items and rate plan, and turns that into a comparable quote inside the platform, instead of re-typing a bill by hand.
On the frontend that meant building an interface that could:
- handle messy real-world uploads (skewed scans, multi-page bills, bad photos) without falling over,
- surface the OCR's confidence and let a human correct it before the numbers became a quote,
- and keep the review-and-correct loop fast enough that it actually saved brokers time.
It's the kind of feature where the AI is only half the work: the other half is the UI that makes the AI's output trustworthy and editable.
Stack
- Frontend: Vue 3 + TypeScript at the platform's core, with React (Mantine, Zustand) introduced for new feature areas.
- Backend: PHP: Yii in the earlier years, Laravel later. (Frontend was my lane; I worked across the API boundary with both.)
- Gemini Vision: OCR for the bill-scanning flow.
- Years of accumulated component and pattern work to keep a large B2B app maintainable.
What I take from it
Five years on one platform (through a full design-system overhaul and an acquisition) taught me the thing that's easy to skip on side projects: how to keep a real, growing product coherent across many features, many engineers, and a long timeline, while still shipping. Leading the frontend there is why I'm comfortable being the senior frontend voice on a team, beyond an individual contributor heads-down on a ticket.