JNKS iOS

Native iOS app for JNKS — the AI-powered basketball shooting form analyzer. Built with Capacitor wrapping the Next.js web app. Designed for continuous workout use: the camera keeps recording, TTS speaks coaching advice in your ear, and results accumulate in a history tab.

How It Works

1. Start the camera and shoot baskets
2. Every 5 shots, the AI scores your form and speaks coaching advice via TTS
3. Recording continues automatically for the next batch
4. Check the Results tab anytime to review your workout history

Tech Stack

• Capacitor (iOS native wrapper for the web app)
• Next.js 16 static export → loaded in WKWebView
• Same Python backend as JNKS (MediaPipe, YOLOv8, Gemini AI)

Prerequisites

• macOS 12+
• Xcode 14+ (with iOS SDK)
• Node.js 18+
• Python 3.8+
• ngrok (the iOS app connects to your local backend via ngrok)

  brew install ngrok
  ngrok config add-authtoken YOUR_TOKEN

• Physical iPhone recommended (simulator has no camera)

Getting Started

1. Clone and install

git clone https://github.com/JoshuaDowdCS/JNKS-IOS.git
cd JNKS-IOS
npm install

2. Set up the Python backend

Link the venv from the JNKS repo (or create your own):

# Option A: symlink from JNKS
ln -s ../JNKS/venv venv

# Option B: create fresh
python3 -m venv venv
source venv/bin/activate
pip install -r pipeline/requirements.txt

3. Configure environment

Create a .env file:

GEMINI_API_KEY=your_gemini_api_key

4. Run

./start.sh

This will:

• Start ngrok and get a public URL
• Build the Next.js static export with the ngrok URL baked in
• Sync web assets into the iOS project (cap sync)
• Start the Python backend
• Open Xcode

Then in Xcode: select your iPhone and hit Run.

Manual steps (if not using start.sh)

# Build with your backend URL
NEXT_PUBLIC_API_URL="https://your-url.ngrok-free.app" \
NEXT_PUBLIC_WS_URL="wss://your-url.ngrok-free.app" \
npm run build

# Sync to iOS
npx cap sync

# Open Xcode
npx cap open ios

# Start backend separately
source venv/bin/activate
python3 -m pipeline.server

Project Structure

src/                  # Same as JNKS web app
  app/analyze/        # Continuous recording + toast notifications
  app/results/        # Workout history timeline (localStorage)
  lib/workout-storage.ts  # localStorage utility for result history

ios/                  # Capacitor-generated iOS project
  App/App/Info.plist  # Camera + microphone permissions

capacitor.config.ts   # Capacitor config (appId: com.jnks.ios)
pipeline/             # Python CV + AI backend (same as JNKS)
start.sh              # One-command startup

iOS-Specific Features

• Safe area padding for the notch / Dynamic Island
• Continuous recording — camera doesn't stop between batches
• TTS coaching plays through phone speaker or earbuds during workout
• Workout history persisted in localStorage, viewable in Results tab

npm Scripts

Script	Description
npm run build	Build Next.js static export to out/
npm run cap:sync	Copy web assets into the iOS project
npm run cap:open	Open Xcode workspace
npm run build:ios	Build + sync + open Xcode (all-in-one)