---
# System prepended metadata

title: 2024 Geekynote 前端交接
tags: [Handover]

---

# Geekynote 前端交接
[TOC]
## Build Code
1. [如何 Build 專案](http://140.115.59.165/geekynote/geekynote-web/-/blob/frontend/README.md)
## Frontend Architecture
1. [frontend 架構圖](https://app.diagrams.net/#G1w4cbNhFQk5JvmsQj7lI0gY5tBil4fFaE)
2. [架構解說影片](http://140.115.59.165/geekynote/geekynote-web/uploads/400a2943fef6a3c4c2bf7501a2e74b79/%E5%89%8D%E7%AB%AF%E6%9E%B6%E6%A7%8B%E5%9C%96.mp4)
3. [monorepo 說明](http://140.115.59.165/geekynote/geekynote-web/uploads/4ab7a728b8700fcba05396da0ad5f408/monorepo.mp4)
4. [webpack 說明](http://140.115.59.165/geekynote/geekynote-web/-/issues/164)
5. [為什麼使用 micro frontend 說明](http://140.115.59.165/geekynote/geekynote-web/uploads/f84e3a1f125ecf2a92bd9963647fc48c/why_and_what.mp4)
6. [如何建立新的 subsystem](http://140.115.59.165/geekynote/geekynote-web/uploads/679bf79ef5989bf2d0cfeec4b399a051/micro_frontend_implementation.mp4)
## Frontend File Structure
├─📁 src 
。├─📁 \_data\_
。├─📁 \_mocks\_
。├─📁 assets :arrow_left: icon 與 image
。├─📁 components :arrow_left: 常用的元件(例如按鈕與顯示)
。├─📁 declare
。├─📁 hooks :arrow_left: 常用的 react hook
。├─📁 lstore :arrow_left: browser storage
。├─📁 modals :arrow_left: label detail dialog
。├─📁 modules
。├─📁 router :arrow_left: 網址導航
。├─📁 scss
。├─📁 store :arrow_left: redux 狀態管理工具
。├─📁 testUtils
。├─📁 types
。├─📁 utils :arrow_left: 常用的 utils
。└─📁 views :arrow_left: 各種主頁界面

## Background Reference
1. 語言: [Typescript](https://www.typescriptlang.org/)
2. 主框架: [React](https://react.dev/)
3. 輔助 component: [MUI](https://mui.com/)
4. 狀態管理工具: [redux](https://redux-toolkit.js.org/tutorials/overview)
5. monorepo: [TurboRepo](https://www.npmjs.com/package/turbo)
6. micro service: [MicroApp](https://micro-zoe.github.io/micro-app/)
7. fetch 資料的管理工具: [useQuery](https://tanstack.com/query/latest/docs/framework/react/reference/useQuery)
## Video & Document
1. frontend label: [如何新增 Label](http://140.115.59.165/geekynote/geekynote-web/-/merge_requests/242)
2. frontend gitgraph: [架構](https://drive.google.com/file/d/1kYfE9suxU3Q8UEtNO9Z-U8pvnnkGihU9/view?usp=drive_link)，[設計](https://docs.google.com/presentation/d/1e-KerA_uw6zhEKs8mHpuTJbQtPheMGyi/edit#slide=id.p1)，[Trace Case](https://drive.google.com/file/d/1kYfE9suxU3Q8UEtNO9Z-U8pvnnkGihU9/view?usp=drive_link)，[演算法](https://pvigier.github.io/2019/05/06/commit-graph-drawing-algorithms.html)，[background reference](http://140.115.59.165/geekynote/geekynote-web/-/issues/176)，[known problem](http://140.115.59.165/geekynote/geekynote-web/-/issues/102)，[suggestion](http://140.115.59.165/geekynote/geekynote-web/-/issues/88)，[bug fixing story](http://140.115.59.165/geekynote/geekynote-web/-/merge_requests/80)，[end2end](http://140.115.59.165/geekynote/geekynote-web/uploads/149aa111df79849c2095f6861448fe66/GitGraph-E2E.mp4)，[為什麼不用 GitGraph.js](https://docs.google.com/presentation/d/1e-KerA_uw6zhEKs8mHpuTJbQtPheMGyi/edit#slide=id.p4)
3. frontend monaco-editor: [文件說明](http://140.115.59.165/geekynote/geekynote-web/-/issues/165)，[background reference](https://microsoft.github.io/monaco-editor/playground.html?source=v0.37.1#example-creating-the-editor-hello-world)，[FileView 與 Monaco-Editor 的關係](http://140.115.59.165/geekynote/geekynote-web/-/issues/178)，[Monaco End2End](http://140.115.59.165/geekynote/geekynote-web/uploads/4b876eabb7a7cbda1c173e97ddd5f5d8/Monaco_Editor_End2End.mp4)
4. frontend webpack: [webpack 架構說明](http://140.115.59.165/geekynote/geekynote-web/-/issues/164)，[background reference](https://askie.today/what-is-webpack/)，[Trace Case](https://drive.google.com/file/d/1txpWrr06r64O3wgFc2eqJDJj9TpxVSft/view?usp=drive_link)，[bug fixing history](http://140.115.59.165/geekynote/geekynote-web/-/merge_requests/97)
5. frontend search code: [實作方法](http://140.115.59.165/geekynote/geekynote-web/-/issues/166)，[Trace Case](https://drive.google.com/file/d/1nwkok1_N2PcZRJTrIh9YsnzeDZcvncRK/view?usp=share_link)，[bug fixing history](https://docs.google.com/spreadsheets/d/19rPhpi012UmkJzs9Ez_JN_56sYSJBFVm/edit?gid=1228133264#gid=1228133264)，[e2e testing](http://140.115.59.165/geekynote/geekynote-web/uploads/d926e0272de096515a1e9c3e8ebb8d63/SearchCode-e2e.mp4)
6. frontend 遷移到新的 backend 的紀錄: [MR](http://140.115.59.165/geekynote/geekynote-web/-/merge_requests/177)
7. frontend ownership: [algorithm](http://140.115.59.165/geekynote/geekynote-web/uploads/f313a75691d090b6ffae52c55206a972/ownership_specific.mp4)，[](http://140.115.59.165/geekynote/geekynote-web/uploads/5349338a783bb1f0c420f219f3b78de0/ownership_e2e.mp4)，[backeground refernece](http://140.115.59.186/svn/lab/students/2023/Peter%20%e7%be%85%e7%9a%93%e7%85%92/thesis/)
8. frontend ownership: [實作與 Trace Case](http://140.115.59.165/geekynote/geekynote-web/-/merge_requests/216)
9. frontend 檔案列表: [實作與案例分析與資料結構](http://140.115.59.165/geekynote/geekynote-web/-/merge_requests/269)
10. frontend label: [實作與 Trace Case 與如何新增新 label 到前端](http://140.115.59.165/geekynote/geekynote-web/-/merge_requests/242)
11. frontend redux 與 browser storage: [實作與 Trace Case 與如何新增新儲存物件](http://140.115.59.165/geekynote/geekynote-web/-/merge_requests/226)
12. frontend label filter box: [實作與 Trace Case](http://140.115.59.165/geekynote/geekynote-web/-/merge_requests/256)
13. frontend module label 與 portal view: [實作與Trace Case](http://140.115.59.165/geekynote/geekynote-web/-/merge_requests/287)
14. frontend 檔案跳轉: [實作與 Trace Case](http://140.115.59.165/geekynote/geekynote-web/-/merge_requests/200)
15. How to use video-label: [How to use](https://drive.google.com/file/d/1oCSJFsugBFVDTbm-kJ-pRN_V3iXjWiev/view?usp=drive_link)
16. frontend video-label: [實作與 Trace Case](http://140.115.59.165/geekynote/geekynote-web/uploads/53cc152d0a950da0eb42a9693e6516c0/Frontend_How_Video.mp4)


## Future
1. label single viewer 只完成 trace doc
2. label filter box 要更新成更多 type
3. 未接後端 get renamed file commits 的 Api
4. commit based 的 file view
![image](https://hackmd.io/_uploads/r1Zuj8ztC.png)


## 文件建立準則
[文件建立標準](https://docs.google.com/spreadsheets/d/19rPhpi012UmkJzs9Ez_JN_56sYSJBFVm/edit?gid=1477701032#gid=1477701032)
[kerker how videos](https://hackmd.io/satKIT9rTZWkahgY8G5qaQ)
[Aditya how videos](https://hackmd.io/q6D_O-tVTmuPMo92asLdvg)