Peter Pan's Teaching Progress 彼得潘的教學進度

English | 中文

English

A teaching progress tracker for teachers — record what you covered in every class, across university courses, cram schools, one-on-one tutoring, and corporate training. Guarded by an adorable arctic fox teaching assistant. 🦊❄️

Deployed on Cloudflare Workers with data stored in D1.

Features

• Two course modes
  • Weekly — for semester courses: pick the date of the first class, and every week's class date is computed automatically (same weekday each week). The current week is highlighted.
  • Per-session — for tutoring and corporate training: log one entry per session with its own date; optionally set an expected total number of sessions.
• Timeline view — each week/session is a node on a timeline: filled = recorded, orange glow = this week / latest session.
• Progress bar per course, plus a "record this week" shortcut.
• Read-only view for sharing: append ?view to the URL.
• Optimistic locking — concurrent edits are detected (HTTP 409) instead of silently overwritten.
• Aurora-and-snow arctic theme with full light/dark mode support.

Creating a course

Architecture

Piece	Role
public/index.html	Single-page frontend (vanilla JS, no build step) talking to /api/state
src/worker.js	Worker API — GET /api/state reads, PUT /api/state writes with a baseVersion optimistic lock
Cloudflare D1	Single-row table app_state(id=1, data, version, updated_at) holding the whole state as JSON

Deployment & access control

The site is deployed to Cloudflare Workers. Access is locked down with Cloudflare Zero Trust using a One-time PIN policy, so only the owner's email can sign in and open the site. Setup walkthrough (Medium article): https://medium.com/p/c2a900a1c699

There is no app-level password; Zero Trust is the only gate. If you disable Access, anyone with the URL can edit — add your own auth first.

Development

# run locally (local D1 + static assets)
wrangler dev

# deploy
wrangler deploy

# inspect the database
wrangler d1 execute course-tracker-db --remote --command "SELECT version, updated_at FROM app_state"

---

中文

老師專用的教學進度記錄網站 — 大學課程、補習班、一對一家教、企業內訓，每一堂教到哪都記在這裡，還有可愛的北極狐小助教陪伴。🦊❄️

部署在 Cloudflare Workers，資料存在 D1 資料庫。

功能

• 兩種課程模式
  • 每週上課 — 學期制課程：選第一堂上課日期，之後固定每週同一天上課，各週日期自動推算，並自動標出「本週」。
  • 逐堂記錄 — 家教、企業內訓：每上一堂記一筆、日期自己選，可選填預計總堂數。
• 時間軸視圖 — 每週／每堂是一個節點：實心＝已記錄、橘色光暈＝本週／最近一堂。
• 每門課有進度條，並提供「記錄本週進度」快捷按鈕。
• 檢視模式：網址加上 ?view 即為唯讀介面，適合分享給學生。
• 樂觀鎖：兩邊同時編輯會偵測衝突（HTTP 409），不會互相蓋掉。
• 極光配雪花的北極主題，完整支援深色／淺色模式。

新增課程

架構

檔案	角色
public/index.html	前端單頁（原生 JS、免建置），透過 /api/state 讀寫
src/worker.js	Worker API — GET /api/state 讀取；PUT /api/state 寫入，以 baseVersion 做樂觀鎖
Cloudflare D1	單列資料表 app_state(id=1, data, version, updated_at)，整份狀態存成 JSON

部署與存取控管

網站部署在 Cloudflare Workers，並透過 Cloudflare Zero Trust 的 One-time PIN（Email 一次性驗證碼）設定，只有自己的 Email 能登入存取。設定教學請見 Medium 文章：https://medium.com/p/c2a900a1c699

沒有應用程式層的密碼，Zero Trust 是唯一的防護。若關閉 Access，任何拿到網址的人都能編輯 — 請先自行加上驗證。

開發

# 本機執行（本地 D1 + 靜態資源）
wrangler dev

# 部署
wrangler deploy

# 查看資料庫
wrangler d1 execute course-tracker-db --remote --command "SELECT version, updated_at FROM app_state"