Web / 前端

新人類計畫:群體監督的習慣養成平台

獨立完成|Next.js、Firebase、TypeScript、PWA

將散落在 LINE 群組中的打卡紀錄轉化為結構化的數據管理系統。這不僅是一個打卡 App,更是透過全體監督、自動化獎懲與願望機制,深度整合社群動力與行為管理的系統化工具。

#web

專案亮點

  • 自動化考勤與點數結算系統
  • 成員內容全透明動態牆
  • 願望池抽選與集體成就感
  • 多維度歷史數據分析與統計介面

專案詳情

1. 緣起與挑戰:從混亂的 LINE 群組中尋找解法

「新人類計畫」最初是在 LINE 群組運作的行為規範機制。成員每日設定目標、拍照打卡並互相監督。然而,隨著計畫長期運作,資訊分散在記事本與相簿中,難以追蹤歷史統計,且人為判定失敗與點數極其耗時且容易疏漏。

本專案的核心目標是將這套**「群體行為習慣機制」產品化**,將零散的通訊紀錄轉化為結構化的數據管理系統。

2. 核心功能亮點

  • 自動化考勤判定:系統嚴格執行「隔日中午 12:00」的提交截止規則,自動判定達成狀態,並根據複雜的級距公式計算週點數與失敗天數,大幅釋放管理成本。
  • 群體監督動態牆:打造一個完全公開透明的展示空間,所有成員的打卡內容(圖片與文字)皆為即時動態。這種「被看見」的壓力與動力,正是本計畫成功的關鍵。
  • 遊戲化獎勵機制(願望池):當群組達成「全員 0 點」的集體成就時,系統會從願望池中隨機抽取活動。這將個人目標與團隊利益連結,強化了社群凝聚力。
  • 全方位統計查詢:支持任意時間區間的成果回溯,讓成員能掌握自己的成長走勢,也方便進行長期彙報與表揚。

3. 技術架構與設計思維

  • Serverless 與即時性:採用 Next.js 搭配 Firebase (Auth, Firestore, Storage) 的無伺服器架構,利用 Firestore 的即時監聽(Real-time Listener)特性,確保各成員在提交後,動態牆能第一時間更新,維持社群互動的緊湊感。
  • 行動端優先的極簡體驗:考量到打卡場景多在移動端,介面設計採用深色調現代設計(Glassmorphism),並針對圖片上傳進行了客戶端壓縮優化,確保在各種網路環境下都能快速完成提交。
  • PWA 整合:透過 PWA 技術,讓網頁應用具備接近原生 App 的啟動體驗,提升成員每日打卡的便利性。

4. 專案價值

這個專案不僅解決了統計上的痛點,更證明了如何透過數位工具將「社群共修」的精神規模化。它從一個單純的聊天室規範,演變成一套具備完整邏輯、美觀介面且能穩定運作的行為管理工具。