Skip to the case study
Harvey Zheng

← Back to work

RunTools

I designed and built each calculator to run entirely client-side — no account, no network requests apart from the weather tools — so they load fast and work offline. I keep the set to the tools I use in my own training.

Role
Developer
Project
Browser-based running calculators at runtools.app
Skills
Next.js · TypeScript · Mobile-first UI · Client-side computation
Timeline
2025 – present
RunTools preview

Developer & Designer | 2025–Present

Tools: Next.js, TypeScript, Tailwind CSS v4, Framer Motion, Vitest, Playwright, Capacitor Platform: Web, iOS, Android · runtools.app · github.com/harvzheng/run-tools

Overview

RunTools is a browser-based collection of running calculators and utilities I built for my own training, and left public for any runner who needs a quick answer mid-workout.

The Problem

As I got deeper into running, I found myself reaching for tools constantly: pace converters before a workout, race predictors when planning a training block, weather adjustments before heading out in summer heat. The tools existed online, but the experience of finding and using them was frustrating.

Most running calculators I found had one or more of these issues:

  • Scattered across different sites — no single place had everything, so I'd Google each tool every time
  • Desktop-first layouts — I'm usually checking these on my phone, already outside or about to head out
  • Bloated with ads and sign-up walls — I just want a quick answer, not an account
  • Inconsistent UX — every site works differently, and few match how I actually think about the inputs

I looked for an existing app first. Strava and Garmin Connect are great for logging, but their built-in calculators are limited or buried. Since I could use AI tools to build and iterate quickly, I built my own: the calculators I actually use, in one mobile-friendly site with consistent inputs.

Key Design Decisions

Client-Side Everything

Every calculation runs in the browser — no server roundtrips, no accounts, no analytics. This was a deliberate choice to eliminate hosting costs entirely and keep the app fast. It also means the tools work offline once loaded, which matters when you're checking something at a trailhead with spotty signal.

The only exception is the weather-based tools, which fetch local conditions via a weather API using your device location.

Metric and Imperial Flexibility

Many runners use both miles and kilometers. Unit toggling preserves the entered values when switching between metric and imperial.

Recently Used Tools

With a growing collection of calculators, I added a "Recently Used" section at the top of the home screen to make those tools easier to find again.

Modular Architecture

I didn't know upfront exactly which tools I'd want, so I designed the codebase around adding one at a time: each calculator is a self-contained module with its own inputs, logic, and UI. Adding a new tool doesn't require touching shared code.

AI-Assisted Development

I use RunTools during training and check whether the input order and results work on my phone. When I notice a problem, I describe the change to a coding agent and try the updated tool.

After a run in high heat, I realized I needed a heat-adjusted pace calculator. Most of the existing tools I found only factor in temperature, so I wanted one that took dew point into account as well. I described how the calculator should work, including the dew point weighting, and had a working version integrated within minutes.

CI/CD and Deployment

The project has a full CI pipeline via GitHub Actions that runs on every push and pull request: linting, type-checking, Vitest unit tests, a production build, and Playwright end-to-end tests — all in sequence so nothing ships if an earlier step fails.

For web deployment, Vercel handles production deploys automatically on push to main. For mobile, I use Capacitor to package the Next.js static export into a native iOS app. A one-shot prep script checks prerequisites, builds the static site, syncs to Capacitor, and sets up the Xcode project — from there I archive and distribute via TestFlight.

I also integrated a Claude Code GitHub Action so I can mention @claude on issues or PRs and get AI-assisted code changes directly in the repo.

Current Tools

The suite includes pace converters, race time predictors, heart rate zone calculators, split calculators, heat-adjusted pace calculations, and more — with new tools added as training needs arise.

Outcomes

  • Built a tool I use multiple times a week during my own training
  • Zero ongoing server costs — everything runs client-side
  • Packaged for iOS and Android via Capacitor for native app distribution