Projects

Problem

Warehouse staff using UNITE-APP work in environments where wifi is intermittent and cellular is unreliable. Any in-flight UI state lost during a disconnect translated into restarted workflows, double-scans, and operator frustration — directly impacting fulfillment SLAs.

Approach

• Architected an offline-first React PWA using service workers as the network boundary, IndexedDB as the durable state store, and a background-sync queue for write replay.
• Designed a typed cache layer on top of React-Query so reads served from cache first, then revalidated — collapsing perceived latency on slow links.
• Established WCAG-compliant component primitives in a shared library so 5+ MFE squads inherit accessibility and visual consistency by default.
• Codified TDD and code-review standards with the team to harden the regression surface before each release.

Outcomes

• • 50K+ warehouse operators unblocked in low-connectivity environments
• • Lighthouse score 60 → 90 (+30 points)
• • Data-layer load time reduced by 20%
• • Deployment time down 13%, user engagement up 10% via reusable design primitives

Problem

QiDZ's 'Rebranding to the QApp' family-activities product had grown into a tangled SPA with slow first paint, poor SEO discoverability, and divergent UX between web and mobile. Long TTFB was costing organic traffic; legacy code was slowing every roadmap commitment.

Approach

• Re-architected the platform around a multi-tenant Next.js application with per-tenant routing, theming, and SSR-cached content.
• Modernized legacy modules into scalable, typed React + Redux Toolkit slices — paying down debt continuously, not in a stop-the-world rewrite.
• Unified the web and React Native mobile surface around a shared design system and shared product primitives.
• Led a team of 5 engineers, mentoring juniors on advanced React patterns, design-system thinking, and product-engineering ownership from Figma to production.

Outcomes

• • TTFB improved 33% (2.4s → 1.6s) — unlocking SEO discoverability and retention
• • 600K+ active users now served by the unified multi-tenant architecture
• • Cross-platform UX consistency between web and React Native mobile
• • Team velocity compounded — junior engineers shipping production features independently

Problem

Kuyua needed a high-conversion marketing presence and the ability to iterate on landing-page content without an engineer in the loop. They also needed long-term frontend foundations: a reusable component library, accessible patterns, and pixel-perfect cross-device fidelity that could scale across future product surfaces.

Approach

• Led delivery of the Next.js marketing website end-to-end and built a custom React-based CMS dashboard so the team could publish landing-page and content updates dynamically.
• Designed and shipped a scalable design system and reusable component library — fully documented in Storybook — to drive consistency, speed, and maintainability across teams.
• Partnered closely with UI/UX to translate Figma prototypes into responsive, production-ready interfaces with high design fidelity, strict accessibility (WCAG/ARIA), and pixel-perfect parity across mobile, tablet, and desktop.
• Worked directly with backend engineers to define API contracts, optimize performance, and ensure clean, maintainable data flow between the CMS, marketing site, and downstream consumers.
• Collaborated with Product Managers and Product Owners to translate complex business logic into intuitive, user-focused front-end solutions.

Outcomes

• • Marketing team now ships landing-page changes independently — eliminating engineering bottlenecks on content updates
• • Storybook-documented design system adopted across teams — consistent visual language and faster onboarding for new engineers
• • Pixel-perfect, fully responsive delivery across mobile / tablet / desktop with strict accessibility compliance
• • Robust API contracts that enabled parallel frontend / backend delivery and easier long-term maintenance

Problem

Client businesses needed to make sense of large, heterogeneous datasets — user data and whatever other data sources were collected and fed into the platform. The raw data was impossible to reason about without a way to explore it visually, slice it across dimensions, and read the same information as a map, a table, or a chart. The frontend had to stay dataset-agnostic and hold up under high-density, filter-heavy interaction.

Approach

• Owned the frontend end-to-end, architecting it as a modular monolith — 13 self-contained modules, each structured like its own React app — so features could evolve independently while shipping from one cohesive, consistent codebase.
• Built a shared design-system package and a library of reusable components and reusable logic, eliminating duplication across the 13 modules and keeping the UI consistent as the platform grew.
• Separated the logic layer from the UI layer so data-fetching, transformation, and business rules stayed decoupled from presentation — and independently testable.
• Rendered each dataset across multiple synchronized views — interactive Leaflet and Google Maps for geospatial data, high-density grids via ReactDataGrid, and D3 / Recharts charts — so the same data reads as a map, a table, or a chart, all driven by a composable Redux-managed filtering system and React Query (TanStack) server-state caching.
• Invested in automation and testing layers — component scaffolding via Plop.js, coverage via React Testing Library — and applied accessibility and performance best practices throughout the high-density UI.
• Integrated Sentry with structured error logging for real-time error tracking and faster production diagnosis, consuming analysis-ready data from a GoLang microservices backend (SQL, MongoDB, Elasticsearch) maintained by a dedicated backend team.

Outcomes

• • A dataset-agnostic B2B dashboard that adapts to any data passed into it — not tied to a single source
• • 13-module modular monolith on a shared design system — reusable components and logic that eliminated duplication and kept the UI consistent
• • One dataset, multiple synchronized views — Leaflet / Google Maps, data grids, and D3 / Recharts charts, all driven by real-time composable filters
• • Accessible, performant, Sentry-monitored frontend with a decoupled logic layer and automated testing — delivered in parallel with a GoLang microservices backend