03 — Case Studies
Selected work, in depth
Real problems I've owned in production — how I framed them, what I tried, and what actually shipped.
Case study 01
PICS — real-time voice monitoring with role-scoped compliance
Problem
Facilities needed a compliant way to monitor and audit prisoner calls in real time, with strict separation between Super Admin, Admin, and Prisoner roles — and reliable reporting for regulators.
Approach
- →Architected a multi-role platform on Next.js App Router with Server Components + SSR so first paint stays fast on the low-end devices used in the field.
- →Streamed calls live over WebSockets with Twilio voice integration; every action (call, role change, export) flows through an audit log.
- →Built an RBAC engine with granular permissions behind a JWT-secured REST API, with media on AWS S3 backed by MongoDB.
- →Designed accessible analytics dashboards with Recharts — date-range filtering, per-role views, and xlsx export for compliance reporting.
Outcome
Shipped a production-ready system with end-to-end TypeScript, audited access paths, and compliance-first UX — role separation, reporting, and real-time monitoring all in one surface.
Next.js (App Router)React 19TypeScriptWebSocketsTwilioNode.jsMongoDBAWS S3Recharts
Case study 02
Rendering 200K rows without dropping a frame
Problem
Analysts at IVP needed to scroll, sort, and filter 200K+ trading records in real time. The legacy grid stalled the main thread for seconds and made bulk edits impractical.
Approach
- →Switched to AG Grid with row + column virtualization tuned to viewport height, not row count.
- →Pushed cell renderers behind React.memo and stable key generation to stop avoidable re-renders.
- →Moved derived calculations off the render path with useMemo + selector composition in Redux Toolkit.
- →Replaced eager fetches with lazy/paginated loading and deferred non-visible column hydration.
Outcome
60% improvement in interactive render performance, scrolling stayed at 60fps under full data load, and analysts could finally edit at the speed they thought.
ReactTypeScriptAG GridRedux ToolkitWebpack
Case study 03
From 0% to 90% test coverage in a live codebase
Problem
The platform had no automated tests when I joined. Every release was a vibe-check, and refactors were avoided because nothing would catch a regression.
Approach
- →Stood up Jest + React Testing Library and wired it into CI as a non-blocking signal first, then a gate.
- →Wrote tests around the highest-traffic flows before touching low-risk code, so coverage growth tracked actual confidence.
- →Built shared test utilities (render-with-providers, fixture factories) so new tests cost minutes, not hours.
- →Coached the team via PR reviews to make tests a default, not a chore.
Outcome
Reached 90% coverage with the team, unlocked safe refactors, and visibly cut the regression-bug rate per release.
JestReact Testing LibraryTypeScriptCI/CD
Case study 04
A component library that teams actually adopt
Problem
Multiple product teams were rebuilding the same buttons, modals, and form primitives — slightly differently each time. Design drift and bug duplication followed.
Approach
- →Defined strict TypeScript interfaces with discriminated unions so misuse fails at compile time, not runtime.
- →Kept the API surface small; favored composition over a wall of props.
- →Documented usage with copy-pasteable examples, not a 40-page wiki nobody reads.
- →Set up SonarQube gates and Jest snapshots so regressions in shared components surface in one PR review, not three sprints later.
Outcome
25% less duplicated UI code across teams and noticeably faster feature delivery on shared primitives.
ReactTypeScriptTailwindJestSonarQube
