Skip to main content
This guide walks you through logging your first complete workout in Track Better, from viewing exercise demos to celebrating your achievement.

​
Overview

Logging a workout in Track Better is designed to be fast and intuitive. Each exercise card shows video demonstrations, tracks your sets in real-time, and celebrates your progress when you complete all exercises.
1

View Today's Scheduled Exercises

Open the Today tab to see your workout for the day. You’ll see a gradient card at the top showing:
// Example: Monday's workout
{
  "dayOfWeek": "Monday",
  "focus": "Push Day (Chest, Shoulders, Triceps)",
  "exercises": [
    { "name": "Standard Push-ups", "sets": 3, "targetReps": "To failure" },
    { "name": "Decline Push-ups", "sets": 3, "targetReps": "To failure" },
    // ... more exercises
  ]
}
The progress tracker displays: Progress: 0/19 sets logged (example for Monday)
Each day has a different workout focus. Monday focuses on Push exercises (Chest, Shoulders, Triceps), while Tuesday is Legs & Calves, and so on.
2

Watch Exercise Video Demonstrations

Each exercise card includes a video demonstration that auto-plays on loop:
  • Video format: MP4 videos or GIF animations
  • Auto-play: Loops continuously so you can reference it between sets
  • Full-screen view: Tap the video to see it in full resolution
The video shows proper form, tempo, and range of motion for each exercise.
// Videos are loaded from /workout/[DayName]/[filename]
// Example: /workout/Monday/push_ups.mp4
Watch the video demo before starting each exercise to ensure proper form. The notes section also includes important cues like “Keep core tight” or “3-second squeeze at the top”.
3

Log Your First Set

When you’re ready to log a set:
  1. Complete the exercise (e.g., do your push-ups to failure)
  2. Enter the number of reps you completed in the input field
  3. Click “Log Set” or press Enter
Example: If you completed 15 push-ups, type “15” and click Log Set
The app will:
  • Record your reps with a timestamp
  • Clear the input field for the next set
  • Update the progress counter
  • Display your logged set in a list below
Rep count must be between 1 and 249. The input field validates automatically and the Log Set button is disabled for invalid values.
4

Track Your Progress

As you log sets, you’ll see real-time updates:

​
Individual Exercise Progress

Each exercise card shows:
  • Circle icon changes to green checkmark when all sets are complete
  • Completed sets counter: “Completed 2 / 3 sets”
  • Logged sets list in a cyan-bordered box: 
    Set 1: 15 reps
Set 2: 12 reps
Set 3: 10 reps

​
Overall Workout Progress

The top card updates automatically:
  • Progress: 6/19 sets logged (updates as you log)
  • Motivates you to keep going!
You can log sets in any order. If you want to alternate between exercises or do supersets, the app tracks each exercise independently.
5

Complete Remaining Exercises

Continue logging all exercises in your workout:
  1. Scroll down to the next exercise
  2. Watch the video demo if needed
  3. Complete the set
  4. Log your reps
  5. Repeat until all sets are done

​
Example Monday Workout:

Keep core tight. Watch video for proper form with hands shoulder-width apart.
Feet elevated on bed or chair. Increases difficulty and targets upper chest.
Slow 3-second negative. Lie on back, arms out wide, bring dumbbells together above chest.
Seated or standing. Press dumbbells from shoulders to overhead.
Slight bend in elbows. Raise dumbbells out to sides until parallel with ground.
Hold one or both dumbbells behind head, extend arms overhead.
Take your time! There’s no rush. The app saves your progress automatically as you go, so you can take breaks between sets.
6

Mark Exercise as Complete

When you’ve logged all required sets for an exercise:
  • The circle icon turns into a green checkmark ✓
  • The “Log Set” button becomes disabled
  • The exercise card gets a green gradient background
// The app calculates completion automatically
const isFullyCompleted = logs.length >= exercise.sets;
You’ll see a visual transformation:
✓ Exercise Complete!
The card background turns green indicating all sets are logged.
7

View Success Page

When you complete ALL exercises in today’s workout, the app automatically shows a celebration screen!

​
Success Page Features:

Trophy Animation

Animated golden trophy with pulsing glow effect

Completion Message

“Awesome Work!” with your name and congratulations

Workout Summary

Total sets completed and workout focus

Share Achievement

Share your accomplishment on social media
The success page displays:
  • Large trophy icon with gradient glow animation
  • “Awesome Work!” title in green
  • Day and focus (e.g., “Monday - Push Day (Chest, Shoulders, Triceps)”)
  • Sets completed (e.g., “19 Sets Crushed”)
  • Personal greeting: “Great job, [Your Name]! 💪”
This page only appears when you’ve completed 100% of the workout. The app uses this logic:
const isAllCompleted = completedSets >= totalSets;
8

Share Your Achievement (Optional)

Click the Share Achievement button to celebrate your progress:
  1. Opens a share modal with a preview card
  2. Shows your workout stats:
    • Date and day of week
    • Your name
    • Workout focus
    • Total sets and reps completed

​
Sharing Options:

  • Copy Link: Copy Track Better URL to clipboard
  • WhatsApp: Share text with workout stats
  • Twitter: Tweet your achievement
  • Facebook: Share on your timeline
  • Download Image: Generate a shareable workout summary image
The share text includes:
`I just tracked my ${focus} workout on Track Better. 
I did ${totalSets} sets! 
Click on the Link and track your own goals:
https://track-better.vercel.app/`
The Download Image feature generates a beautiful branded image using html2canvas that matches your current theme (light or dark mode).
9

Build Your Streak

After completing your first workout:
  • Your data is saved locally with today’s date
  • Return tomorrow to continue building your streak
  • The 🔥 streak counter appears in the header after consecutive days
// Streak calculation
const calculateCurrentStreak = () => {
  let streak = 0;
  let currentDate = new Date(today);
  
  for (let i = 0; i < 365; i++) {
    if (completedExercises[dateKey]) {
      streak++;
      currentDate.setDate(currentDate.getDate() - 1);
    } else {
      break;
    }
  }
  return streak;
};
Your streak breaks if you miss a day! But don’t worry - all your historical workout data is preserved in the Week view.

​
Tips for Successful Workouts

Log Between Sets

Keep your phone nearby and log each set immediately after completing it. This ensures accurate rep counts.

Watch Form Videos

Always check the video demonstrations, especially for exercises you’re unfamiliar with. Proper form prevents injuries.

Track Progress

Review your logged sets to see if you’re improving over time. Try to beat your previous rep counts!

Stay Consistent

Building a streak is more important than having perfect workouts. Show up every day, even if you modify exercises.

​
Common Questions

Currently, you cannot edit individual sets. If you make a mistake, you can use the Reset Today’s Progress button at the bottom of the Today tab. This will clear all logged sets for today so you can start fresh.
This action cannot be undone! A confirmation dialog will ask you to confirm before deleting.
No problem! Log whatever you can complete. The app tracks partial progress, and you can see exactly what you accomplished in the Week view. It’s better to log something than nothing!
No, the app is designed for logging workouts on the current day only. This ensures the streak counter and calendar remain accurate. If you missed a day, just continue from today.
Some exercises like push-ups have “To failure” as the target reps. This means you perform as many reps as possible with good form. Log however many you completed - there’s no wrong number!
The success page appears automatically, replacing the Today view. To return to the workout list (in case you want to log more sets), you would need to use the “Reset Today’s Progress” button or wait until tomorrow for a new workout.

​
Next Steps

Explore the Week View

See your complete 7-day program and workout history

Customize Settings

Personalize your experience and manage your data

Understanding Workouts

Learn about the structured 7-day workout program

Track Your Progress

Monitor streaks, stats, and improvements over time

Build docs developers (and LLMs) love

Get started for freeTalk to us