QualityHub
An enterprise-grade internal engineering quality/productivity platform that consolidates quality signals, defect tracking, accessibility compliance, and incident metrics — serving 50+ engineering teams
Overview
QualityHub is an internal engineering quality productivity platform built to eliminate manual reporting/metrics gathering across Walmart Global Tech. The application consolidates 137 quality signals across 11 engineering domains, serving 50+ teams with 5 automated report types — using React 18, TypeScript, Node.js, D3.js for visualization, and Cosmos DB for persistence. The platform processes quality signals from multiple sources, aggregates data from Cosmos DB tables, generates visual reports and dashboards — serving as the single source of truth for engineering quality and release readiness across all Walmart Fulfillment teams.
Problems
Engineering teams spent significant time every day preparing:
- Engineering teams spent hours collecting test status, bug summaries, and quality metrics from multiple tools
- Each team had their own spreadsheet-based tracking with inconsistent metrics and no standardization
- No real-time visibility into accessibility compliance across iOS, Android, and Web platforms
- The manual process was error-prone — copy-paste errors in reports led to incorrect release decisions
- Stakeholder communication required manual email composition with no template consistency
- Quality trends were invisible — no historical data to identify patterns or regressions over time
Quality data was scattered across dozens of disconnected tools with no unified view, making data-driven release decisions impossible at scale.
Solutions
- A unified dashboard consolidating 137 quality signals from Jira, Confluence, GitHub, and accessibility scanners into a single view
- Real-time D3.js visualizations with interactive charts for defect trends, test coverage, and compliance metrics
- Automated Cosmos DB-backed data pipelines refreshing metrics every 30 minutes from all connected sources
- Configurable alert thresholds that notify teams via Slack and email when quality gates are breached
- Role-based views — engineers see team metrics, managers see org roll-ups, VPs see executive summaries
- One-click PDF/HTML report generation for stakeholder distribution with consistent branding
- Historical trend analysis with quarter-over-quarter and sprint-over-sprint comparison capabilities
Architecture
Omni Signals Architecture — Multi-Source Quality Aggregation
Tech Stack
Frontend
Backend
Data & Storage
Infrastructure
Key Features
Quality Metrics Dashboard
Unified view of all engineering quality signals — test pass rates, defect density, code coverage, and accessibility scores with real-time updates.
Accessibility Analytics
WCAG compliance tracking across iOS, Android, and Web with historical trends, violation categories, and team-level scoring.
Automated Email/Slack Alerts
Configurable quality gate notifications with severity-based routing — critical issues to Slack instantly, summaries via scheduled email.
API Data Sync Engine
Background workers pulling data from 11 engineering data sources every 30 minutes with circuit breakers and retry logic.
Team Performance Scores
Composite engineering quality scores with weighted metrics, peer benchmarking, and improvement trend indicators.
Incident Dashboard
Real-time incident tracking with severity distribution, MTTR/MTTA metrics, and post-incident quality impact analysis.
D3.js Interactive Charts
Custom-built D3.js visualizations with drill-down, zoom, tooltip details, and exportable SVG charts for presentations.
Dynamic Configuration
Admin panel for managing team mappings, metric weights, alert thresholds, and report schedules without code changes.
My Contributions
Built the Accessibility Dashboard — full-stack, real-time WCAG compliance tracking across iOS, Android, and Web platforms
Developed job utility enabling REST API-driven automated data synchronization across 11 engineering data sources
Designed Cosmos DB partition strategy optimizing query performance — reduced RU consumption by 60% across hot paths
Architected D3.js visualization layer with reusable chart components handling 50K+ data points with smooth interactions
Implemented enterprise SSO with Okta integration — token refresh, session management, and role-based access control
Built custom ETL pipeline aggregating Jira, GitHub, and accessibility scanner data into normalized Cosmos DB collections
Automated Playwright end-to-end tests covering critical dashboard journeys with visual regression detection
Designed alert engine with configurable thresholds, rate limiting, and escalation policies for quality gate breaches
Implemented Redis caching layer reducing average API response time from 2.5s to 180ms for dashboard endpoints
Led migration from REST to GraphQL for complex dashboard queries — reducing over-fetching by 70%
Built PDF/HTML report generation service using Puppeteer with custom branded templates for stakeholder distribution
Integrated Kubernetes HPA and pod disruption budgets ensuring 99.9% uptime during peak usage periods
Engineering Challenges
D3.js Performance with Large Datasets
Rendering 50K+ data points in interactive D3.js charts caused frame drops and memory issues. Implemented virtual scrolling for tables, canvas-based rendering for scatter plots, data decimation algorithms for time-series, and Web Workers for heavy computations — achieving 60fps even with full datasets loaded.
Cosmos DB Partition Strategy
Initial design with team-id as partition key caused hot partitions during sprint boundaries when all teams report simultaneously. Redesigned with composite partition keys (team-id + date-range) and implemented change-feed processors for cross-partition aggregations, reducing RU consumption by 60%.
Real-time Data Freshness vs. Cost
Polling 11 data sources every minute was cost-prohibitive and hit API rate limits. Implemented a tiered refresh strategy — critical metrics every 5 minutes, standard metrics every 30 minutes, historical data daily — with webhook support for instant updates when available.
Enterprise SSO + Multi-Tenant Isolation
Supporting 50+ teams with different permission levels required fine-grained RBAC. Built a hierarchical permission model where team leads see their team's data, directors see their org, and VPs get executive roll-ups — all from a single API with query-time filtering based on JWT claims.
Cross-Browser D3.js Rendering Consistency
D3.js SVG rendering varied significantly across Chrome, Safari, Firefox, and embedded Slack previews. Built a custom rendering abstraction that normalizes font metrics, color spaces, and interaction events across browsers while maintaining pixel-perfect chart output.
Container Security & Compliance
Enterprise deployment required passing Walmart's container security scanning, which flagged dozens of CVEs in base images. Established a hardened Node.js base image pipeline with automated weekly rebuilds, vulnerability scanning in CI, and zero-CVE policy for production containers.
Lessons Learned
Design for evolving configurations, not static data
Team structures change quarterly, metrics get added/removed, thresholds shift. Building configuration-first with hot-reload capabilities meant zero downtime for organizational changes.
D3.js custom visuals pay off, but start with charting libraries
Started with Recharts for rapid prototyping, then progressively replaced with custom D3.js only where standard charts couldn't express the data. This hybrid approach saved months of development time.
Partition key design in Cosmos DB matters more than indexing
Spent weeks optimizing indexes when the real bottleneck was cross-partition queries from poor partition key choice. Redesigning partitions gave 10x improvement vs. 2x from index tuning.
Start-based query middleware catches most performance issues
Adding query timing middleware that logs slow queries (>500ms) to a dashboard caught 90% of performance regressions before users reported them. Monitor your monitors.
Enterprise auth integration requires early planning
Retrofitting Okta SSO into an existing app with session-based auth required touching every API route. Starting with token-based auth from day one — even with mock tokens — would have saved weeks of refactoring.
Incrementally validate with power users
Shipping to 3 champion teams first, iterating on their feedback for 2 sprints, then rolling out org-wide. Those champions became internal advocates who trained other teams, reducing support burden by 80%.