GT-01 · 全端專案 · 2025
遊戲社群揪團平台
為玩家打造更有效率的揪團體驗。
01 / Context
背景與需求
玩家在尋找遊戲夥伴時，經常需要透過社群貼文、即時通訊群組與不同平台反覆搜尋資訊，不僅效率低落，也難以管理活動與參與狀態。
本專案整合揪團管理、活動報名、即時聊天室與留言互動功能，讓玩家能在單一平台完成從發起活動到交流互動的完整流程，提升揪團效率與社群參與體驗。
02 / Challenge
需要解決的問題
- C1
WebSocket 連線管理
若使用者頻繁切換頁面，容易建立重複 WebSocket 連線。
- C2
JWT 權限驗證
會員功能與管理功能需要權限控管，避免未登入或非授權使用者存取敏感資源。
- C3
多條件搜尋設計
玩家通常會依照遊戲類型、地區、日期等條件尋找活動。
- C4
資料關聯設計
活動、使用者、聊天室與留言之間存在多層資料關聯，若結構設計不佳容易造成查詢複雜度提升。
03 / Decision
技術方案與取捨
C1 → Realtime Communication
僅在揪團詳情頁建立連線，離開頁面立即斷開連線，避免重複建立 Socket 實例。
- WebSocket
- MongoDB
C2 → Authentication
使用 Passport JWT 驗證，並於 Middleware 中驗證 Token 與使用者身份，確保受保護資源僅能由授權使用者存取。
- JWT
- Passport
C3 → Search Experience
設計多條件搜尋與排序機制，支援關鍵字、標籤、地區與日期篩選，提升活動媒合效率。
- MongoDB
- Express
C4 → Data Modeling
透過 Mongoose Schema 建立資料關聯結構，並依照使用情境進行資料拆分與引用設計，兼顧查詢效率與維護性。
- MongoDB
- Mongoose
技術組成
- frontend
- Vue 3 · Vuetify · Pinia · Axios
- backend
- Node.js · Express · Socket.IO · JWT
即時聊天如果自己處理 WebSocket 會很麻煩，Socket.IO 已經幫忙處理好很多連線細節，所以選擇直接使用。
- database
- MongoDB · Mongoose
職訓時學的是 MongoDB。和 SQL Server 等關聯式資料庫相比，NoSQL 的語法更接近 JavaScript，學習和開發上都比較順手。
- tools
- GitHub Actions · Render
04 / Implementation
實作過程
- F1
揪團搜尋系統
提供多條件搜尋與排序功能，協助玩家快速找到符合需求的揪團活動。
- 關鍵字搜尋
- 地區搜尋
- 標籤搜尋
- 日期搜尋
- 排序功能
- F2
揪團管理功能
建立完整的揪團建立、參與與管理流程，讓主辦者與參加者能有效協作。
- 建立揪團
- 編輯揪團
- 收藏功能
- 留言板
- 參加申請管理
- F3
即時聊天室
透過 WebSocket 即時通訊，提升活動前後的互動與協調效率。
- Socket.IO
- 即時訊息同步
- 聊天紀錄保存
- 獨立聊天室
實際畫面
點擊放大檢視，可用左右鍵或滑動切換。
揪團首頁 搜尋功能 揪團詳情 聊天室 主辦揪團管理 個人資料管理
05 / Validation
測試與驗證
- 目前以手動測試為主，走過建立揪團、參加、留言與聊天等主要流程
- 開發過程中逐項修正收藏顯示等畫面問題，並調整 RWD 版面
06 / Reflection
限制與後續
學到的事
這是第一次完整走過前後端開發。我學到資料關聯要先規劃好，查詢才不會越寫越複雜；即時連線也要考慮建立和斷開的時機，不能只想著連得上。
下一步
目前沒有自動化測試，修改後要靠手動回歸。下一步會先替權限驗證和揪團流程補上測試。