Add Summit Stride 5K training tracker at /running

Node/Express backend with SQLite storage, WebAuthn passkey auth,
and React frontend built via Vite. Caddy routes /running/* via
handle_path labels on docker-compose.

apps/running/Dockerfile

@@ -0,0 +1,18 @@
+# Stage 1: Build frontend
+FROM node:20-alpine AS builder
+WORKDIR /app/src
+COPY src/package.json ./
+RUN npm install
+COPY src/ ./
+RUN npm run build
+
+# Stage 2: Production server
+FROM node:20-alpine
+WORKDIR /app
+COPY package.json ./
+RUN npm install --omit=dev
+COPY server.js ./
+COPY --from=builder /app/src/dist ./public
+RUN mkdir -p /app/data
+EXPOSE 8080
+CMD ["node", "server.js"]

apps/running/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "running-server",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "start": "node server.js"
+  },
+  "dependencies": {
+    "@simplewebauthn/server": "^11.0.0",
+    "better-sqlite3": "^11.7.0",
+    "connect-sqlite3": "^0.9.15",
+    "express": "^4.21.0",
+    "express-session": "^1.18.1"
+  }
+}

apps/running/server.js

@@ -0,0 +1,301 @@
+const express = require("express");
+const path = require("path");
+const Database = require("better-sqlite3");
+const session = require("express-session");
+const SQLiteStoreFactory = require("connect-sqlite3");
+const {
+  generateRegistrationOptions,
+  verifyRegistrationResponse,
+  generateAuthenticationOptions,
+  verifyAuthenticationResponse,
+} = require("@simplewebauthn/server");
+
+const app = express();
+const PORT = 8080;
+
+const RP_NAME = "James Van Boxtel";
+const RP_ID = process.env.RP_ID || "jamesvanboxtel.com";
+const ORIGIN = process.env.ORIGIN || "https://jamesvanboxtel.com";
+
+// Database setup
+const dataDir = path.join(__dirname, "data");
+const db = new Database(path.join(dataDir, "running.db"));
+db.pragma("journal_mode = WAL");
+db.pragma("foreign_keys = ON");
+
+db.exec(`
+  CREATE TABLE IF NOT EXISTS users (
+    id INTEGER PRIMARY KEY,
+    username TEXT UNIQUE NOT NULL,
+    approved INTEGER DEFAULT 0,
+    created_at TEXT DEFAULT CURRENT_TIMESTAMP
+  );
+
+  CREATE TABLE IF NOT EXISTS credentials (
+    id TEXT PRIMARY KEY,
+    user_id INTEGER NOT NULL REFERENCES users(id),
+    public_key BLOB NOT NULL,
+    counter INTEGER DEFAULT 0,
+    transports TEXT,
+    created_at TEXT DEFAULT CURRENT_TIMESTAMP
+  );
+
+  CREATE TABLE IF NOT EXISTS progress (
+    key TEXT PRIMARY KEY,
+    completed INTEGER DEFAULT 1,
+    updated_by INTEGER REFERENCES users(id),
+    updated_at TEXT DEFAULT CURRENT_TIMESTAMP
+  );
+`);
+
+// Session setup
+const SQLiteStore = SQLiteStoreFactory(session);
+app.use(
+  session({
+    store: new SQLiteStore({ dir: dataDir, db: "sessions.db" }),
+    secret: process.env.SESSION_SECRET || "summit-stride-secret-change-me",
+    resave: false,
+    saveUninitialized: false,
+    cookie: {
+      secure: process.env.NODE_ENV === "production",
+      httpOnly: true,
+      maxAge: 30 * 24 * 60 * 60 * 1000, // 30 days
+      sameSite: "lax",
+    },
+  })
+);
+
+app.use(express.json());
+
+// In-memory challenge store (keyed by session ID, short-lived)
+const challengeStore = new Map();
+
+function requireAuth(req, res, next) {
+  if (!req.session.userId) {
+    return res.status(401).json({ error: "Not authenticated" });
+  }
+  const user = db.prepare("SELECT * FROM users WHERE id = ?").get(req.session.userId);
+  if (!user || !user.approved) {
+    return res.status(403).json({ error: "Not approved" });
+  }
+  req.user = user;
+  next();
+}
+
+// --- Progress API ---
+
+app.get("/api/progress", (req, res) => {
+  const rows = db.prepare("SELECT key, completed FROM progress").all();
+  const state = {};
+  for (const row of rows) {
+    state[row.key] = !!row.completed;
+  }
+  res.json(state);
+});
+
+app.post("/api/progress/:key", requireAuth, (req, res) => {
+  const { key } = req.params;
+  if (!/^\d+-\d+$/.test(key)) {
+    return res.status(400).json({ error: "Invalid key format" });
+  }
+  db.prepare(
+    `INSERT INTO progress (key, completed, updated_by, updated_at)
+     VALUES (?, 1, ?, CURRENT_TIMESTAMP)
+     ON CONFLICT(key) DO UPDATE SET completed=1, updated_by=?, updated_at=CURRENT_TIMESTAMP`
+  ).run(key, req.user.id, req.user.id);
+  res.json({ ok: true });
+});
+
+app.delete("/api/progress/:key", requireAuth, (req, res) => {
+  const { key } = req.params;
+  db.prepare("DELETE FROM progress WHERE key = ?").run(key);
+  res.json({ ok: true });
+});
+
+// --- Auth API ---
+
+app.get("/api/auth/me", (req, res) => {
+  if (!req.session.userId) {
+    return res.json({ authenticated: false });
+  }
+  const user = db.prepare("SELECT id, username, approved FROM users WHERE id = ?").get(req.session.userId);
+  if (!user) {
+    return res.json({ authenticated: false });
+  }
+  res.json({ authenticated: true, user });
+});
+
+app.post("/api/auth/logout", (req, res) => {
+  req.session.destroy(() => {
+    res.json({ ok: true });
+  });
+});
+
+// Registration
+app.post("/api/auth/register-options", async (req, res) => {
+  try {
+    const { username } = req.body;
+    if (!username || typeof username !== "string" || username.length > 64) {
+      return res.status(400).json({ error: "Invalid username" });
+    }
+
+    let user = db.prepare("SELECT * FROM users WHERE username = ?").get(username);
+    if (!user) {
+      const result = db.prepare("INSERT INTO users (username, approved) VALUES (?, ?)").run(
+        username,
+        db.prepare("SELECT COUNT(*) as count FROM users").get().count === 0 ? 1 : 0
+      );
+      user = db.prepare("SELECT * FROM users WHERE id = ?").get(result.lastInsertRowid);
+    }
+
+    const existingCreds = db
+      .prepare("SELECT id, transports FROM credentials WHERE user_id = ?")
+      .all(user.id);
+
+    const options = await generateRegistrationOptions({
+      rpName: RP_NAME,
+      rpID: RP_ID,
+      userName: username,
+      userID: Buffer.from(String(user.id)),
+      attestationType: "none",
+      excludeCredentials: existingCreds.map((c) => ({
+        id: c.id,
+        transports: c.transports ? JSON.parse(c.transports) : undefined,
+      })),
+      authenticatorSelection: {
+        residentKey: "preferred",
+        userVerification: "preferred",
+      },
+    });
+
+    challengeStore.set(req.sessionID, { challenge: options.challenge, userId: user.id });
+    setTimeout(() => challengeStore.delete(req.sessionID), 5 * 60 * 1000);
+
+    res.json(options);
+  } catch (err) {
+    console.error("register-options error:", err);
+    res.status(500).json({ error: "Registration failed" });
+  }
+});
+
+app.post("/api/auth/register-verify", async (req, res) => {
+  try {
+    const stored = challengeStore.get(req.sessionID);
+    if (!stored) {
+      return res.status(400).json({ error: "No registration in progress" });
+    }
+
+    const verification = await verifyRegistrationResponse({
+      response: req.body,
+      expectedChallenge: stored.challenge,
+      expectedOrigin: ORIGIN,
+      expectedRPID: RP_ID,
+    });
+
+    if (!verification.verified || !verification.registrationInfo) {
+      return res.status(400).json({ error: "Verification failed" });
+    }
+
+    const { credential } = verification.registrationInfo;
+
+    db.prepare(
+      "INSERT INTO credentials (id, user_id, public_key, counter, transports) VALUES (?, ?, ?, ?, ?)"
+    ).run(
+      credential.id,
+      stored.userId,
+      Buffer.from(credential.publicKey),
+      credential.counter,
+      JSON.stringify(req.body.response?.transports || [])
+    );
+
+    challengeStore.delete(req.sessionID);
+
+    const user = db.prepare("SELECT id, username, approved FROM users WHERE id = ?").get(stored.userId);
+    req.session.userId = user.id;
+
+    res.json({ verified: true, user });
+  } catch (err) {
+    console.error("register-verify error:", err);
+    res.status(500).json({ error: "Verification failed" });
+  }
+});
+
+// Login
+app.post("/api/auth/login-options", async (req, res) => {
+  try {
+    const options = await generateAuthenticationOptions({
+      rpID: RP_ID,
+      userVerification: "preferred",
+    });
+
+    challengeStore.set(req.sessionID, { challenge: options.challenge });
+    setTimeout(() => challengeStore.delete(req.sessionID), 5 * 60 * 1000);
+
+    res.json(options);
+  } catch (err) {
+    console.error("login-options error:", err);
+    res.status(500).json({ error: "Login failed" });
+  }
+});
+
+app.post("/api/auth/login-verify", async (req, res) => {
+  try {
+    const stored = challengeStore.get(req.sessionID);
+    if (!stored) {
+      return res.status(400).json({ error: "No login in progress" });
+    }
+
+    const credentialId = req.body.id;
+    const cred = db.prepare("SELECT * FROM credentials WHERE id = ?").get(credentialId);
+    if (!cred) {
+      return res.status(400).json({ error: "Unknown credential" });
+    }
+
+    const verification = await verifyAuthenticationResponse({
+      response: req.body,
+      expectedChallenge: stored.challenge,
+      expectedOrigin: ORIGIN,
+      expectedRPID: RP_ID,
+      credential: {
+        id: cred.id,
+        publicKey: cred.public_key,
+        counter: cred.counter,
+        transports: cred.transports ? JSON.parse(cred.transports) : undefined,
+      },
+    });
+
+    if (!verification.verified) {
+      return res.status(400).json({ error: "Verification failed" });
+    }
+
+    db.prepare("UPDATE credentials SET counter = ? WHERE id = ?").run(
+      verification.authenticationInfo.newCounter,
+      credentialId
+    );
+
+    challengeStore.delete(req.sessionID);
+
+    const user = db
+      .prepare("SELECT id, username, approved FROM users WHERE id = ?")
+      .get(cred.user_id);
+    req.session.userId = user.id;
+
+    res.json({ verified: true, user });
+  } catch (err) {
+    console.error("login-verify error:", err);
+    res.status(500).json({ error: "Verification failed" });
+  }
+});
+
+// Serve static frontend
+app.use(express.static(path.join(__dirname, "public")));
+
+// SPA fallback
+app.get("*", (req, res) => {
+  if (req.path.startsWith("/api/")) {
+    return res.status(404).json({ error: "Not found" });
+  }
+  res.sendFile(path.join(__dirname, "public", "index.html"));
+});
+
+app.listen(PORT, () => console.log(`Running app on :${PORT}`));

apps/running/src/App.tsx

@@ -0,0 +1,440 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { Mountain, LogIn, LogOut, UserPlus, Loader2 } from "lucide-react";
+import { startRegistration, startAuthentication } from "@simplewebauthn/browser";
+import { SCHEDULE_DATA, DAYS_OF_WEEK, BACKGROUND_IMAGE } from "./constants";
+import { CompletionState, RunType, AuthUser } from "./types";
+import WorkoutCard from "./components/WorkoutCard";
+
+const API_BASE = "/running/api";
+
+async function apiFetch(path: string, opts?: RequestInit) {
+  const res = await fetch(`${API_BASE}${path}`, {
+    ...opts,
+    headers: { "Content-Type": "application/json", ...opts?.headers },
+  });
+  return res;
+}
+
+const App: React.FC = () => {
+  const [completed, setCompleted] = useState<CompletionState>({});
+  const [user, setUser] = useState<AuthUser | null>(null);
+  const [authLoading, setAuthLoading] = useState(true);
+  const [showRegister, setShowRegister] = useState(false);
+  const [registerName, setRegisterName] = useState("");
+  const [authError, setAuthError] = useState("");
+
+  const canEdit = !!user && user.approved === 1;
+
+  const loadProgress = useCallback(async () => {
+    try {
+      const res = await apiFetch("/progress");
+      if (res.ok) {
+        setCompleted(await res.json());
+      }
+    } catch {
+      // Silently fail - will show empty progress
+    }
+  }, []);
+
+  const checkAuth = useCallback(async () => {
+    try {
+      const res = await apiFetch("/auth/me");
+      const data = await res.json();
+      if (data.authenticated) {
+        setUser(data.user);
+      }
+    } catch {
+      // Not authenticated
+    } finally {
+      setAuthLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    loadProgress();
+    checkAuth();
+  }, [loadProgress, checkAuth]);
+
+  const toggleDay = async (weekIdx: number, dayIdx: number) => {
+    if (!canEdit) return;
+    const key = `${weekIdx}-${dayIdx}`;
+    const isCurrentlyCompleted = completed[key];
+
+    // Optimistic update
+    setCompleted((prev) => ({
+      ...prev,
+      [key]: !isCurrentlyCompleted,
+    }));
+
+    try {
+      if (isCurrentlyCompleted) {
+        await apiFetch(`/progress/${key}`, { method: "DELETE" });
+      } else {
+        await apiFetch(`/progress/${key}`, { method: "POST" });
+      }
+    } catch {
+      // Revert on failure
+      setCompleted((prev) => ({
+        ...prev,
+        [key]: isCurrentlyCompleted,
+      }));
+    }
+  };
+
+  const handleLogin = async () => {
+    setAuthError("");
+    try {
+      const optionsRes = await apiFetch("/auth/login-options", {
+        method: "POST",
+      });
+      const options = await optionsRes.json();
+      const authResp = await startAuthentication({ optionsJSON: options });
+      const verifyRes = await apiFetch("/auth/login-verify", {
+        method: "POST",
+        body: JSON.stringify(authResp),
+      });
+      const result = await verifyRes.json();
+      if (result.verified) {
+        setUser(result.user);
+      } else {
+        setAuthError("Login failed");
+      }
+    } catch (err: any) {
+      if (err.name !== "NotAllowedError") {
+        setAuthError("Login failed");
+      }
+    }
+  };
+
+  const handleRegister = async () => {
+    if (!registerName.trim()) return;
+    setAuthError("");
+    try {
+      const optionsRes = await apiFetch("/auth/register-options", {
+        method: "POST",
+        body: JSON.stringify({ username: registerName.trim() }),
+      });
+      const options = await optionsRes.json();
+      const regResp = await startRegistration({ optionsJSON: options });
+      const verifyRes = await apiFetch("/auth/register-verify", {
+        method: "POST",
+        body: JSON.stringify(regResp),
+      });
+      const result = await verifyRes.json();
+      if (result.verified) {
+        setUser(result.user);
+        setShowRegister(false);
+        setRegisterName("");
+      } else {
+        setAuthError("Registration failed");
+      }
+    } catch (err: any) {
+      if (err.name !== "NotAllowedError") {
+        setAuthError("Registration failed");
+      }
+    }
+  };
+
+  const handleLogout = async () => {
+    await apiFetch("/auth/logout", { method: "POST" });
+    setUser(null);
+  };
+
+  const calculateProgress = () => {
+    let actionableTotal = 0;
+    let actionableCompleted = 0;
+
+    SCHEDULE_DATA.forEach((week, weekIndex) => {
+      week.days.forEach((workout, dayIndex) => {
+        const isRest =
+          workout.type === RunType.REST || workout.type === RunType.SLEEP;
+        if (!isRest) {
+          actionableTotal++;
+          if (completed[`${weekIndex}-${dayIndex}`]) {
+            actionableCompleted++;
+          }
+        }
+      });
+    });
+
+    if (actionableTotal === 0) return 0;
+    return Math.round((actionableCompleted / actionableTotal) * 100);
+  };
+
+  return (
+    <div className="min-h-screen w-full relative bg-black text-gray-100 font-sans selection:bg-orange-500/30">
+      {/* Background */}
+      <div className="fixed inset-0 z-0">
+        <img
+          src={BACKGROUND_IMAGE}
+          alt="Mountain Sunrise"
+          className="w-full h-full object-cover"
+        />
+        <div className="absolute inset-0 bg-black/60 backdrop-blur-[2px]"></div>
+        <div className="absolute inset-0 bg-gradient-to-b from-black via-transparent to-black opacity-90"></div>
+      </div>
+
+      {/* Main Content */}
+      <div className="relative z-10 container mx-auto px-4 py-4 md:py-6 max-w-7xl">
+        {/* Header */}
+        <header className="flex flex-col md:flex-row justify-between items-center mb-6 gap-4">
+          <div className="flex items-center gap-3">
+            <div className="p-2 bg-gradient-to-br from-orange-500 to-purple-600 rounded-xl shadow-lg shadow-orange-900/20">
+              <Mountain className="w-6 h-6 text-white" />
+            </div>
+            <div>
+              <h1 className="text-2xl md:text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-orange-200 to-purple-200 tracking-tight">
+                Summit Stride 5K
+              </h1>
+              <p className="text-gray-400 text-xs md:text-sm">
+                6-Week Preparation
+              </p>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-4 w-full md:w-auto">
+            <div className="flex-1 md:flex-none">
+              <div className="flex justify-between text-[10px] mb-1 text-gray-400">
+                <span>Progress</span>
+                <span>{calculateProgress()}%</span>
+              </div>
+              <div className="h-1.5 w-full md:w-32 bg-gray-800 rounded-full overflow-hidden">
+                <div
+                  className="h-full bg-gradient-to-r from-orange-500 to-purple-500 transition-all duration-700 ease-out"
+                  style={{ width: `${calculateProgress()}%` }}
+                ></div>
+              </div>
+            </div>
+
+            {/* Auth controls */}
+            <div className="flex gap-2 items-center">
+              {authLoading ? (
+                <Loader2 className="w-4 h-4 text-gray-400 animate-spin" />
+              ) : user ? (
+                <>
+                  <span className="text-xs text-gray-400 hidden md:inline">
+                    {user.username}
+                    {!user.approved && " (pending)"}
+                  </span>
+                  <button
+                    onClick={handleLogout}
+                    className="p-1.5 rounded-lg text-gray-400 hover:text-white hover:bg-white/10 transition-all border border-transparent hover:border-white/10"
+                    title="Sign out"
+                  >
+                    <LogOut className="w-4 h-4" />
+                  </button>
+                </>
+              ) : (
+                <>
+                  <button
+                    onClick={handleLogin}
+                    className="p-1.5 rounded-lg text-gray-400 hover:text-white hover:bg-white/10 transition-all border border-transparent hover:border-white/10"
+                    title="Sign in with Passkey"
+                  >
+                    <LogIn className="w-4 h-4" />
+                  </button>
+                  <button
+                    onClick={() => setShowRegister(true)}
+                    className="p-1.5 rounded-lg text-gray-400 hover:text-white hover:bg-white/10 transition-all border border-transparent hover:border-white/10"
+                    title="Register new Passkey"
+                  >
+                    <UserPlus className="w-4 h-4" />
+                  </button>
+                </>
+              )}
+            </div>
+          </div>
+        </header>
+
+        {/* Auth error */}
+        {authError && (
+          <div className="mb-4 p-3 bg-red-500/20 border border-red-500/30 rounded-lg text-red-200 text-sm">
+            {authError}
+            <button
+              onClick={() => setAuthError("")}
+              className="ml-2 text-red-400 hover:text-red-200"
+            >
+              dismiss
+            </button>
+          </div>
+        )}
+
+        {/* Training Zones Legend */}
+        <div className="mb-5 bg-gray-900/60 backdrop-blur-md rounded-xl border border-white/10 p-3 md:p-4">
+          <div className="flex flex-col md:flex-row md:items-center justify-between gap-2 mb-2">
+            <h3 className="text-xs font-bold text-gray-300 uppercase tracking-wider flex items-center gap-2">
+              Training Zones
+            </h3>
+          </div>
+
+          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-2 text-[10px] md:text-xs">
+            <div className="bg-red-500/10 border border-red-500/20 rounded-lg p-2">
+              <div className="flex items-center gap-1.5 mb-1">
+                <div className="w-1.5 h-1.5 rounded-full bg-red-500"></div>
+                <span className="font-bold text-red-200 uppercase">Speed</span>
+              </div>
+              <div className="text-red-100/90 font-mono text-sm font-bold">
+                Zone 5
+              </div>
+              <div className="text-red-300/60 mt-0.5 leading-tight">
+                Max Effort (90%+)
+              </div>
+            </div>
+
+            <div className="bg-amber-500/10 border border-amber-500/20 rounded-lg p-2">
+              <div className="flex items-center gap-1.5 mb-1">
+                <div className="w-1.5 h-1.5 rounded-full bg-amber-500"></div>
+                <span className="font-bold text-amber-200 uppercase">
+                  Threshold
+                </span>
+              </div>
+              <div className="text-amber-100/90 font-mono text-sm font-bold">
+                Zone 4
+              </div>
+              <div className="text-amber-300/60 mt-0.5 leading-tight">
+                Hard Effort (80-90%)
+              </div>
+            </div>
+
+            <div className="bg-purple-500/10 border border-purple-500/20 rounded-lg p-2">
+              <div className="flex items-center gap-1.5 mb-1">
+                <div className="w-1.5 h-1.5 rounded-full bg-purple-500"></div>
+                <span className="font-bold text-purple-200 uppercase">
+                  Long Run
+                </span>
+              </div>
+              <div className="text-purple-100/90 font-mono text-sm font-bold">
+                Zone 2
+              </div>
+              <div className="text-purple-300/60 mt-0.5 leading-tight">
+                Conversational (60-70%)
+              </div>
+            </div>
+
+            <div className="bg-sky-500/10 border border-sky-500/20 rounded-lg p-2">
+              <div className="flex items-center gap-1.5 mb-1">
+                <div className="w-1.5 h-1.5 rounded-full bg-sky-500"></div>
+                <span className="font-bold text-sky-200 uppercase">Easy</span>
+              </div>
+              <div className="text-sky-100/90 font-mono text-sm font-bold">
+                Zone 2
+              </div>
+              <div className="text-sky-300/60 mt-0.5 leading-tight">
+                Conversational (60-70%)
+              </div>
+            </div>
+
+            <div className="bg-emerald-500/10 border border-emerald-500/20 rounded-lg p-2 flex flex-col justify-center">
+              <div className="flex items-center gap-1.5 mb-1">
+                <div className="w-1.5 h-1.5 rounded-full bg-emerald-500"></div>
+                <span className="font-bold text-emerald-200 uppercase">
+                  Recovery
+                </span>
+              </div>
+              <div className="text-emerald-100/90 font-mono text-sm font-bold">
+                Zone 1
+              </div>
+              <div className="text-emerald-300/60 leading-tight">
+                Active Recovery (&lt;60%)
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Schedule Grid */}
+        <div className="overflow-x-auto pb-4 custom-scrollbar">
+          <div className="min-w-[800px]">
+            <div className="grid grid-cols-8 gap-2 mb-2 text-center">
+              <div className="text-gray-500 font-bold uppercase text-[10px] tracking-wider flex items-center justify-center">
+                Week
+              </div>
+              {DAYS_OF_WEEK.map((day) => (
+                <div
+                  key={day}
+                  className="text-gray-400 font-bold uppercase text-[10px] tracking-wider"
+                >
+                  {day}
+                </div>
+              ))}
+            </div>
+
+            <div className="space-y-2">
+              {SCHEDULE_DATA.map((week, weekIndex) => (
+                <div
+                  key={week.weekNum}
+                  className="grid grid-cols-8 gap-2 group hover:bg-white/[0.02] p-1.5 rounded-lg transition-colors"
+                >
+                  <div className="flex flex-col items-center justify-center border-r border-white/10 pr-2">
+                    <span className="text-xl font-black text-gray-700 group-hover:text-gray-500 transition-colors">
+                      {week.weekNum}
+                    </span>
+                    <span className="text-[9px] text-gray-600 uppercase">
+                      Week
+                    </span>
+                  </div>
+
+                  {week.days.map((workout, dayIndex) => (
+                    <WorkoutCard
+                      key={`${weekIndex}-${dayIndex}`}
+                      workout={workout}
+                      dayName={DAYS_OF_WEEK[dayIndex]}
+                      isCompleted={!!completed[`${weekIndex}-${dayIndex}`]}
+                      canEdit={canEdit}
+                      onToggle={() => toggleDay(weekIndex, dayIndex)}
+                    />
+                  ))}
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Register Modal */}
+      {showRegister && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center px-4">
+          <div
+            className="absolute inset-0 bg-black/80 backdrop-blur-sm"
+            onClick={() => {
+              setShowRegister(false);
+              setAuthError("");
+            }}
+          ></div>
+          <div className="relative bg-gray-900 border border-gray-700 rounded-2xl w-full max-w-sm p-6 shadow-2xl">
+            <h3 className="text-xl font-bold text-white mb-4">
+              Register Passkey
+            </h3>
+            <input
+              type="text"
+              value={registerName}
+              onChange={(e) => setRegisterName(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && handleRegister()}
+              placeholder="Your name"
+              className="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-orange-500 mb-4"
+              autoFocus
+            />
+            <div className="flex gap-3 justify-end">
+              <button
+                onClick={() => {
+                  setShowRegister(false);
+                  setAuthError("");
+                }}
+                className="px-4 py-2 bg-white/10 hover:bg-white/20 text-white rounded-lg text-sm font-medium transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleRegister}
+                className="px-4 py-2 bg-orange-500 hover:bg-orange-600 text-white rounded-lg text-sm font-medium transition-colors"
+              >
+                Register
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default App;

apps/running/src/components/WorkoutCard.tsx

@@ -0,0 +1,104 @@
+import React from "react";
+import { Check } from "lucide-react";
+import { RunType, Workout } from "../types";
+
+interface WorkoutCardProps {
+  workout: Workout;
+  isCompleted: boolean;
+  canEdit: boolean;
+  onToggle: () => void;
+  dayName?: string;
+}
+
+const getColors = (type: RunType): string => {
+  switch (type) {
+    case RunType.SPEED:
+      return "bg-red-500/20 border-red-500/30 text-red-100 hover:bg-red-500/30";
+    case RunType.THRESHOLD:
+      return "bg-amber-500/20 border-amber-500/30 text-amber-100 hover:bg-amber-500/30";
+    case RunType.LONG:
+      return "bg-purple-500/20 border-purple-500/30 text-purple-100 hover:bg-purple-500/30";
+    case RunType.EASY:
+      return "bg-sky-500/20 border-sky-500/30 text-sky-100 hover:bg-sky-500/30";
+    case RunType.ACTIVE_REST:
+    case RunType.CROSS_TRAINING:
+      return "bg-emerald-500/20 border-emerald-500/30 text-emerald-100 hover:bg-emerald-500/30";
+    case RunType.REST:
+    case RunType.SLEEP:
+      return "bg-gray-700/30 border-gray-600/30 text-gray-400 hover:bg-gray-700/40";
+    case RunType.EVENT:
+      return "bg-yellow-400/40 border-yellow-400/50 text-white font-bold shadow-[0_0_15px_rgba(250,204,21,0.3)] hover:bg-yellow-400/50";
+    default:
+      return "bg-gray-800/50 border-gray-700 text-gray-300";
+  }
+};
+
+const WorkoutCard: React.FC<WorkoutCardProps> = ({
+  workout,
+  isCompleted,
+  canEdit,
+  onToggle,
+  dayName,
+}) => {
+  const colorClass = getColors(workout.type);
+  const isRestDay =
+    workout.type === RunType.REST || workout.type === RunType.SLEEP;
+
+  return (
+    <div
+      className={`
+        relative p-2 rounded-lg border backdrop-blur-sm transition-all duration-300 group
+        flex flex-col justify-between h-full min-h-[70px]
+        ${colorClass}
+        ${isCompleted ? "opacity-50 grayscale-[50%]" : "opacity-100"}
+      `}
+    >
+      <div className="flex justify-between items-start mb-0.5">
+        {dayName && (
+          <span className="md:hidden text-[10px] font-bold uppercase tracking-wider opacity-60">
+            {dayName}
+          </span>
+        )}
+      </div>
+
+      <div className="flex-grow flex flex-col justify-center">
+        {workout.duration && (
+          <div className="text-sm font-semibold mb-0.5 leading-none">
+            {workout.duration}
+          </div>
+        )}
+        <div className="text-[10px] uppercase tracking-wide font-medium leading-tight">
+          {workout.note || workout.type}
+        </div>
+      </div>
+
+      {!isRestDay && (
+        <div className="mt-1 flex items-center justify-end">
+          {canEdit ? (
+            <button
+              onClick={onToggle}
+              className={`
+                flex items-center justify-center w-5 h-5 rounded-full border transition-all duration-300
+                ${
+                  isCompleted
+                    ? "bg-green-500 border-green-500 text-black scale-110 shadow-[0_0_10px_rgba(34,197,94,0.6)]"
+                    : "border-white/30 hover:border-white/80 hover:bg-white/10"
+                }
+              `}
+            >
+              {isCompleted && <Check className="w-3 h-3" />}
+            </button>
+          ) : (
+            isCompleted && (
+              <div className="flex items-center justify-center w-5 h-5 rounded-full bg-green-500 border-green-500 text-black">
+                <Check className="w-3 h-3" />
+              </div>
+            )
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default WorkoutCard;

apps/running/src/constants.ts

@@ -0,0 +1,89 @@
+import { RunType, WeekSchedule } from "./types";
+
+export const SCHEDULE_DATA: WeekSchedule[] = [
+  {
+    weekNum: 1,
+    days: [
+      { type: RunType.SPEED, duration: "5 min", isKeyWorkout: true },
+      { type: RunType.ACTIVE_REST },
+      { type: RunType.EASY, duration: "20 min" },
+      { type: RunType.ACTIVE_REST },
+      { type: RunType.CROSS_TRAINING },
+      { type: RunType.LONG, duration: "40 min" },
+      { type: RunType.REST },
+    ],
+  },
+  {
+    weekNum: 2,
+    days: [
+      { type: RunType.SPEED, duration: "7.5 min", isKeyWorkout: true },
+      { type: RunType.ACTIVE_REST },
+      { type: RunType.EASY, duration: "20 min" },
+      { type: RunType.ACTIVE_REST },
+      { type: RunType.CROSS_TRAINING },
+      { type: RunType.LONG, duration: "45 min" },
+      { type: RunType.REST },
+    ],
+  },
+  {
+    weekNum: 3,
+    days: [
+      { type: RunType.SPEED, duration: "7.5 min", isKeyWorkout: true },
+      { type: RunType.ACTIVE_REST },
+      { type: RunType.EASY, duration: "30 min" },
+      { type: RunType.EASY, duration: "30 min" },
+      { type: RunType.CROSS_TRAINING },
+      { type: RunType.LONG, duration: "50 min" },
+      { type: RunType.REST },
+    ],
+  },
+  {
+    weekNum: 4,
+    days: [
+      { type: RunType.SPEED, duration: "10 min", isKeyWorkout: true },
+      { type: RunType.EASY, duration: "30 min" },
+      { type: RunType.EASY, duration: "15 min" },
+      { type: RunType.EASY, duration: "30 min" },
+      { type: RunType.CROSS_TRAINING },
+      { type: RunType.LONG, duration: "60 min" },
+      { type: RunType.REST },
+    ],
+  },
+  {
+    weekNum: 5,
+    days: [
+      { type: RunType.SPEED, duration: "12 min", isKeyWorkout: true },
+      { type: RunType.EASY, duration: "25 min" },
+      { type: RunType.EASY, duration: "30 min" },
+      { type: RunType.EASY, duration: "30 min" },
+      { type: RunType.CROSS_TRAINING },
+      { type: RunType.LONG, duration: "45 min" },
+      { type: RunType.REST },
+    ],
+  },
+  {
+    weekNum: 6,
+    days: [
+      { type: RunType.SPEED, duration: "6 min", isKeyWorkout: true },
+      { type: RunType.ACTIVE_REST },
+      { type: RunType.EASY, duration: "20 min" },
+      { type: RunType.EASY, duration: "20 min" },
+      { type: RunType.REST },
+      { type: RunType.EVENT, duration: "", note: "Event day!" },
+      { type: RunType.SLEEP },
+    ],
+  },
+];
+
+export const DAYS_OF_WEEK = [
+  "Monday",
+  "Tuesday",
+  "Wednesday",
+  "Thursday",
+  "Friday",
+  "Saturday",
+  "Sunday",
+];
+
+export const BACKGROUND_IMAGE =
+  "https://images.unsplash.com/photo-1464822759023-fed622ff2c3b";

apps/running/src/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Summit Stride 5K</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
+    <style>
+      body { font-family: 'Inter', sans-serif; }
+      ::-webkit-scrollbar { width: 8px; height: 8px; }
+      ::-webkit-scrollbar-track { background: #1a1a1a; }
+      ::-webkit-scrollbar-thumb { background: #4a4a4a; border-radius: 4px; }
+      ::-webkit-scrollbar-thumb:hover { background: #555; }
+    </style>
+  </head>
+  <body class="bg-black text-white">
+    <div id="root"></div>
+    <script type="module" src="/index.tsx"></script>
+  </body>
+</html>

apps/running/src/index.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+
+const rootElement = document.getElementById("root");
+if (!rootElement) {
+  throw new Error("Could not find root element to mount to");
+}
+
+const root = ReactDOM.createRoot(rootElement);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

apps/running/src/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "summit-stride-frontend",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@simplewebauthn/browser": "^11.0.0",
+    "lucide-react": "^0.563.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "typescript": "~5.6.0",
+    "vite": "^6.0.0"
+  }
+}

apps/running/src/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+    "allowImportingTsExtensions": true,
+    "noEmit": true
+  }
+}

apps/running/src/types.ts

@@ -0,0 +1,31 @@
+export enum RunType {
+  SPEED = "Speed Work",
+  THRESHOLD = "Threshold Work",
+  LONG = "Long Run",
+  EASY = "Easy Run",
+  ACTIVE_REST = "Active Rest",
+  CROSS_TRAINING = "Cross-training",
+  REST = "Rest",
+  EVENT = "Event Day",
+  SLEEP = "Sleep",
+}
+
+export interface Workout {
+  type: RunType;
+  duration?: string;
+  note?: string;
+  isKeyWorkout?: boolean;
+}
+
+export interface WeekSchedule {
+  weekNum: number;
+  days: Workout[];
+}
+
+export type CompletionState = Record<string, boolean>;
+
+export interface AuthUser {
+  id: number;
+  username: string;
+  approved: number;
+}

apps/running/src/vite.config.ts

@@ -0,0 +1,21 @@
+import path from "path";
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  base: "/running/",
+  plugins: [react()],
+  build: {
+    outDir: "dist",
+  },
+  server: {
+    proxy: {
+      "/api": "http://localhost:8080",
+    },
+  },
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "."),
+    },
+  },
+});

docker-compose.yml

@@ -55,6 +55,22 @@ services:
       caddy.reverse_proxy: "{{upstreams 8080}}"
     restart: unless-stopped
 
+  running-app:
+    build: ./apps/running
+    container_name: running-app
+    networks:
+      - server-network
+    volumes:
+      - ./apps/running/data:/app/data
+    environment:
+      - NODE_ENV=production
+      - SESSION_SECRET=${RUNNING_SESSION_SECRET:-change-me-in-production}
+    labels:
+      caddy: jamesvanboxtel.com
+      caddy.handle_path: /running/*
+      caddy.handle_path.reverse_proxy: "{{upstreams 8080}}"
+    restart: unless-stopped
+
 networks:
   server-network:
     external: false