# A+ Project - Clone HackMD (by T4)
### Key challenges
* 離線編輯/儲存
* 多人共筆
* [前端效能優化](https://medium.com/@chihsuan/%E7%B6%B2%E9%A0%81%E5%89%8D%E7%AB%AF%E6%95%88%E8%83%BD%E5%84%AA%E5%8C%96%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98-5993ccdb6f0d)
### User Stories
* Authentication
* [online] user can signup with email
* [online] user can signin with email and password
* [online] user can logout
* 💫 [online] user can edit profile
* Post
* [online] user can create a new post
* [online] user can edit a post
* [online] user can delete a post
* 💫 [online] user can publish and share a post with URL
* 💫 [online] user can un-publish a post
* ⭐️ [offline] user can create a new post
* ⭐️ [offline] user can edit a post
* Collaboration
* ⭐️ [online] user can invite other user as collaborator
* ⭐️ [online] users can edit a post at the same time

***
### ERD and API
Refer to
* https://github.com/tsungtingdu/hackmd_clone_api_server
* https://hackmd-clone.herokuapp.com/api-doc/#/

***

***
### Teck stack
#### Front-end
* React
* React Hook
* Redux
* CSS framework
* Material UI
* Material Kit React
* React Bootstrap
* Jest `optional`
#### Back-end (API server)
* Node/Express
* MySQL or MongoDB
* Swagger (api doc)
* Jset `optional`

***
### Ref
* https://github.com/yoychen/notence
* https://github.com/uiwjs/react-md-editor
* https://ui.toast.com/tui-editor/
* [實作Web即時共同編輯文件](https://homura0731.github.io/post/ironman2019/ironman-day-21/)
* https://www.valentinog.com/blog/socket-react/
* [Build a Realtime Editor Using Socket.IO](https://blog.bitsrc.io/build-a-realtime-editor-using-socket-io-f11703afd55)
* PWA, Service Worker?
* https://medium.com/@chihsuan/%E7%B6%B2%E9%A0%81%E5%89%8D%E7%AB%AF%E6%95%88%E8%83%BD%E5%84%AA%E5%8C%96%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98-5993ccdb6f0d

#### Redux & Redux Saga
* [Redux-saga 介紹](https://medium.com/@savemuse/redux-saga-%E4%BB%8B%E7%B4%B9-70d38d12cd3f)
* [React Redux | 小孩子才做選擇！ Hooks 和 Redux 我全都要！](https://medium.com/enjoy-life-enjoy-coding/react-redux-%E5%B0%8F%E5%AD%A9%E5%AD%90%E6%89%8D%E5%81%9A%E9%81%B8%E6%93%87-hooks-%E5%92%8C-redux-%E6%88%91%E5%85%A8%E9%83%BD%E8%A6%81-1fdd226f5d99)
* [Redux-Saga | 為了瞭解原理，那就來實作一個 Redux-Saga 吧！](https://medium.com/%E6%89%8B%E5%AF%AB%E7%AD%86%E8%A8%98/implementing-your-own-redux-saga-37910ddafc37)
* [React 與他的快樂小夥伴 Redux -事件處理（Handling events）](https://medium.com/enjoy-life-enjoy-coding/react-%E8%88%87%E4%BB%96%E7%9A%84%E5%BF%AB%E6%A8%82%E5%B0%8F%E5%A4%A5%E4%BC%B4-redux-%E4%BA%8B%E4%BB%B6%E8%99%95%E7%90%86-handling-events-8dd35545f7b9)
* [Getting Started with Redux](https://egghead.io/courses/getting-started-with-redux)
* [Saga Pattern 在前端的應用](https://denny.qollie.com/2016/05/14/redux-saga/)
* [學習 Redux-Saga 的起手式](https://medium.com/itsoktomakemistakes/%E5%AD%B8%E7%BF%92-redux-saga-%E7%9A%84%E8%B5%B7%E6%89%8B%E5%BC%8F-db4fd3a4dbce)
* [redux-saga 使用教學](http://falloutchonny.github.io/2017/05/17/redux-saga-%E4%BD%BF%E7%94%A8%E6%95%99%E5%AD%B8/)
#### Markdown
* ~~https://github.com/mdx-js/mdx~~
* ⭐️ https://github.com/rexxars/react-markdown
* https://codesandbox.io/s/markdown-editor-7c199?file=/src/editorContext.js
* https://www.youtube.com/watch?v=fF9vrZNSQC4&ab_channel=CoderOne
* ⭐️ https://github.com/kkfor/for-editor
* ⭐️ https://github.com/JedWatson/react-md-editor

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