# Course Map

[2022 Course Map design](https://hackmd.io/WlV_kvcpRaiSYUxyq16ohg)

- Github: https://github.com/NTUEEInfoDep/NTUEECourseMap
- Template: https://github.com/kendallstrautman/brevifolia-gatsby-forestry
- CMS: [gatsby-source-notion-api](https://www.gatsbyjs.com/plugins/gatsby-source-notion-api/)
- Notion page: https://www.notion.so/0da604b4aa8d4e27be5e223abbb7c6fb?v=3e19cc00d6164f10a18d07cc0eeac8e5

## Some UI Reference
- [NTUEE Course Map](https://ntuee-saad.gitbook.io/ntuee-course-map/)
- [Trivago](https://www.trivago.com.tw/)
- [MUI](https://mui.com/zh/material-ui/react-drawer/)
- [relation graph](https://relation-graph.com/#/demo/scene-org)

## Basic Feature
### old
- [X] post list
- [x] filter
- [x] by semester
- [x] by teacher
- [x] by course type
- [ ] sort (1) :方嘉麟
- [x] 五星等第
- [ ] 置頂 (1) :方嘉麟
- [ ] 推(讚) (1) :方嘉麟
- ~~留言（用三方登入）（待討論）~~
- [x] search
- [ ] 比較貼文 (1) 蔡伊甯
- [ ] hover info (1)：林廣軒
- 教授總評分
- 課程分類

### new
- home page
- [x] course card (1) : 項達均
- [ ] UI/UX design (2) :丁建宏、謝沅瓏
- [ ] old UI/UX redesign (2) : 林禹融、項達均
- [ ] course relation graph (2) : 曾國碩、林育正

- [ ] data structure (2) : 張均豪, 陳秉緯, 袁紹翔
- course info data
- enterprise internship data
- graphql api

### performance
- [ ] useMemo
- [ ] lazyload

新想法
- 產學部：實習資料地圖（類似實習心得）
- 像課程心得的模式
- 課程地圖，將電機修課關聯性視覺化
- 官網好醜，[研究領域課程流程圖](https://web.ee.ntu.edu.tw/course3.php)
- 可以用一個graph，點到什麼學習方向那條路線上的就會亮出來
- 必修在中間，選修第二圈，研究所最外面
- 越基礎的越大，當下游的點被選的時候，上游課程可以亮出來
- 點兩下進入課程資訊（可能給課改部、產學部維護？），下面可以連結心得
- 進階
- 拿掉Notion 用SQL+file存圖片
- 拿掉gatsby

## Interface
Diagram: https://app.diagrams.net/#G1A-XYsxb7IT0SgrbKal26Rqtj4pTq-ag4

## Pages

### Main
- ref: Trivago
### After Search
- like Google
- search tools
- filter, sort

------------------
### Course Graph

- After hover or click on a node


- After double click on a node