「吉他點唱系統」是阿凱老師為「阿凱彈唱之夜」午休 / 校慶 / 班親會 / 教師研習演出量身打造的 即時互動點唱平台 — 整個體驗被包裝成「雜誌期數 + 卡帶 SIDE A/B」收藏，把校園演出升級成迷你 live house。
🎯 核心特色
- 🎵 觀眾掃 QR 完全不用註冊 — session-based 投票，Firestore
onSnapshot即時同步全場票數 - 🔔 「正在彈奏中」廣播 — 管理員按下開始彈奏 → 所有觀眾畫面跳橘色脈動邊框 + 浮動通知 + 一鍵跳吉他譜
- 🖥️ StagePage 演出模式
?mode=stage— Editorial 雜誌風全黑大螢幕，左大字 NOW PLAYING、右 TOP 5 UP NEXT、底跑馬燈含「卡帶 SIDE A / 33⅓ RPM」黑膠彩蛋，角落 QR + 滑鼠閒置 4 秒自動隱藏 UI - 🎭 彈唱儀式感遊戲化 — 開幕簾幕 OpeningCurtain / Combo 連擊 / DarkHorseOverlay 黑馬突進 / GlobalHypeOverlay 全場狂熱 / VoterBoard 催歌王
- 📰 IssueArchive 雜誌期數 — 每場演出 = 一期（例「ISSUE №12 · MAY 2026 · SIDE A」）+ A4 節目單列印 + IG 分享卡
- 🎸 歌曲 metadata 細到嚇人 —
songKey音調 /capo夾幾格 /bpm/progression和弦進行 /lyricBlocks結構化歌詞（INTRO/VERSE/CHORUS）+ LRCstartMs/ 1-3 星難度 / mood / era /kaiNote主理人短評
💡 設計理念
從 v1 Express + WebSocket 砍掉重練成 v2 完全 serverless：React 18 + TypeScript + Vite 5 + TailwindCSS + Shadcn/ui (Radix) + Wouter（GitHub Pages basePath 友善）+ Framer Motion + canvas-confetti + Firebase Auth + Firestore onSnapshot，npm 依賴從 651 → 376 個。firestore.rules 細到「歌單只有 admin 能寫、投票任何人可加但不可刪、users 只有本人 / admin 能改」— 同事看到都說「是個工程師才會做的細節」。
🎒 適合情境
- 會彈吉他 / 鋼琴 / Ukulele 想辦演出的老師
- 音樂老師 / 才藝社團指導
- 校慶 / 園遊會 / 班親會 / 教師研習茶敘破冰
- 學生婚禮（未來想當「儀式感的素人音樂人」）
部署在 cagoooo.github.io/song/。第一次辦演出建議從「午休 30 分鐘 + 5 首歌歌單 + 大螢幕模式」開始 — 觀眾的瘋狂程度會超乎預期。配對 #3 學生即時投票系統、#11 剛好學課堂互動 用同款 Firestore 即時架構。MIT 授權，cagoooo/song 開源。