CASE STUDY
TrustClarity: Buyer Portal Rebuild — Search-First TC 2.0 Platform
IMPACT
400+ Storybook stories across 130+ components (from 11), WCAG 2.1 AA remediation, RFQ flow with server-side credential fix, and 1,533 lines of storefront code removed for a search-first pivot
React/Next.js rebuild of TrustClarity's core buyer workflows — Figma-to-production, WCAG 2.1 AA, Storybook/Chromatic visual gates, and a search-first architecture that replaced the per-org storefront layer.
IMPACT AT A GLANCE
400+
Stories
130+
Components
1,533
LOC cut
TIMELINE
May–July 2026 (TC 2.0 buyer portal)
ROLE
Full-Stack Frontend Engineer — buyer portal rebuild, design-system fidelity, accessibility, and visual regression gates
TEAM
TrustClarity platform engineering
THE CHALLENGE
TrustClarity's TC 2.0 buyer portal needed a React/Next.js rebuild of core buyer workflows with Figma-level fidelity, WCAG 2.1 AA coverage, and hard visual-regression gates — while the product pivoted from per-org storefronts to a search-first experience. The surface also carried accessibility gaps, divergent add-to-cart rules across listing UIs, and an RFQ path that had exposed third-party credentials in the browser.
THE RESULTS
- Scaled Storybook/Chromatic visual testing from an 11-story baseline to 400+ stories across 130+ components
- Completed an 8-frame Figma design-token sync — Plus Jakarta Sans + Inter typography, category browse UI, and a footer rewrite from 3-column to 5-column
- Deleted the per-org storefront layer (1,533 lines) to lock in search-first architecture ahead of the component-library migration
- Shipped request-for-quote workflow; moved third-party writes server-side (closed credential exposure in the browser); unified buyability rules across listing surfaces; 70 unit tests (up from 46)
- WCAG 2.1 AA remediation — keyboard-nav comboboxes, ARIA form-error association, radiogroup semantics, skip links; patterns codified into shared accessibility standards; 575 lines of dead code removed
- Built buyer profile from Figma and fixed a silent auth-redirect bug so deep links survive login; 170/170 tests passing
THE SOLUTION
Rebuilt TrustClarity's buyer portal as a search-first React/Next.js surface with Figma-to-production delivery, Storybook/Chromatic as hard visual gates, and WCAG 2.1 AA patterns codified into shared engineering standards. Removed the multi-tenancy storefront layer before the component-library migration, unified buyability across listing surfaces, and closed the RFQ credential exposure by moving third-party writes server-side.
TECHNOLOGIES USED
- React
- Next.js
- Vite
- Storybook
- Chromatic
- TypeScript
- shadcn/ui
- Figma
Project Details
What blocked a search-first buyer portal?
TrustClarity needed TC 2.0 buyer workflows — search, listing CTAs, request-for-quote, and auth-protected account surfaces — delivered as a modern React/Next.js app with production-grade design fidelity and accessibility. The prior per-org storefront model conflicted with a search-first product direction. Visual coverage was thin (an 11-story Storybook baseline), accessibility semantics were incomplete, add-to-cart rules diverged across listing UIs, and the RFQ path had exposed third-party credentials in the browser.
How was the portal rebuilt with Figma fidelity and hard quality gates?
Visual testing scaled to 400+ stories across 130+ components, with Chromatic as a hard PR gate so component drift showed up before it reached buyers. An 8-frame Figma design-token sync drove typography (Plus Jakarta Sans + Inter), category browse UI, and a footer rewrite from 3-column to 5-column, with token normalization so Chromatic baselines matched the TC 2.0 design system.
The per-org storefront surface was no longer part of the product design. Deleting 1,533 lines removed maintenance burden and Storybook noise before the component-library migration, locking the architecture to search-first routes. The RFQ workflow moved third-party writes to a server-side route so credentials never reached the browser. Listing and product-detail CTAs converged on shared buyability rules, with unit coverage growing from 46 to 70 tests. Accessibility remediation covered keyboard-navigable comboboxes, ARIA form-error association, radiogroup semantics, and skip links — patterns written into shared accessibility standards so later work reused the same rules.
What shipped for buyers and engineering quality?
The buyer profile page was built from Figma (welcome banner, order history, account info, addresses). Mapping protected access surfaced a silent auth-redirect bug — unauthenticated deep links lost their return path and dumped users on the homepage after login. Consolidating redirect handling fixed every protected route; suite status at that milestone was 170/170 tests passing. WCAG 2.1 AA patterns and Chromatic gates remain the delivery bar, and 575 lines of dead story-only code were removed in the same accessibility pass.
The live marketplace reflects that search-first direction — category navigation, promotional merchandising, and a buyer search entry point on the public homepage:
MORE WORK
OTHER CASE STUDIES
TrustClarity: Orchestrating Google Jules Multi-Agent Delivery on the Buyer Platform
IMPACT:
Four signed merges into develop covering AGENTS.md plus three UAT fixes; one additional thumbnail/search fix with a TypeScript no-suppression governance lesson; durable signed-commit / pull-and-re-PR playbook confirmed across later Jules rounds
Production orchestration of Google Jules on the TrustClarity buyer platform — first and second UAT rounds, signed-commit re-PR playbook, prompt discipline, and AGENTS.md governance that kept parallel cloud sessions safe to merge.
TrustClarity: Supply-Chain Security Analysis and CI/CD Hardening
IMPACT:
14 of 20 repositories remediated before TrustClarity production; 3 attack vectors eradicated; SHA-pinned reusable security-scan workflow rolled out to 20 repos; later SHA-pin and merge-base invisibility controls shipped
Org-wide supply-chain security analysis for TrustClarity — malicious code found in 14 of 20 repositories across three attack vectors, remediated in repos before it reached TrustClarity's own production environment, followed by a SHA-pinned reusable CI/CD security pipeline and later hardening controls.
TrustClarity: Centralized AI Governance Platform for Multi-Repo Engineering
IMPACT:
Centralized AI governance with ~20 reusable skills, 5 specialized agents, shared sync tooling, Trail of Bits registry growth (10→17), and a 15-repo config-payload forensic scan
Built TrustClarity's centralized AI governance platform — reusable AI skills, specialized agents, shared sync tooling, Trail of Bits skill ingestion, and an in-house config-payload detector used in a 15-repo forensic scan.