# 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