Course Map

2022 Course Map design

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

Some UI Reference

• NTUEE Course Map
• Trivago
• MUI
• relation graph

Basic Feature

old

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

new

• home page

  • 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

新想法

• 產學部：實習資料地圖（類似實習心得）
  • 像課程心得的模式
• 課程地圖，將電機修課關聯性視覺化
  • 官網好醜，研究領域課程流程圖
  • 可以用一個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