Skip to main content

​
Overview

The Today tab is your command center for daily workout logging. It displays your scheduled workout for the current day and allows you to log sets, track progress in real-time, and view completion status.
The app automatically loads your workout based on the day of the week. If no workout is configured for today, you’ll see a “No Workout Scheduled” message.

​
Viewing Today’s Workout

When you open the Today tab, you’ll see:
  • Workout header - Shows the day of the week and workout focus (e.g., “Push Day”, “Pull Day”)
  • Progress tracker - Displays completed sets vs total sets (e.g., “Progress: 5/12 sets logged”)
  • Exercise cards - Each exercise shows:
    • Exercise name
    • Target sets and reps
    • Exercise notes
    • Video demonstration (if available)
    • Rep input field
    • Completion status

Gradient Header

The workout card features a gradient background from cyan to blue, making it easy to spot your daily focus.

Video Demos

Videos auto-play in a loop to help you maintain proper form throughout your workout.

​
Logging Sets

To log a completed set:
1

Enter reps completed

Type the number of reps you completed in the input field (1-249 reps allowed).
2

Submit the set

Click the Log Set button or press Enter on your keyboard to record the set.
3

Review your log

The set appears in a cyan-colored box below the input, showing “Set 1: X reps”.

​
Code Example: How Sets Are Logged

Here’s how the app handles set completion from TodayTab.jsx:106-143: 
<div className="flex items-center gap-2">
  <Input
    type="number"
    min="1"
    max="249"
    inputMode="numeric"
    value={inputValue}
    onChange={(event) =>
      setRepInputs((prev) => ({
        ...prev,
        [exercise.id]: event.target.value,
      }))
    }
    onKeyDown={(event) => {
      if (event.key === "Enter") {
        const reps = Number(inputValue);
        if (reps > 0 && reps < 250 && !isFullyCompleted) {
          onCompleteSet(exercise.id, reps);
          setRepInputs((prev) => ({ ...prev, [exercise.id]: "" }));
        }
      }
    }}
    placeholder="Reps completed"
  />
  <Button
    type="button"
    disabled={isFullyCompleted || Number(inputValue) <= 0 || Number(inputValue) >= 250}
    onClick={() => {
      const reps = Number(inputValue);
      if (reps > 0 && reps < 250) {
        onCompleteSet(exercise.id, reps);
        setRepInputs((prev) => ({ ...prev, [exercise.id]: "" }));
      }
    }}
  >
    Log Set
  </Button>
</div>
The input field automatically clears after logging a set, so you can quickly log your next set.

​
Tracking Progress

The app provides multiple ways to track your progress:

​
Per-Exercise Progress

Each exercise card displays:
  • ✅ Green checkmark - When all sets are completed
  • ⚪ Gray circle - When sets remain
  • Set counter - “Completed 2 / 3 sets”
  • Logged sets list - Shows reps for each completed set

​
Visual Completion Indicators

From TodayTab.jsx:145-162: 
<div className="flex items-center gap-2 text-sm">
  {isFullyCompleted ? (
    <CheckCircle2 className="h-4 w-4 text-emerald-500" />
  ) : (
    <Circle className="h-4 w-4 text-slate-400 dark:text-zinc-500" />
  )}
  <span className="text-slate-700 dark:text-zinc-200">
    Completed {logs.length} / {exercise.sets} sets
  </span>
</div>

{logs.length > 0 && (
  <ul className="space-y-1 rounded-xl border border-dashed border-cyan-200 bg-cyan-50/70 p-2 text-sm text-slate-700">
    {logs.map((log, index) => (
      <li key={`${exercise.id}-${index}`}>Set {index + 1}: {log.reps} reps</li>
    ))}
  </ul>
)}

​
Workout Completion

When you complete all sets for the day:
  • The app displays a Success Page with motivational content
  • Your progress is automatically saved to localStorage
  • The day is marked as completed in the calendar
  • Your streak counter updates
Complete all exercises to see the workout success page and keep your streak alive!

​
Watching Exercise Videos

The app includes video demonstrations for proper form:
  • Auto-play - Videos automatically play on loop
  • Muted by default - No audio to distract you
  • Support for GIF and MP4 - Videos are loaded from /workout/{day}/{filename}
  • Max height - Videos are capped at 320px for optimal viewing
From TodayTab.jsx:84-104: 
{videoPath && (
  <div className="px-6 pb-4">
    <div className="mb-4 rounded-lg overflow-hidden bg-slate-900 shadow-md">
      {isGif ? (
        <img
          src={videoPath}
          alt={exercise.name}
          className="w-full h-auto object-cover max-h-80"
        />
      ) : (
        <video
          autoPlay
          muted
          loop
          className="w-full h-auto object-cover max-h-80"
          src={videoPath}
        />
      )}
    </div>
  </div>
)}

​
Resetting Today’s Progress

If you need to restart your workout:
1

Scroll to bottom

Navigate to the bottom of the Today tab.
2

Click Reset button

Click the red Reset Today’s Progress button.
3

Confirm action

Confirm the reset in the dialog box. This action cannot be undone.
Resetting today’s progress will delete all logged sets for the current day. This action is permanent and cannot be undone.
From TodayTab.jsx:168-178: 
<Card className="border-0 bg-red-50 shadow-sm dark:bg-red-950/30">
  <CardContent className="pt-6">
    <Button
      onClick={onResetToday}
      variant="outline"
      className="w-full border-red-200 text-red-600 hover:bg-red-50"
    >
      Reset Today's Progress
    </Button>
  </CardContent>
</Card>

​
Data Storage

All workout data is stored locally in your browser:
  • localStorage key: completedExercises
  • Structure: Date-keyed object with exercise IDs and rep logs
  • Format: { "2026-03-07": { "exercise-id": [{ reps: 12, loggedAt: "ISO-timestamp" }] } }
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() }],
      },
    };
  });
};
From App.jsx:106-119

​
Dark Mode Support

All workout tracking features work seamlessly in dark mode:
  • Cards adapt to dark backgrounds
  • Text remains readable with zinc color palette
  • Gradient headers maintain vibrancy
  • Video containers have appropriate contrast
Toggle dark mode using the moon/sun icon in the header to match your gym’s lighting conditions.

Build docs developers (and LLMs) love

Get started for freeTalk to us