UI Component Library to Reduce Duplication of Effort

1a. Design standards: similar to https://atlassian.design/foundations etc.

Design tokens (colors, spacing, typography, elevation, opacity)

Reusable building blocks (DRY) - atomic system approach; primitives; composition patterns using Box, Stack, Inline; panel system with Header, Body, Footer, Subheader, Disclaimer

Smart/dumb component separation

Spacing and layout primitives

Micro-frontends (SingleSpa) aligned to value streams mapping / Back-end for Front-end (BFF) 

Single Responsibility (SOLID)

W3C accessibility

Color system with roles (neutral, brand, information, success, warning, danger, discovery, accent, inverse, input) / CSS / Tailwind

Typography system (font family, size, weight, line height)

Iconography / images rules / packages

Linting (ESLint)

Translations / enums (no hardcoded data)

Context/provider, and Redux/rxjs/signals to remove prop-drilling

1b. Adoption approach:

Identified dashboard-level components and broke them down piece by piece; refactored incrementally during sprints as tech debt (side-by-side with feature work)

Pitched with powerpoints "Operation Lego" to stakeholders to convince them this would save time; showed industry adoption.

Pair-programming sessions with my staff to guide refactoring; hired UI-experienced engineers to accelerate and mentor; workshops on component-based architecture and SOLID/knowledge-sharing sessions where devs presented areas they'd refactored

1c. Measurable impact:

180 duplicate components removed

Bundle size reduced 32%

Feature dev time 8 days → 3 days

Bug reports on UI dropped 45%

Team onboarding reduced 2 weeks → 3 days

2a. Direct involvement in frontend architecture decisions (collaboration):

Led working sessions with React and Angular leads to evaluate shared data layer options; proposed vanilla TS WebSocket client with RxJS; facilitated discussion and gained team alignment

Facilitated design forums to assess state management approaches (Zustand, Redux, MobX); guided team to consensus on Zustand for React and NgRx with component-store for Angular

Chaired architecture review meetings to define splitChunks and code-splitting strategy; presented trade-offs and secured team sign-off

Partnered with backend engineering to define API contracts and WebSocket payload structures; co-authored OpenAPI specifications

Facilitated performance budget discussions; achieved team agreement on 200ms initial load target

Presented Nx monorepo option with detailed trade-off analysis; led team to consensus on adopting for shared libraries

2b. How close stayed to React and TypeScript:

Sat in sprint planning and backlog grooming for frontend teams

Reviewed every PR touching order-execution flow

Pair-programmed with devs on complex state issues

Wrote critical path code for live order book

Ran TypeScript strict mode rollout across both apps; fixed breaking changes with team

Present at daily standups and retros for frontend squads

3a. How the architecture worked:

Backend delivered JSON schemas defining dashboard layout, widget types, and data bindings

Reusable component library (40 components) published as private npm package; Frontend renderer mapped JSON types to registered component factories via ComponentRegistry; Lazy-loaded widgets via dynamic import(); routes impacted by guards/security (authentication/ JWT token/ role levels - Cloud based ID system)

Shared vanilla JS Data Adapter transformed API responses into flat key-value store, decoupling UI from API structure

Angular Web-worker. Clustering/chunking for MapLibre renders to improve load time

Use of Kafka events/queues for calls to the models, with polling websockets, to avoid rendering delays

Adopted context/provider, and Redux/rxjs/signals to remove prop-drilling

3b) Key decisions:

Chose payload-driven rendering over building separate dashboards per client

Decided to build Data Adapter layer rather than forcing API changes for UI needs

Chose private npm registry for shared library rather than copy-paste or mono-repo

Opted for Angular (type-safety critical)

Chose Stencil etc. for chart widgets to work in both frameworks

Angular Web-worker. Clustering/chunking for MapLibre renders to improve load time

Use of Kafka events/queues for calls to the models, with polling websockets, to avoid rendering delays

Adopted Redux/rxjs to remove prop-drilling

4. AI adoption

Ran a 2-week pilot with volunteers, then had them demo time saved at sprint retro

Integrated Copilot/Claude into IDE via required VS Code extension pack

Built internal prompt library for SDLC tasks (PR descriptions, migration scripts, unit tests, error handling)

AI-generated PR summaries auto-commenting on every PR, so team saw value without opting in

Set up pre-commit hooks with linting/security scanning so devs got immediate feedback

Made AI tooling part of onboarding for new joiners

Held workshop weekly for troubleshooting / help