back
~/projects-hub/projects/life-tracker-analytics
Active
Life Tracker Analytics icon
Data VisualizationAnalyticsPersonal Tool
React 19TypeScriptTailwind CSS v4Dexie.jsremoteStorage.jsRecharts

Life Tracker Analytics

Privacy-focused Progressive Web App (PWA) to track and analyze life metrics and daily habits through local-first data visualizations.

GitHubView App

The Problem

Understanding mathematically how daily habits impact quality of life, without handing over sensitive personal data to proprietary BaaS.

The Solution

A custom analytical, local-first PWA dashboard that cross-references metrics locally using Pearson correlation with minimum-sample-size guards (N≥5) and Cohen's-d effect-size scoring to surface statistically meaningful, strictly associative (never causal) insights, combining Dexie.js persistence with BYOD (Bring-Your-Own-Data) cloud sync.

Key Learnings

  • Granular Entity Synchronization: Implemented conflict-safe entity merge algorithms to maintain multi-device consistency without proprietary backend servers.
  • Type-Safe Local Persistence with Dexie.js: Unified relational IndexedDB storage with TypeScript for reactive and instantaneous browser queries.
  • BYOD Cloud Architecture: Integrated remoteStorage.js to ensure complete user sovereignty and ownership of health and habits data.
  • Meaningful Data Visualization: Built interactive visualizations with Recharts to uncover real multivariate correlations without statistical distortion.

Local-First Architecture & BYOD Sync

Life Tracker Analytics is built on a strict Local-First paradigm, ensuring that users retain absolute sovereignty over their personal habit and health data without relying on a centralized cloud backend.

  • In-Browser Relational Engine: Powered by Dexie.js on top of IndexedDB with type-safe TypeScript schemas, enabling sub-millisecond offline analytical queries.
  • BYOD (Bring Your Own Data) Sync: Optional connection to open personal servers via remoteStorage.js, handling multi-device sync and clock-drift conflicts through deterministic merge algorithms.

Analytics Pipeline & Data Visualization

  • Client-Side Correlation Analysis: In-memory analytics pipeline processing time-series data to compute statistical correlation matrices between disparate quantitative metrics (sleep quality, focus hours, mood).
  • Reactive Rendering with Recharts: High-performance charting layer optimized for React 19 and Tailwind CSS v4, delivering fluid 60 fps interactions across thousands of historical data points.