---
# System prepended metadata

title: A+ Project Meeting Note - T4 <> PJCHENDER

---

# A+ Project Meeting Note - T4 <> PJCHENDER

## Tech Hour (20200831):
## Questions
* 這次的目的希望能藉由專案熟悉 React 與相關的工具與生態系，除了 React Hook 跟 Redux 之外，還有沒有建議要學的東西？
* 有沒有推薦的 React 常用的 CSS framework?
* 這次也想接觸關於前端效能優化的問題，想知道有沒有特別關於 React 的效能議題?
* 關於離線操作的設計方向
    * PWA (cache)
    * how to know if it's online or offline?
* 關於多人共筆的設計方向
    * socket.io
    * authentication/authorization
    * when to write to database?

## Note: 
 
### 方向：
* 初步看來切版部分不會那麼多，若要以練 React 為主，先以
    * 個人編輯
    * 他人可以瀏覽
    * super admin
        * e.g., user dashboard (CRUD)
    * [optional] 多人共同編輯

### CSS Framework

**選擇**

- React Bootstrap
    - 不推薦
- Semantic 
    - 純 css，和 React 沒有太多互動
    - 不推薦
- Material UI
    - 從 react 的角度思考
    - 從 mobile 的設計為出發
    - 樣式相較 Ant Design 沒有那麼好看
- Ant Design
    - 從 react 的角度思考，相當完整
    - 相當完整，設計討喜
    - 比較大包
- Tailwind CSS
    - 可以自定義 class name 樣式
    - 可搭配 Material or Ant Design 使用
- Styled components
    - 可搭配 Material or Ant Design 使用

**目標**

- 能夠客製化元件樣式


### React

**目標**

- user role management（superadmin, owner, viewer)
- drag and drop（檔案上傳）
- 了解 HOC(higher order compnent) 是什麼, currying function, compoistion
- 使用登入驗證
- Notification
- 搜尋功能（前端）
    - [Fuse.js](https://fusejs.io/)

### Redux (資料管理)
**目標**
- redux
- redux-toolkit
- redux-saga
- 
### react-router

- 分頁（pagination）
- 權限設定

***
### Timeline
* week 2 `8/31 - 9/06`
    * study
        * redux
        * CSS framework
    * 完成 api server
* week 3 `9/07 - 9/13` 
    * 完成個人編輯與他人瀏覽功能
* week 4 `9/14 - 9/20`
    * 完成 super admin / dashboard
    * 完成離線功能 (e.g., PWA, `react-swr`)
* week 5 `9/21 - 9/27`
    * 前端優化 
    * [optional] 多人共同編輯
* week 6 `9/28 - 10/04`
    * 前端優化 

***
***
## Ref of doc
* Project note: https://hackmd.io/@tsungtingdu/BJKgMGcmv
* Meeting note: https://hackmd.io/@tsungtingdu/B1wsgQsXv
* Frontend design: https://docs.google.com/presentation/d/1GVKVaO1E7SzeVXaBNY9rAXo68FEGxjQq5z11pnU_uOE/edit?usp=sharing