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:
- Select a simulator (e.g. iPhone 16) from the device dropdown
- 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
- Connect your iPhone via USB
- In Xcode, select your device from the dropdown
- Go to Signing & Capabilities and select your Apple ID as the team
- Press Cmd+R — Xcode will install the app on your phone
- 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)
