Features

Track Better packs powerful features into a lightweight Progressive Web App. From structured workout programs to DSA problem tracking, here’s everything you can do.

Workout Tracking

Daily Workout View

The Today tab shows your workout for the current day of the week, automatically selecting from a 7-day split program.

The app uses your device’s date to determine the day of the week and displays the corresponding workout from data.json.

Key Features:

View all exercises for the current day with target sets and reps
Log completed sets by entering reps performed
See real-time progress (e.g., “3/12 sets logged”)
Watch exercise demonstration videos (MP4/GIF) embedded in each card
Get form notes and tips for proper execution

Code Example: Here’s how the app tracks exercise completion:

const addCompletedSet = (exerciseId, reps) => {
  setCompletedExercises((previous) => {
    const dayLog = previous[dateKey] || {};
    const exerciseLog = dayLog[exerciseId] || [];

    return {
      ...previous,
      [dateKey]: {
        ...dayLog,
        [exerciseId]: [...exerciseLog, { reps, loggedAt: new Date().toISOString() }],
      },
    };
  });
};

7-Day Workout Split

Track Better includes a complete weekly program requiring only dumbbells:

Monday - Push Day

Chest, Shoulders, Triceps - 6 exercises including push-ups, overhead press, and lateral raises

Tuesday - Legs

Bulgarian split squats, goblet squats, Romanian deadlifts, and calf raises

Wednesday - Pull Day

Back, Biceps, Core - Bent-over rows, pullovers, superman raises, bicep curls, and planks

Thursday - Recovery

Active recovery with full body stretching, Russian twists, and leg raises

Friday - Full Body

Dumbbell thrusters, reverse lunges, diamond push-ups, and hammer curls

Saturday - Lower/Shoulders

Jump squats, Bulgarian splits, pike push-ups, front raises, and calf work

Sunday - Upper/Arms

Wide-grip push-ups, floor press, renegade rows, concentration curls, bicycle crunches

Exercise Details

Each exercise includes:

Field	Description	Example
Name	Exercise name	”Bulgarian Split Squats”
Sets	Target number of sets	3
Target Reps	Rep range or goal	”12-15 per leg” or “To failure”
Notes	Form cues and tips	”Hold 5kg dumbbells. 2-second pause at bottom.”
Video	Demonstration file	`Bulgarian_Split_Squats.mp4`

Videos are stored locally in /public/workout/{DayOfWeek}/ directory and load even when offline.

Progress Tracking

As you complete sets, the app:

Updates the completion counter in real-time
Displays all logged sets with rep counts
Highlights fully completed exercises with green background
Shows a success page when all sets are complete

// Completion check logic
const isFullyCompleted = logs.length >= exercise.sets;

Calendar View

The Week tab includes an interactive calendar that:

Shows the current month by default
Highlights days when you completed workouts (green gradient)
Lets you navigate to previous/next months
Displays completion status based on workout data

A day is marked as “completed” when you’ve logged at least one set for each exercise in that day’s workout plan.

Calendar Features:

Navigation: Use arrow buttons to browse months
Visual indicators: Green cells with checkmark icons for completed days
Legend: Clear distinction between completed and incomplete days

Workout Schedule

Below the calendar, view the complete weekly schedule:

All 7 days with focus areas (e.g., “Push Day”)
Exercise list for each day with sets and target reps
Quick reference for planning your week

Workout History

Scrollable history showing all past workout logs:

{
  "date": "Fri, Mar 7, 2026",
  "day": "Friday - Full Body Circuit",
  "stats": {
    "totalSets": 12,
    "totalReps": 168
  },
  "exercises": [
    {
      "name": "Dumbbell Thrusters",
      "sets": 3,
      "reps": [15, 15, 14]
    }
  ]
}

Workout history is stored in localStorage with a key format of YYYY-MM-DD. Clearing browser data will erase your history.

Streak Tracking

Build consistency with the streak counter:

Current Streak: Displayed in header with flame emoji (🔥)
Calculation: Counts consecutive days with completed workouts
Motivation: Visual reminder of your commitment

const calculateCurrentStreak = () => {
  const today = new Date();
  today.setHours(0, 0, 0, 0);

  let streak = 0;
  let currentDate = new Date(today);

  for (let i = 0; i < 365; i++) {
    const dateKeyCheck = getLocalDateKey(currentDate);

    if (completedExercises[dateKeyCheck]) {
      streak++;
      currentDate.setDate(currentDate.getDate() - 1);
    } else {
      break;
    }
  }

  return streak;
};

Data Sync & Export

Export Data

Backup your entire workout journey:

Navigate to Settings

Tap the Settings tab in the bottom navigation

Click Export Data

Find the “Sync Your Data” card and tap the green Export button

Save the File

A JSON file is downloaded: workout-journey-YYYY-MM-DD.json

Export includes:

userName: Your display name
exportDate: ISO timestamp of export
completedExercises: Full workout history organized by date
summary: Total days, sets, and current streak

Import Data

Restore or sync data from another device:

Tap the blue Import Data button in Settings
Select a previously exported JSON file
Data is merged with existing records
Confirmation message appears on success

Importing data will overwrite existing records with matching dates. Export your current data before importing to avoid accidental data loss.

DSA Tracker

While not visible in the main navigation (requires code modification to enable), Track Better includes a DSA problem tracker:

Features

Add LeetCode/DSA problems as you solve them
Track daily count of problems solved
Remove individual problems from the list
Clear all problems for the current day

Component: DsaTrackerTab.jsx at src/components/tabs/DsaTrackerTab.jsx:1

To enable DSA tracking, modify BottomNav.jsx to add a tab with id: "dsa" and update App.jsx to render the DsaTrackerTab component.

BMI Calculator

Body Mass Index Calculator

Built into the Settings tab:

Enter Weight

Input your weight in kilograms (e.g., 70)

Enter Height

Input your height in centimeters (e.g., 175)

Calculate

Tap the “Calculate BMI” button to see results

Results include:

BMI value (e.g., 22.9)
Category (Underweight, Normal weight, Overweight, Obese)
Color-coded display for quick reference

const calculateBMI = () => {
  const weight = parseFloat(bmiWeight);
  const height = parseFloat(bmiHeight);
  const heightInMeters = height / 100;
  const bmi = weight / (heightInMeters * heightInMeters);
  
  return {
    value: bmi.toFixed(1),
    category: getBMICategory(bmi)
  };
};

Offline Support

Progressive Web App Features

Track Better works completely offline thanks to: Service Worker: Registered at src/App.jsx:88

if ("serviceWorker" in navigator) {
  navigator.serviceWorker
    .register("/sw.js")
    .catch((err) => console.error("SW registration failed:", err));
}

Local Storage:

All workout logs stored with localStorage.setItem()
Custom useLocalStorage hook for state persistence
No internet connection required after installation

Cached Assets:

Exercise videos
App icons and images
JavaScript and CSS bundles

Once installed, Track Better loads instantly and all features work without internet. Only the initial installation requires a connection.

Dark Mode

Theme Switching

Toggle between light and dark themes:

Button: Sun/Moon icon in top-right header
Persistence: Theme preference saved to localStorage
System Integration: Updates meta theme color and favicon

Implementation:

useEffect(() => {
  const root = document.documentElement;
  root.classList.toggle("dark", isDark);

  const metaTheme = document.querySelector('meta[name="theme-color"]');
  if (metaTheme) {
    metaTheme.setAttribute("content", isDark ? "#020617" : "#0f172a");
  }

  const faviconLink = document.getElementById("favicon");
  if (faviconLink) {
    faviconLink.href = isDark ? "/icon-dark.svg" : "/icon-light.svg";
  }
}, [isDark]);

User Profile

Personalization

User Name: Set your name to personalize the greeting
Welcome Message: “Welcome, [Name]!” displayed in header
First-Time Modal: Prompts for name on first app launch

Journey Statistics

The Settings tab displays your fitness journey stats:

Current Streak

Consecutive days with completed workouts

Total Days Logged

Unique dates with workout data

Sets Completed

Total number of sets logged across all time

Reset Options

Reset Today’s Progress

Available in the Today tab:

Deletes only today’s workout data
Confirmation dialog prevents accidents
Useful for correcting logging mistakes

Hard Reset All Data

Available in Settings under “Danger Zone”:

Clears ALL workout history
Removes user name and preferences
Resets app to first-time state
Shows greeting modal again

Hard reset is permanent and cannot be undone. Always export your data before performing a hard reset.

Install Prompt

When viewed in a supported browser, Track Better shows an install button:

Location: Top-right header next to theme toggle
Icon: Download icon with cyan accent
Action: Triggers native PWA install prompt
Auto-hide: Disappears after installation

const handleInstall = async () => {
  if (!deferredPrompt) return;

  deferredPrompt.prompt();
  const { outcome } = await deferredPrompt.userChoice;
  
  if (outcome === "accepted") {
    setDeferredPrompt(null);
    setShowInstallButton(false);
  }
};

Introduction

Quick Start

​Features

​Workout Tracking

​Daily Workout View

​7-Day Workout Split

Monday - Push Day

Tuesday - Legs

Wednesday - Pull Day

Thursday - Recovery

Friday - Full Body

Saturday - Lower/Shoulders

Sunday - Upper/Arms

​Exercise Details

​Progress Tracking

​Calendar View

​Monthly Calendar Widget

​Workout Schedule

​Workout History

​Streak Tracking

​Data Sync & Export

​Export Data

​Import Data

​DSA Tracker

​Features

​BMI Calculator

​Body Mass Index Calculator

​Offline Support

​Progressive Web App Features

​Dark Mode

​Theme Switching

​User Profile

​Personalization

​Journey Statistics

Current Streak

Total Days Logged

Sets Completed

​Reset Options

​Reset Today’s Progress

​Hard Reset All Data

​Install Prompt

​Next Steps

Installation Guide

Get Started

Build docs developers (and LLMs) love

Features

Workout Tracking

Daily Workout View

7-Day Workout Split

Exercise Details

Progress Tracking

Calendar View

Monthly Calendar Widget

Workout Schedule

Workout History

Streak Tracking

Data Sync & Export

Export Data

Import Data

DSA Tracker

Features

BMI Calculator

Body Mass Index Calculator

Offline Support

Progressive Web App Features

Dark Mode

Theme Switching

User Profile

Personalization

Journey Statistics

Reset Options

Reset Today’s Progress

Hard Reset All Data

Install Prompt

Next Steps