# A+ 專案介紹

在未來四週的時間當中，我將要嘗試打造如 HackMD 般的線上 markdown 編輯器。

### 為什麼要做這個題目?

其實我對於 side project 一直都沒有一個很明確的想法，我本來想做 CRM 系統或是 data dashboard，但是沒有想到很明確的應用場景或問題。直到有一天，看到有人做了類似 Google spreadsheet 的應用程式，讓我想到也許我可以自己做一個類似 HackMD 的應用程式。

做這個題目有幾個好處
1. 我自己就是 HackMD 的使用者，因此對於產品本身的功能與應用場景有一定程度的瞭解，讓我進而能夠拆解其功能與 user story，幫自己的 side project 找到合適的大小 (scope) 與問題
2. 由於有一個已存在的產品可以當作參考，因此我可以直接模仿該產品本身的視覺設計 (layout, color theme, etc..)，將學習重心放在工程面的實現。雖然這邊講說不用自己做視覺設計，但是要能夠刻出一個一模一樣畫面的應用程式，也是有挑戰性。
3. 最後，透過模仿一個既有產品，更能夠深刻認識到技術與問題的深度，以及自己與他們的差距。

### 專案挑戰

在這個專案中有幾個應用場景上的挑戰，譬如
* 自動儲存
* 離線操作
* 多人協作
* 權限設計
* 檔案拖曳上傳功能
* 前端效能優化

等挑戰。也許在四周的開發期間無法完全處理完，但至少要知道實作上可以如何處理。

### 實作技術

專案主要可以分成兩個部分：後端 API server 與前端 React app。由於這次希望能夠熟練 React 相關技術，因此會將大部分時間放在前端 React app 上。

後端主要使用的技術為
* Node.js
* Express.js
* MySQL
* Passport (JWT)
* Heroku (Deployment)

同時也用 Swagger 做了 API doc 以方便未來在開發前端時作測試。

雖然 API server 只會有最低限度的開發，所以未來也不太會有變動的機會，但若行有餘力也會希望能夠把測試做好。測試真的是確認產品功能的重要防線。

前端主要會使用
* React
* React-router
* Redux 和 Redux Saga
* 其他 React 相關套件，譬如 react-hook-form, toastify 等
* CSS framework，譬如 Material UI

### 期許

除了期待自己能夠順利完成專案、熟悉新技術之外，也希望透過每週與 mentor 的討論，提升自己對於技術的視野與思考，另一方面，也希望有機會可以和同學們多交流想法和意見，讓這四週的學習更加充實！

若對我的專案有興趣，可以到以下的 repo 逛逛：
* 前端：https://github.com/tsungtingdu/hackmd_clone_react
* 後端：https://github.com/tsungtingdu/hackmd_clone_api_server