---
# System prepended metadata

title: 預選系統前端

---

# 預選系統前端

## 架構圖
![](https://i.imgur.com/OOkTEuw.jpg)
![](https://i.imgur.com/2PTYCVY.jpg)
![](https://i.imgur.com/HOJO15A.jpg)
![](https://i.imgur.com/mQQsCzN.jpg)
![](https://i.imgur.com/LfwfzoH.jpg)
![](https://i.imgur.com/fxXpABM.jpg)
![](https://i.imgur.com/LimuhUo.jpg)

PM: 朱哲廣 (Kenchu123)
成員:
陳威侑 (Jasperora) => Main
黃筱穎(monica0325) => Select Course
楊新慧(sheep706) => Select Course
楊宗賢 (yth98) => Couse
游耿睿 (ray0426)
楊博宇(KevinYang71)
林天行(a113062130630210)
陳駿瑋(caffrey928) => Login
陳冠霖             => Course Card

介面設計:
楊博宇(KevinYang71)
黃筱穎(monica0325)
去年: https://course.ntuee.org/login

- Main Page (`/`)
    - 登陸功能
    - 使用教學
    - 課程課的時間 & 教室
    - 小遊戲 (optional)
        - 玩贏可以跳過去
    - 公告系統 (optional, new)
    - 學生改密 (optional)
- Course Page (`/courses`)
    - 看所有當前的課 (跟後端要課程表)
    - 排得美美的
    - 點進去可以到 course select page
- Course Select Page (`/courses/:course_id`)
    - 可以排課程的順序
    - 課程說明
    - 存檔 (跟後端說要存檔)
    - 選課人數 (?
    - 確定按鈕


- Admin Page (`/admin`)
    - 可以登錄
    - 上傳學生資料
        - 上傳 csv
    - 上傳課程資料
        - 上傳 csv
    - 更新課程資訊
        - embed code editor
    - 設定選課開始與結束時間
        - 要可以點
    - 跑分發，得結果
        - 下載 csv
    - 改 admin 人密碼
        - 忘記密碼 (optional)
        - stay login
    - 發公告 (optional)
        - embed code editor


## Technique

React
React Redux
Material UI
React Router 
fetch or axios (https://github.com/axios/axios)


## Templates
web template


## HW
### TodoList + Material UI
- 新增 Todo
- 刪除 Todo
- 排序 Todo (根據時間)
- 長得好看
- Optional
    - 看起來很屌

https://www.youtube.com/watch?v=E1E08i2UJGI&ab_channel=BrianDesign

## Some Videos

React:
https://www.youtube.com/watch?v=w7ejDZ8SWv8&ab_channel=TraversyMedia
React Router:
https://www.youtube.com/watch?v=Law7wfdg_ls&ab_channel=DevEd
React redux toolkit:
https://www.youtube.com/watch?v=iBUJVy8phqw&ab_channel=TheNetNinja
axios:
https://www.youtube.com/watch?v=6LyagkoRWYA&ab_channel=TraversyMedia
material-ui:
https://www.youtube.com/watch?v=vyJU9efvUtQ&ab_channel=TraversyMedia

