chatterbox

chatterbox

Chatterbox是一個使用Next 13和Pusher構建的實時消息應用程序。

您可以創建組聊天或啟動DM。用戶可以發送短信或上傳多個視頻或圖像。

UI實時更新。意味著當另一個用戶創建頻道或發送消息時，您將立即看到更新。

部署在Vercel上：https：//chatterboxes.vercel.app/

技術堆棧

• next.js 13和打字稿
• 用於實時更新的推動器。
• Prisma for Orm。
• 下一個使用GitHub或電子郵件身份驗證的驗證。
• 上載文件上傳。
• 用於造型的尾燈。
• radix ui原始 + shadcn ui
• ZOD用於驗證表格和解析API有效載荷。
• 建築形式的鉤形形式。
• 全球國家的Jotai。

下一個13

該項目使用新的Next.js 13應用程序路由器，React服務器組件，服務器操作，懸疑和React 18的cache()

我們還利用API路由（將其部署為Vercel的無服務器功能部署到Vercel），例如註冊新用戶，創建消息等。

即時的

每當用戶發送消息，創建聊天或在線上市時，所有其他用戶都會收到通知，其UI將在實時更新。

這是用推送器完成的。我們會收聽諸如message:new或chat:update類的事件。當用戶做出操作時，我們在服務器上觸發事件，其他用戶的偵聽將接收更新。

在場

除了聆聽和触發事件外，推動器的存在頻道還用於使每個用戶當前在線。

當用戶登錄時，我們從Pusher中獲取每個活動用戶，並將其存儲在本地Jotai商店中。當用戶登錄或註銷時，Pusher會發送更新，然後我們本地更新Jotai商店。

打字稿

該項目用打字稿編寫，並使用Prisma生成的類型和ZOD模式和類型來確保整個代碼庫中的類型AFETY。由於Prisma自動生成類型，因此我們很少需要聲明或維護任何類型。

zod用於驗證每個形式的客戶端，以確保在進行任何API調用或突變之前確保值正確。

在服務器上，每個API路由還具有ZOD驗證，以確保輸入有效，並在繼續之前對應於ZOD模式。

ESLINT還配置了嚴格的規則，以確保代碼質量並最大程度地減少錯誤。

---

戒酒

1. “今天”，“昨天”等。指標
2. 會員狀態文本（描述下面用戶預覽卡）
3. 小組描述
4. 管理員角色
5. 為所有成員添加一個默認的初始頻道
6. 改進讀取可視化
7. 打開用戶詳細信息，請單擊GCS
8. 搜索渠道和用戶
9. 刪除消息
10. 發送鏈接（刮擦 - sepascraper和自動鏈接）
11. 未閱讀的計數器（在聊天和一般中）
12. 離開GCS
13. 聊天輸入上的鍵盤事件
14. 在設置模式中更改密碼
15. 忘記了使用nodemailer密碼流
16. BugFix ：視頻未在iOS上顯示
17. 邀請新用戶分組聊天
18. 靜音聊天
19. 在聊天和用戶/聊天列表中無限滾動
20. 實驗將API路由轉換為服務器操作（例如：刪除聊天）
21. 搜索消息
22. 讀取舊消息指示器
23. 回覆
24. 反應
25. gifs
26. 提及