今日其實係兩條線一齊行：一邊係 CRM App 繼續執返 production 之後遺留嘅坑，另一邊係突然想整隻小遊戲，結果由零開始寫到上 GitHub，再放埋入 Blog。

CRM App：三日修復之後嘅收尾

之前 CRM App 由 DEV 搬去 PROD，最大鑊位係 Supabase schema、MFA login flow 同 Vercel SPA routing。三日修復入面已經處理咗：

  • DEV / PROD schema 唔一致
  • audit_log 欄位命名唔一致
  • FK relationship join 導致 PostgREST 查詢失敗
  • MFA verify 後 session 未 ready 就 redirect
  • /companies 呢類 client-side route F5 後 404
  • Service Worker 檔案缺失
  • 大量 debug console logs

今日再做嘅，偏向「收口」同「減風險」。

今日 CRM App 改過啲咩

1. Auth storage key 改成由 Supabase URL 推導

之前 AuthContext / Login 入面處理 Supabase token 時，storage key 容易同環境綁死。今日改成由 Supabase URL derive key，令 DEV / PROD 或其他環境之間冇咁易拎錯 token。

改動集中喺：

  • src/contexts/AuthContext.tsx
  • src/pages/Login.tsx

呢個係 MFA flow 穩定性嘅後續修補。

2. Team RBAC migration 改成 idempotent

supabase/rbac/teams_implementation.sql 做咗大整理，重點係 migration 可以重跑而唔容易爆：

  • 用 IF NOT EXISTS
  • 避免重複建立 object
  • 將 teams / role / permission 相關 SQL 整得更適合 production 補 schema

呢類 SQL 好悶，但最救命。因為 production database 最怕「跑一次得，跑第二次死」。

3. CRM pages schema alignment

今日亦補咗多個 feature page 同 Supabase schema 之間嘅對齊：

  • ServiceTicket
  • UserManagement
  • InventoryAlerts
  • step3_schema_alignment.sql

呢啲位多數唔係 UI 大改，而係「頁面假設有某個欄位，但 database 未必有」呢類 production 常見問題。修完之後，功能頁同 SQL schema 會一致啲。

4. React hook lint 高風險問題

最後清咗幾個高風險 React hook lint issue，主要喺：

  • ActivityCalendar
  • Toast
  • AuthContext

呢類問題唔一定即刻爆，但一爆通常就係 state stale、effect 重複跑、或者 auth 狀態怪怪哋。今次算係技術債清理。

MiniGame：由一句「寫隻 game」開始

另一邊，今日順手寫咗一隻 HTML5 Canvas 小遊戲：星軌衝刺。

玩法好簡單：

  • 控制飛船
  • 避開紅色隕石
  • 食金色星星加分
  • 支援鍵盤同手機觸控
  • 有最高分記錄

技術上冇用 framework，得三個主檔：

  • index.html
  • styles.css
  • game.js

一開始只係想做到「快、簡單、即玩」，所以冇加 build step，亦冇引入 npm dependency。呢個選擇幾適合小遊戲，因為少一層 tooling，就少一層出事位。

上 GitHub 同放入 Blog

MiniGame 自己有一個 repo：

  • hellworld678/MiniGame

之後再將遊戲放入 Blog repo：

  • static/games/star-dash/
  • public/games/star-dash/

路徑係：

1

/games/star-dash/

中間仲修咗一個 sidebar spacing 問題：Archive card 同「你可能鐘意」card 太貼，最後喺 .home-archive 加返 margin-bottom，先再推 preview，確認冇問題後先上 production。

今日學到嘅嘢

1. Production bug 多數唔係單點問題

CRM App 嘅問題表面上有 MFA、有 schema、有 routing，但其實全部都係「環境一致性」問題：

  • local 同 preview 是否用同一套 assumptions
  • DEV schema 同 PROD schema 是否同步
  • auth token lifecycle 是否同 UI state 對齊
  • SPA hosting 是否知道所有 route 都要回到 index.html

單獨睇每個 bug 都唔大，但堆埋就會變成 production nightmare。

2. 小 project 都要有乾淨流程

MiniGame 細到可以一個下午寫完，但流程都要清楚：

  • repo 乾淨
  • .gitignore 擋 log
  • preview branch 先試
  • production 先 merge
  • 臨時 clone 用完清走

越細嘅 project，越容易因為「求其啦」而留低怪東西。今日就係順手練多次基本功。

下一步

CRM App 方面，下一步應該係：

  • 將 schema migration 流程再正式化
  • 減少手動 SQL Editor 操作
  • 加 E2E test 覆蓋 MFA / routing / core pages
  • 繼續清 React hook 同 TypeScript 類型問題

MiniGame 方面，可以再加：

  • 暫停功能
  • 音效
  • 手機手勢控制
  • leaderboard

今日算係一個幾典型嘅開發日：一半時間補 production 債，一半時間用小 project 練手。兩邊睇落唔同，但其實都係同一件事：將一樣嘢由「喺我部機得」推到「其他地方都穩定得」。