2024 Geekynote 前端交接

# 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)