Own product

Tagwerk

Training and habits in one app. A calendar you zoom into – and inside it every set, every weight, every check.

Role
Concept, design & development
Type
Web app for the phone
Tech
React, TypeScript, PWA
Status
Prototype – try it in the browser
Open the app
Tagwerk: month calendar with coloured dots for the muscle groups trained
Tagwerk: training day with bench press, four checked sets and last session’s numbers
Tagwerk: muscle map for the bench press – chest primary in red, shoulders and triceps secondary

Starting point

Two apps, no overview.

Workouts end up in one app, habits in another. Anyone who wants to know how the week really went jumps between lists, tabs and charts – and eventually stops tracking.

Idea

One calendar. One day. Everything in it.

Tagwerk puts the day at the centre. In the month view, coloured dots show which muscle groups were trained. A tap or a pinch zooms in – training and habits are one switch apart.

Interaction

The zoom is the navigation.

No menu, no back stack: the month grows smoothly into the day, a pinch leads back out. The motion follows your fingers and can be interrupted at any time.

Features

Few buttons, everything in reach.

  1. 01

    Sets in seconds

    Weight and reps are suggested from your last session. One tap logs a set – new records are flagged automatically.

  2. 02

    Workouts on demand

    Tap a muscle group, pick duration and equipment: free weights, machines or calisthenics. Swap any exercise individually.

  3. 03

    Training days & weekly plan

    Chest day, back day, leg day: saved as templates, assigned to weekdays, pencilled into the calendar – and editable on the day itself.

  4. 04

    Habits & badges

    Habits with daily targets and streaks, plus 16 badges – from the first check to a perfect week.

Tagwerk: workout builder with muscle groups, equipment, duration and a five-exercise suggestion
Tagwerk: weekly plan with chest day, back day and leg day
Tagwerk: exercise library with filters by muscle group and equipment

Muscle map

Know what’s working.

Each of the 88 exercises has an anatomical map: primary muscles in red, secondary in light red, with common and Latin names. Plus three technique cues and the trend of the estimated one-rep max.

Tagwerk: muscle map for the bench press – chest primary in red, shoulders and triceps secondary

Habits

Training and habits, one switch.

In habit mode the same calendar shows progress rings instead of muscle dots. Perfect days fill green, badges unlock as soon as a streak holds.

Tagwerk: habit day with progress bar, streaks and checked habits
Tagwerk: month in habit mode with green progress rings
Tagwerk: badges as seals in red and green, locked ones with a progress arc

Technology

Built like a native app.

  • Installable and offline

    As a progressive web app Tagwerk launches from the home screen and works without a connection.

  • Data stays on the device

    No sign-up, no server. Export and import as a file keep the history safe.

  • Smooth on the iPhone

    Zoom and transitions only move transform and opacity – the GPU does the work, the interface stays responsive.

  • Bilingual

    German and English, with numbers and dates formatted for the language.

  • React 19
  • TypeScript
  • Vite
  • Zustand
  • Motion
  • PWA

Design

Red, white, a touch of green.

White ground, hairlines like a lab table, readings in monospace. Red guides the interaction, green confirms what’s done. On the desktop the app stands as a device next to a QR code – to hand it over to your phone.

Tagwerk on the desktop: the app in a device frame, next to it a QR code to open it on the phone

Your project next?

Website, web app or both: tell me what you have in mind.