使用上述技術製作的Messenger Clone
29286945-ebdd-4333-912f-a949c7179075.webm
c9794d89-487f-4f4d-b7c2-4c2008b6db5c.webm
主要功能：
- 使用Pusher進行即時訊息傳遞
- 使用Tailwind做RWD切版和動畫過渡效果
- 使用NextAuth進行憑證驗證
- 整合Google,Github身份驗證
- 使用Cloudinary CDN進行檔案和圖片上傳
- 使用react-hook-form進行客戶端表單驗證和處理
- 使用react-toast處理服務器錯誤
- 已讀回傳
- 在線/離線用戶狀態
- 群聊和一對一消息
- 傳圖片功能
- 可設定個人名稱和頭像
- 新增和管理聊天室和頻道
messenger的 clone project，react-hook-form和react-toast算是簡單上手易用，可以替代手寫達到更高效開發。
clsx可以很好的依據state切換className
用了大量組件，學習到組件資料夾結構和特殊函式的參數傳遞。
較困難的是用到比較多後端技術，api邏輯還算有弄清楚，其中資料庫結構的部分還沒有摸的很懂，可能要一開始規畫專案的時候就要先設計好格式。
Thanks to Antonio Erdeljac who made a great great video guide for Messanger Clone.
