Google Play Store Live
Mobile Application · Health & Biometrics
Vividly — Premium Privacy-First Health & Telemetry Platform
An offline-first health and wellness application featuring custom glassmorphic vitals telemetry, metabolic engines, macro nutrition tracking, and gamified quest rewards.
0ms
JSI MMKV Read
Replaced slow 230ms async storage
60 FPS
Frame Rate Locked
Shallow selector Zustand architecture
100%
Data Integrity
HealthKit & Connect duplicate-free sync
Sandbox
Local Privacy
Zero unconsented cloud telemetry leaks
// Core Technologies
Engineered Stack & Libraries
React Native
Expo SDK 56 Runtime
Expo Router v56
File-Based Stack Layouts
Zustand v5
useShallow Selector Streaming
MMKV Storage
Zero-Latency JSI Caching
Google Health Connect
Native Android Vitals Telemetry
Apple HealthKit
Native iOS Biometric Syncing
Supabase Auth & DB
Encrypted Cloud Backup
Reanimated 4.3
Fluid Micro-Animations
// Architectural Strategy
Clean & Headless Architecture Pattern
Shallow Selector State Streaming
Zustand slices stream only to components explicitly requesting data changes (via useShallow). Logging a glass of water updates the hydration tile without triggering re-renders across the dashboard.
Hardware Telemetry Sync Coordinator
Native background service that aggregates step counters, active calories, and heart rate telemetry from Google Health Connect & Apple HealthKit with UUID deduplication.
Offline-First JSI Storage Layer
High-speed MMKV memory-mapped storage delivers instantaneous state persistence, queuing mutations offline and synchronizing to Supabase with TLS 1.3 encryption when connected.
// Deep Dive Systems
Core Product Capabilities
Dashboard Engine
High-Performance Modular Dashboard
Customizable widget grid system allowing users to toggle cards, reorder health metrics, and experience smooth spring transitions during layout reordering.
Biometrics
Multi-Point Vital Statistics Engine
Visualizes heart rate (BPM), blood pressure (Systolic/Diastolic), blood glucose (mg/dL), and blood oxygen (SpO2 %) with dynamic normal range indicators across 7-day and 30-day windows.
Nutrition
Scaled Macro & Nutrition Intake Engine
Segmented food intake logger (Breakfast, Lunch, Dinner, Snacks) with automated macro split goals: Protein (30%), Carbohydrates (45%), and Fats (25%).
Metabolism
Mifflin-St Jeor Metabolic Engine
Calculates precise Body Mass Index (BMI), Basal Metabolic Rate (BMR), and Total Daily Energy Expenditure (TDEE) based on physiological variables and activity multipliers.
Gamification
Gamified Quests, Streaks & XP Rewards
Converts active telemetry milestones (steps, hydration, calories burned) into experience points (XP), daily check-in streaks, and unlockable theme tokens.
// Technical Case Studies
Challenges & High-Impact Optimizations
The Monolithic State Performance Bottleneck
Impact: <30 FPS → 60 FPS Locked
The Engineering Problem
In initial architectures, logging hydration or logging food re-rendered the entire root DOM tree, dropping frame rates below 30 FPS and causing severe input lag.
The Architectural Solution
Refactored state layers to Zustand selector hooks with useShallow. Decoupled widgets so that data changes stream exclusively to subscribed tiles while the rest of the application remains idle.
Offline-First Telemetry Sync & Deduplication
Impact: 100% Zero-Data-Loss Sync
The Engineering Problem
Users in low-connectivity environments lost health logs, and background device sync often pushed duplicate entries into cloud databases.
The Architectural Solution
Implemented MMKV key-value caching layer with unique UUID event hashing. Mutations queue locally and synchronize gracefully to Supabase with automatic conflict resolution upon network recovery.
// Production Implementation
Verified Source Code Showcase
src/features/bmi/hooks/useBMIScreen.ts
TYPESCRIPT
// Zustand Shallow Selector Hook for 60 FPS Telemetry Execution
import { useMemo } from "react";
import { useFitnessStore } from "@/store/fitnessStore";
import { useShallow } from "zustand/react/shallow";
import { getBMIResult, getIdealWeightRange } from "../utils/bmiCalculator";
export function useBMIScreen() {
const store = useFitnessStore(
useShallow((state) => ({
user: state.user,
weightLogs: state.weightLogs,
stepsCount: state.stepsCount,
waterLogs: state.waterLogs,
setUser: state.setUser,
}))
);
const { user } = store;
const currentBMI = useMemo(() => {
return user.weight / ((user.height / 100) * (user.height / 100));
}, [user.weight, user.height]);
const bmiResult = useMemo(() => {
return getBMIResult(user.weight, user.height);
}, [user.weight, user.height]);
const idealRange = useMemo(() => {
return getIdealWeightRange(user.height);
}, [user.height]);
return { user, currentBMI, bmiResult, idealRange };
}