HealthTrack Dashboard
CompletedHealth & Fitness / HealthTech

HealthTrack Dashboard

Unified health insights from 12+ wearable brands — real-time, personalized, actionable

A real-time health monitoring dashboard for VitalSync, a fitness technology startup. The platform aggregates data from 12+ wearable device brands (Fitbit, Apple Watch, Garmin, Whoop, Oura, Samsung Galaxy Watch, and more) into a unified dashboard with interactive D3.js visualizations, personalized health insights powered by a lightweight ML model, and automated weekly health reports. Currently serving 8,000+ users with 2M+ daily data points.

Role: Full-Stack Developer & Data Pipeline Architect
Client: VitalSync
Team: 2-person team (1 full-stack dev, 1 ML engineer for insights model)
Started: November 2024
Completed: April 2025
12+
Devices Supported
Fitbit, Apple Watch, Garmin, Whoop, Oura, Samsung, Polar, Xiaomi, COROS, Amazfit, Withings, Google Fit
<500ms
Data Latency
From device sync to dashboard update via WebSocket push
78%
User Retention
30-day retention rate — 3x higher than the industry average of 25%
2M+
Daily Data Points
Processing heart rate, steps, sleep, activity, and vitals for 8K+ users

The Challenge

VitalSync's users owned an average of 2.3 wearable devices each, but had no way to see their complete health picture in one place. A runner might track workouts on Garmin, sleep on Oura, and heart rate on Apple Watch — each app siloed in its own ecosystem. VitalSync's initial prototype was a basic table view that pulled data from 3 device APIs on a 30-minute cron job. It was slow, frequently broke when APIs changed, couldn't handle more than 500 concurrent users, and provided no actionable insights — just raw numbers. The startup had raised a $1.2M seed round and needed a production-quality platform to demonstrate to investors and onboard their first 10,000 users. They needed interactive visualizations that made complex health data understandable at a glance, real-time sync so users could see their morning workout data immediately, and personalized insights that went beyond "you walked 8,000 steps today" to surface meaningful health trends.

The Approach

I architected a three-layer data pipeline: ingestion, processing, and presentation. The ingestion layer uses device-specific adapter modules behind a unified interface — each adapter handles OAuth token management, API rate limiting, data normalization, and error recovery for its device brand. Data flows through a Redis-backed message queue into the processing layer, which runs normalization (converting Fitbit's "active minutes" into a standardized activity score that's comparable to Garmin's "intensity minutes"), deduplication (when the same workout is recorded by both a watch and a phone), and enrichment (calculating derived metrics like recovery scores and sleep efficiency). The presentation layer is a Next.js app with 8 interactive D3.js dashboard views. Every chart supports drill-down (click a daily bar to see hourly breakdown), time-range selection (7d/30d/90d/1y), and device comparison mode. WebSocket connections push real-time updates — when a user finishes a workout on their Garmin, the dashboard updates within 500ms without refresh. The ML insights engine is a Python microservice running a lightweight random forest model trained on anonymized user data to predict recovery needs and identify anomalous patterns (like resting heart rate spikes that might indicate illness).

Key Features

Real-time data sync via WebSocket with <500ms latency from device to dashboard
Interactive D3.js charts with drill-down, time-range selection, and device comparison
12+ wearable device integrations (Fitbit, Apple Watch, Garmin, Whoop, Oura, Samsung, etc.)
Personalized health insights powered by ML-based trend analysis and anomaly detection
Goal tracking with smart notifications and streaks (steps, sleep, activity, hydration)
Automated weekly health reports with PDF export and email delivery
Data normalization engine that makes cross-device metrics comparable
Privacy-first architecture: all health data encrypted at rest with user-controlled data deletion
Responsive dashboard optimized for mobile, tablet, and desktop viewing
Scope:8 interactive dashboard views, real-time WebSocket data pipeline, 12 device adapter modules, ML insights microservice, automated reporting engine, admin panel for device management

Built With

Next.jsD3.jsNestJSPostgreSQLWebSocketRedisPythonTailwindCSS

Challenges & Solutions

Challenge

Each wearable API had wildly different data formats (Fitbit returns "active minutes" as integers, Garmin uses "intensity minutes" with decimal precision, Apple Watch exports "exercise minutes" nested in a HealthKit XML structure), different rate limits (50-500 req/min), different OAuth flows (OAuth 1.0a for some, OAuth 2.0 for others), and different webhook reliability

Solution

Built an adapter pattern with a strict TypedAdapter interface that each device module implements. Each adapter handles its own OAuth refresh, rate limiting (using a sliding window counter in Redis), response parsing, and error recovery. A central orchestrator manages adapter health checks and automatic failover. When an API changes, only the affected adapter needs updating — the rest of the pipeline is unaffected

Challenge

D3.js charts with 90 days of minute-level heart rate data (130K+ data points per user) caused the browser to freeze for 3-5 seconds during rendering, making the dashboard feel sluggish

Solution

Implemented progressive data loading with three resolution tiers: hourly averages for the 90-day view (2,160 points), 15-minute averages for weekly view (672 points), and full-resolution for daily view. Data downsampling happens server-side using the Largest-Triangle-Three-Bucket algorithm, which preserves visual shape while reducing point count by 95%. Combined with D3's enter/update/exit pattern and requestAnimationFrame for smooth transitions

Challenge

Users connecting the same device type to multiple accounts (e.g., family sharing an Apple Watch) or wearing multiple devices during the same workout caused duplicate and conflicting data entries

Solution

Built a deduplication engine that uses a combination of timestamp proximity (within 2 minutes), activity type matching, and metric similarity scoring (heart rate within 5% variance) to identify overlapping data. Conflicting entries are merged using a confidence-weighted algorithm that prioritizes the device with higher sampling frequency for that metric type

Gallery

Interactive health dashboard with D3.js heart rate visualization
Multi-device data comparison with wearable sync status
Personalized health insights and weekly report generation

Project Timeline

Device Integration Layer

Built adapter modules for 12 wearable APIs with OAuth management, rate limiting, and data normalization. Established unified health data schema.

Due: Dec 15, 2024Completed: Dec 12, 2024

Real-Time Data Pipeline

Implemented WebSocket-powered data sync, Redis message queue, deduplication engine, and derived metric calculation. Achieved <500ms end-to-end latency.

Due: Jan 20, 2025Completed: Jan 18, 2025

Interactive D3.js Dashboard

Created 8 interactive dashboard views with drill-down, time-range selection, and device comparison. Implemented progressive data loading for large datasets.

Due: Feb 28, 2025Completed: Feb 25, 2025

ML Insights & Reporting

Integrated Python ML microservice for health trend predictions and anomaly detection. Built automated weekly reports with PDF export and email delivery.

Due: Apr 10, 2025Completed: Apr 8, 2025
TypeScriptTestedAccessibleResponsiveHigh PerformanceSecure

Related Projects

FinPay — Fintech Payment Gateway
Completed

FinPay — Fintech Payment Gateway

A PCI DSS Level 1 compliant payment processing platform built for PayStream, a fintech startup serving small and mid-size e-commerce merchants. The platform handles multi-currency payment processing across 15 currencies, real-time transaction monitoring with custom fraud scoring, automated daily reconciliation, and a merchant self-service onboarding portal. Currently processing $2M+ monthly transaction volume with a 99.99% success rate and 98.5% fraud detection accuracy.

$2M+ monthly volume with 99.99% success rate and real-time fraud detection

ReactTypeScriptNestJSPostgreSQL+4
DevCollab — Real-Time Code Review Platform
Completed

DevCollab — Real-Time Code Review Platform

A real-time code review and pair programming platform built for distributed engineering teams. DevCollab combines Google Docs-style collaborative editing with GitHub PR workflows, live cursors, inline threaded comments, peer-to-peer video chat via WebRTC, and session recording for async review. The platform reduced code review turnaround from an average of 48 hours to under 2 hours for CodeBridge's 40+ person engineering team, and now serves 120+ active teams with 8,000+ review sessions monthly.

Code review turnaround from 48 hours to under 2 hours — for teams that ship fast

Next.jsTypeScriptSocket.IOWebRTC+4
SaaS Analytics Platform
In Progress

SaaS Analytics Platform

A multi-tenant product analytics platform built as an affordable alternative to Amplitude and Mixpanel for mid-market SaaS companies. The platform ingests 50M+ events daily from 500+ business tenants, provides sub-second query responses via ClickHouse, and offers a drag-and-drop dashboard builder with funnel analysis, cohort tracking, and automated reporting. Currently in active development with the event pipeline and core analytics engine complete, and the dashboard builder in its final phase.

Enterprise-grade product analytics at 1/10th the cost — processing 50M+ events daily

ReactTypeScriptNestJSClickHouse+4
HealthTrack Dashboard | Projects | Mursalin's Desk