Skip to content

Latest commit

 

History

History
158 lines (111 loc) · 5.52 KB

README.md

File metadata and controls

158 lines (111 loc) · 5.52 KB

[109-2] Web Programming Final

(Group 25) VolleyballClubHouse 系排維護系統

一個提供給系排球隊紀錄球隊練習&比賽狀況的網站,支援使用者註冊、認證,紀錄練球時間、選擇是否參與,和上傳文章、影片、分析比賽數據等功能。

分工

  • 前端:劉宇超 sign in&up, Match, Practice, Detail, Profile, Analysis 前端頁面、串接 API
  • 後端:謝心默 Set up backend structure & implement most of the APIs with connection to DB
  • 全端:洪佳生 sign in&up connection, authentication page, eamil system, calendar, user list, my records, records, table, pages loading prepcocessing, log out, all modals and some api in backend.

程式架構

頁面架構

功能

註冊/登入

  • 註冊:錯誤提示 Email has been used
  • 驗證:寄驗證碼至信箱
  • 登入:錯誤提示 User not exit,Wrong password
  • 在未驗證或登入情況下會跳轉回對應頁面

Menu Bar

  • 左上角 search 能在 home 首頁輸入日期後跳轉至相應的日期

上傳練球影片&筆記

  • posts 切換影片、文章、所有
  • post 只有本人才能修改、刪除
  • 在 posts 對該篇 post 點擊 more 能夠進入該 post 的 detail
  • 在 detail 能夠刪除、修改內容,右邊列表點擊後能跳轉到其他 post 的詳細頁面

練球行事曆(Admin) & 標示練球是否會到

  • Admin 能夠新增、刪除事件
  • 新增事件後 會出現一枝筆 點擊後能簽到 再次點擊會取消簽到
  • 點擊日期格上的事件會跳出事件詳細資訊 事件的 note 會標註開始、結束的時間、地點、參加成員
  • 右上的工具列可以切換日、週、月
  • 左上的工具列可以根據右上工具的時間單位進行顯示時間的增減

UserList

  • 能夠在此搜尋、查看所有成員清單
  • 點擊能夠查看該名成員的 profile
  • Admin 能在此將其他 User 設為 Admin

Profile

  • 只有本人能夠修改
  • 能夠修改名字、生日、位置、背號、自我介紹

Match

  • 會出現兩個 buttons 分別導向 Records 或 Analysis

Records

  • Admin 能在此新增比賽 (點擊右下的按鈕)
  • 進入該比賽後能夠編輯該場比賽的數據 table (點擊右下按鈕)
  • 接著根據介面可以新增 table row、刪除 table、更新 table
  • 快速點擊兩下任意 row 的背號欄位可以將底下的新增改為刪除 此時點擊會刪除該 row

My Records (Only for admin)

  • Admin 能在此檢視自己上傳的比賽數據
  • Admin 也可以在此新增比賽 (點擊右下的按鈕) 同上
  • 並且只有在這裡才能刪除自己上傳的比賽數據

Analysis

  • 能夠選擇隊伍分析他的場數局數的勝敗
  • 右下的按鈕會顯示已記錄的球員數據

通知(小鈴鐺)

  • 若有其他用戶上傳文章、影片、新增事件、數據,會在下次登入時顯示上傳者以及上傳時間
  • 點擊後會列出事件點擊該事件能夠跳轉至相應的文章、影片、數據
  • 按下 clear 會將歷史的通知都刪除

使用

  • 創帳號後一開始都是無 Admin,localhost 端測試 =>需要去 mongoDB 手動將帳號的 isAdmin 改成 true
  • 我們提供 depoly 的 Admin 帳戶 => 帳號: [email protected] 密碼: admin

P.S. >> 會這樣是因為我們認為在 client 端不應該有一個方法可以讓自己成為 admin,因此我們假設一開始這個系統在發佈時就存在 Admin 了

  • 上傳影片的部分必須去 youtube 影片下面點擊分享-鑲嵌,將 youtube embed 網址貼上,否則影片無法正常顯示

Routes

  • 首頁(登入頁面) /
  • 行事曆(主頁面) /home
    • 個人頁面 /home/{username}-{userid}
      • 個人資料 /api/user/users/{userId}
    • 練球頁面 /home/practice
      • 上傳練習影片&文章 /home/practice/uploads
    • 比賽頁面 /home/game
      • 比賽數據頁面 /home/match/analysis
      • 比賽影片頁面 /home/match/videos - 上傳比賽影片&文章 /home/match/video/uploads

APIs

[name=謝心默] 參考 localhost:5000/api-doc/

Github

References

Facebook Post

[109-2] Web Programming Final

(Group 25) VolleyballClubHouse
  • Demo 影片連結
  • 描述這個服務在做什麼
    • 一個提供給系排球隊紀錄球隊練習&比賽狀況的網站,支援使用者註冊、認證,紀錄練球時間、選擇是否參與,和上傳文章、影片、比賽紀錄表等功能。
  • Deployed 連結 不公開
  • 使用/操作方式 (含伺服器端以及使用者端)
  • 使用與參考之框架/模組/原始碼
    • Frontend
      • react.js, jquery, material-ui, react-query, axios, moment, immer, react-table, eslint
    • Backend
      • node.js, express, dotenv, nodemon, mongoose
    • Database
      • mongoDB
  • 使用之第三方套件、框架、程式碼
    • Frontend
      • fullcalendar
    • Backend
      • bcyrpt, swagger, nodemailer, crypto