技術作品集

TutorTrack

本地優先嘅補習運作儀表板:學生檔案、排堂、收費及付款證明追蹤、以 WhatsApp 為核心嘅提醒功能、日曆同步,以及可查閱即時數據並提出變更建議嘅 AI 助手。

TutorTrack 儀表板截圖
React TypeScript Vite HeroUI Express whatsapp-web.js
閱讀完整個案研究

TutorTrack-Cases

小型私人工具

TutorTrack-Cases 係 TutorTrack 嘅輔助項目:一個部署喺 Cloudflare Pages 嘅應用程式,將 TutorHabitTutor CircleKits Tutor 嘅即時補習兼職資訊整合成單一資訊流,設計對象係一小班補習導師朋友,而非公眾用戶。任何人都可以以訪客身份瀏覽資訊流;登入後就可以將個案標記為已處理,或記錄自己已開啟原始連結,呢啲狀態會跨裝置同步。

TutorTrack-Cases 資訊流截圖,顯示整合嘅補習兼職資訊

不儲存來源資料

個案資訊經抓取後,會透過明確嘅允許清單標準化,並只喺記憶體中緩存一分鐘——資料庫中只會保留用戶已處理咗邊啲個案。

真正嘅身份驗證

透過 Web Crypto API 進行加鹽 PBKDF2-SHA-256 密碼雜湊,session token 則以不記名方式儲存,伺服器端只保留加 pepper 嘅 SHA-256 雜湊值,絕不儲存原始 token。

貼合免費方案設計

資訊流每一頁對每個來源最多只會發出一次請求,確保用量遠低於 Cloudflare Workers 免費方案嘅單次請求呼叫限額。

React TypeScript Vite Cloudflare Pages Cloudflare D1 Web Crypto

Open Stage

Open Stage 致力連結香港青年表演者與真正、有償嘅演出舞台,屬於香港賽馬會慈善信託基金贊助嘅 21C@JC 計劃之一。技術層面上,呢個平台係一個雙語 React 應用程式,用於表演者及活動搜尋,並整合 TO_MO API 取得活動資料,配合 AI 助手提供活動推薦。

視覺設計以 HeroUI 嘅可自訂主題組件為基礎,令開發既快速又保持一致,再喺上面疊加一套自訂設計系統,追求一種特定嘅感覺——「一份現場節目表,而非一份宣傳單張」。色彩配置直接取樣自項目自家嘅演出照片——溫暖嘅鎢絲舞台燈光同偏冷嘅黃昏色調——而非套用通用色板;配合 Motion(Framer Motion)帶來嘅漸進式浮現同懸停浮起效果,令頁面感覺似一場演出徐徐展開,而唔只係載入完成。

Open Stage 主頁截圖
React TypeScript Vite HeroUI Motion i18n
閱讀完整個案研究

ICT Setter

未推出

(名稱有機會更改。)ICT Setter 係我正在開發嘅平台,供香港中學 ICT 教師及 HKDSE 擬題員撰寫、共同編輯、預覽、驗證及匯出雙語 HKDSE ICT 試卷(卷一 A、卷一 B 及卷二),毋須每次新試卷都要喺 Word 入面手動處理編號、縮排、演算法標示同繁體中文排版規則。

渲染引擎會用同一套流程生成瀏覽器預覽同埋匯出嘅 Word 文件,所以教師編輯時睇到嘅預覽絕不會與實際匯出結果有落差。試卷由真正嘅結構區塊組成——章節、題目、部分、格式化文字、表格、程式碼、圖表——而唔係一張空白頁,並設有版本歷史、按試卷分配嘅協作角色,以及可靠嘅自動儲存,確保兩個編輯階段唔會互相覆蓋。

ICT Setter 試卷編輯介面截圖
React TypeScript Vite shadcn/ui Express Prisma Python python-docx

ICT Setter 尚未正式推出,其題庫、官方試卷範本及內部教材仍屬機密。以上內容只描述系統嘅性質,並非任何具體試題內容。

Colloquy

早期原型

(名稱有機會更改。)英語口語練習工具:揀選一個話題,同 AI 對話夥伴進行真實嘅一問一答對話,之後可以重溫對話紀錄。呢個係邁向完整版 HKDSE 口試練習平台嘅第一步——亦係我第一個踏出 ICT 範疇、進入英語教育科技(EdTech)嘅項目。

Colloquy 對話進行中畫面,AI 練習夥伴正在發言
React TypeScript Vite Mantine Express AIMLAPI SQLite

我嘅工作由 AI 加速完成,日常都會用 Codex 同 Claude Code 呢類工具。