# Cali

> The Caliathletics program as an app that runs and logs your workout

- Page: https://www.whatwemade.app/p/cali
- What it is: Web app, for health
- Made by: [Christian Werther](https://www.whatwemade.app/u/rehtrew)
- Run it yourself: get the code and run your own copy
- Live: https://calisthenics-rehtrew.vercel.app
- Code: https://github.com/Rehtrew/calisthenics (no license file, 0 stars)
- Languages: Danish, English
- Tags: calisthenics, workout, fitness, pwa, streaks
- Upvotes: 3, comments: 0

## About

Cali turns the Caliathletics program, 16 levels with three training days each, into an app you follow while you train. Pick the day, skip the leg exercises if you like, set the rest between sets and reorder the exercises before you start. Every exercise shows which muscles it works on a small body figure, with the muscle names in plain language.

During the workout you see one set at a time: the exercise, the target reps, what you did last time and two big buttons for hitting every rep or fewer. The rest screen counts down, buzzes, and lists the sets that are coming with their figures. The elapsed time stays at the top, a back arrow undoes the last set and you can abort at any point. Afterwards a story-style summary shows how much of the program you got through, an estimate of the calories burned with a fun fact, the total weight you moved, work against rest time and your streak, and finally you log your body weight.

The home screen shows your level and next day, a streak calendar in the style of Strava, stats for the last five workouts, your recent sessions and a weight curve with ranges from two weeks to a year. Everything is stored in the browser. With a Redis database and a shared code on Vercel, your phone and laptop keep the same history. It runs as a home-screen app on iOS, has a light and a dark theme, and comes in English and Danish: it follows the browser's language on first start, and you can switch in the settings.

The fiddly parts were the body figures (five SVG views with every path tagged by muscle group, and a rule for which view to show for each exercise), the sync (sessions are merged by id with tombstones for deleted ones, so a device can never bring back a workout you removed) and the screen transitions, which use the View Transitions API. Most of that work was removing flashes: flushing React inside the transition, only morphing the day title between screens that both have it, and leaving the browser's own back gesture alone. The screenshots and the video show eight made-up weeks of training.

## How it was made

- Claude Code, 100% of the work: Built the program data, the workout flow, the muscle figures, the sync, the motion and the English translation
- Stack: React, TypeScript, Node, Vercel

## What you need to run it

- Tools: Node 20+
- Accounts and keys: Vercel with Redis, only for syncing devices

Shared on WhatWeMade: https://www.whatwemade.app/p/cali