遊戲社群揪團平台
Full Stack Project - 2025
一個專為玩家打造的即時社群揪團平台， 結合搜尋篩選、活動管理與即時聊天室， 幫助玩家快速找到隊友並建立長期遊戲社群。
Overview
為玩家打造更有效率的揪團體驗。
玩家在尋找遊戲夥伴時， 經常需要透過社群貼文、即時通訊群組與不同平台反覆搜尋資訊， 不僅效率低落，也難以管理活動與參與狀態。 本專案整合揪團管理、活動報名、即時聊天室與留言互動功能， 讓玩家能在單一平台完成從發起活動到交流互動的完整流程， 提升揪團效率與社群參與體驗。
frontend
- Vue 3 Options API
- Vue Router
- Pinia 狀態管理
- Vuetify UI
- Responsive Design
backend
- RESTful API
- Socket.IO
- JWT Authentication
architecture
- MVC Architecture
- 搜尋條件設計
database
- MongoDB Schema Design
- 聊天紀錄儲存
Tech Stack
frontend
Vue 3 , Vuetify , Pinia , Axios
backend
Node.js , Express , Socket.IO , JWT
database
MongoDB , Mongoose
tools
GitHub Actions , Render
Feature Showcase
揪團搜尋系統
提供多條件搜尋與排序功能， 協助玩家快速找到符合需求的揪團活動。
關鍵字搜尋
地區搜尋
標籤搜尋
日期搜尋
排序功能
揪團管理功能
建立完整的揪團建立、參與與管理流程， 讓主辦者與參加者能有效協作。
建立揪團
編輯揪團
收藏功能
留言板
參加申請管理
即時聊天室
透過 WebSocket 即時通訊， 提升活動前後的互動與協調效率。
Socket.IO
即時訊息同步
聊天紀錄保存
獨立聊天室
Engineering Challenges
01 / WebSocket 連線管理
Realtime Communication
若使用者頻繁切換頁面， 容易建立重複 WebSocket 連線。
僅在揪團詳情頁建立連線， 離開頁面立即斷開連線， 避免重複建立 Socket 實例。
02 / JWT 權限驗證
Authentication
會員功能與管理功能需要權限控管， 避免未登入或非授權使用者存取敏感資源。
使用 Passport JWT 驗證， 並於 Middleware 中驗證 Token 與使用者身份， 確保受保護資源僅能由授權使用者存取。
03 / 多條件搜尋設計
Search Experience
玩家通常會依照遊戲類型、地區、日期等條件尋找活動。
設計多條件搜尋與排序機制， 支援關鍵字、標籤、地區與日期篩選， 提升活動媒合效率。
04 / 資料關聯設計
Data Modeling
活動、使用者、聊天室與留言之間存在多層資料關聯， 若結構設計不佳容易造成查詢複雜度提升。
透過 Mongoose Schema 建立資料關聯結構， 並依照使用情境進行資料拆分與引用設計， 兼顧查詢效率與維護性。
Project Gallery
揪團首頁
搜尋功能
揪團詳情
聊天室
主辦揪團管理
個人資料管理