7Bit Circuit Training

Adaptive training app for climbers. Ten climbing-performance capacities, load-based progression, sourced protocols, testable benchmarks, form guides, rest timers and session tracking.

Built for one athlete: 35, 62kg, 7a+, three sessions a week, home and gym.

Training model: see 7bit-handover-v10.md. Design system: see 7bit-handoff-v9.md.

Requirements

• Node.js v22+ (@capacitor/cli requires >=22, Next 16 requires >=20.9)
• Xcode (for iOS development — macOS only)

Quick Start

npm install
npm run dev

Opens the web app at http://localhost:3000.

iOS Development

First-time setup

npm install                # Install all dependencies (Next.js, React, Capacitor, etc.)
npm run build              # Compile the app into static files (out/ folder)
npx cap sync ios           # Copy static files in, resolve the native plugins
npx cap open ios           # Open the Xcode project

In Xcode:

1. Select a simulator (e.g. iPhone 16) from the device dropdown
2. Press Cmd+R to build and run

The first build resolves three Swift packages (status bar, splash screen, haptics) from ios/App/CapApp-SPM/Package.swift. That takes a minute once; it is cached afterwards.

Native configuration

Bundle ID	com.sevenbit.circuittraining
Display name	7Bit
Orientation	Portrait only
Devices	iPhone only
Deployment target	iOS 15
Appearance	Light, locked — the app has no dark theme

Native behaviour lives in src/native/native.ts: status bar styling, splash dismissal and haptics, each behind a platform check so the same build still runs in a browser. Screen wake during rest timers uses the Screen Wake Lock API (src/hooks/use-wake-lock.ts) rather than a plugin, so it works in the PWA too.

Regenerating the icon and splash

Both are drawn from public/images/logo.svg, so the home screen icon and the in-app logo can never drift apart:

pip3 install pillow
python3 tools/generate-ios-assets.py

After code changes

npm run build && npx cap sync ios

Then Cmd+R in Xcode to see the update.

Run on a physical iPhone

1. Connect your iPhone via USB
2. In Xcode, select your device from the dropdown
3. Go to Signing & Capabilities and select your Apple ID as the team
4. Press Cmd+R — Xcode will install the app on your phone
5. On your iPhone: Settings > General > VPN & Device Management — trust the developer certificate

No paid Apple Developer account needed for personal testing.

Vercel Deployment (Web)

The main branch auto-deploys to Vercel on push. Preview deploys are created for every PR.

Project Structure

src/
  core/        Pure TypeScript business logic (no React, shared with iOS)
               types, config, engine, protocols, benchmarks, session data
  storage/     Storage abstraction (localStorage now, Supabase later)
  store/       Zustand state management
  hooks/       React hooks (timer, swipe, audio)
  components/  React components + CSS Modules
  app/         Next.js app router (layout, page, globals.css)
ios/           Xcode project (generated by Capacitor)
legacy/        Original vanilla JS version (reference only)
public/        Static assets (images, manifest.json)

Tech Stack

Next.js 16 (App Router) · TypeScript · React 19 · Zustand · Recharts · @use-gesture/react · Capacitor 8 (iOS)