Designing a Cross-Device Workout Workflow Around YouTube Timestamps

Saving a YouTube workout and using it in a repeatable training system are distinct product problems. A bookmark preserves a URL, but a training workflow needs to preserve intent: which movement matters, where it starts, why it belongs in a routine, and what the user should do next.

While building TrainFlow, the creator has been exploring an architecture that treats timestamped video moments as reusable domain objects and separates desktop planning from mobile execution. This post explains the design decisions behind that workflow, noting that the examples describe actual product and engineering patterns rather than generic recommendations.

A YouTube URL serves as a source reference rather than an exercise definition. Since a single video can contain a warm-up, three demonstrations, a progression, and a cooldown, the reusable unit is typically a specific moment inside the video. However, the original URL remains important for preserving attribution and letting users return to the full context.

Stock photo for illustration only, not from the actual event

Because YouTube links arrive in several shapes—such as standard watch URLs, short links, mobile shares, and links containing timing parameters—the system normalizes them once when the user creates an action:

• Validates and converts all link shapes into a verified video ID.
• Extracts the precise numeric timestamp value.
• Keeps player code simple by receiving only validated inputs.

TrainFlow uses a Next.js App Router application featuring two distinct surfaces: desktop authoring and mobile execution. This separation goes beyond responsive CSS because the two contexts serve entirely different jobs.

Desktop authoring benefits from density, allowing users to compare sources, edit notes, reorder actions, and view the entire routine. Mobile execution benefits from focus, displaying only the current action, the relevant video moment, minimal controls, and a clear next step. Forcing both jobs into one universal screen

• typically leaves desktop views too sparse and mobile views too busy.

Once actions become reusable, a routine becomes an ordered composition rather than a copied block of video metadata. Ordering must be explicit rather than relying on creation time or database return order.

A session is easier to reason about when it has explicit states. Implementing a small state machine with states such as ready, playing, resting, paused, and completed helps handle edge cases like background interruptions during rest periods, resuming completed sessions, or preloading upcoming clips.

Source: Dev.to