chatterbox

Chatterbox

Chatterbox - это приложение для обмена сообщениями в реальном времени, построенное со следующим 13 и толкателем.

Вы можете создать групповой чат или начать DM. Пользователи могут отправлять текстовые сообщения или загружать несколько видео или изображений.

Пользовательский интерфейс обновляется в режиме реального времени. То есть, когда канал создается другим пользователем или когда отправляется сообщение, вы сразу же увидите обновление.

Развернуто на Vercel: https://chatterboxes.vercel.app/

Технический стек

• Next.js 13 и TypeScript
• Толкатель для обновлений в реальном времени.
• Призма для Орма.
• Следующая аут для аутентификации с GitHub или по электронной почте.
• Загрузка для загрузки файлов.
• Tailwindcss для стиля.
• Radix UI Primitives + Shadcn UI
• ZOD для проверки форм и полезных нагрузок API.
• Реактируйте форму крючка для форм здания.
• Jotai для глобального государства.

В следующем 13

В этом проекте используется новый маршрутизатор приложения next.js 13, компоненты сервера React, действия сервера, приостановка и React 18 cache()

Мы также используем маршруты API (развернутые в качестве без серверных функций для Vercel) для таких действий, как регистрация нового пользователя, создание сообщения и т. Д.

Реальное время

Всякий раз, когда пользователь отправляет сообщение, создает чат или, например, выходит в режиме онлайн, все остальные пользователи будут уведомлены, а их пользовательский интерфейс будет обновлен в режиме реального времени.

Это делается с толкателем. Мы слушаем такие события , как message:new или chat:update . Когда пользователь делает действие, мы запускаем событие на сервере, а прослушивание другого пользователя получит обновления.

Присутствие

Помимо прослушивания и запуска событий, каналы присутствия Pusher используются, чтобы вывести каждого пользователя в настоящее время онлайн.

Когда пользователь входит в систему, мы получаем каждого активного пользователя от Pusher и храним его в локальном магазине Jotai. Когда пользователь входит в систему или выйдет из системы, Pusher отправляет обновление, и мы обновляем магазин Jotai локально.

Машинопись

Этот проект написан в TypeScript и использует сгенерированные типы Prisma , схемы и типы ZOD для обеспечения типов в кодовой базе. Поскольку Prisma автоматически генерирует типы, нам редко приходится объявлять или поддерживать любые типы.

zod используется для проверки каждой формы клиента, чтобы убедиться, что значения являются правильными перед выполнением любых вызовов или мутаций API.

На сервере каждый маршрут API также имеет проверку ZOD, чтобы убедиться, что ввод действителен и соответствует схеме ZOD, прежде чем продолжить.

Eslint также настроен со строгими правилами для обеспечения качества кода и минимизации ошибок.

---

Тодос

1. «Сегодня», «вчера» и т. Д. Индикаторы
2. Текст статуса участника (описание ниже пользовательской карты)
3. Описание группы
4. Административная роль
5. Добавьте начальный канал по умолчанию для всех участников
6. Улучшить визуализацию чтения
7. Откройте данные пользователя на щелчок в GCS
8. Поиск каналов и пользователей
9. Удалить сообщения
10. Отправить ссылки (соскоб - метаскрель и автолизование)
11. Нечитанные счетчики (в чатах и ​​общем)
12. Оставив GCS
13. События клавиатуры при вводе чата
14. Изменить пароль в настройках Modal
15. Забыл поток пароля с nodemailer
16. Bugfix : видео, не отображаемые на iOS
17. Пригласить новых пользователей в групповой чат
18. Немой чаты
19. Бесконечная прокрутка внутри чатов и в списке пользователей/чата
20. Эксперимент преобразование маршрутов API в действия сервера (например: удалить чат)
21. Поиск сообщений
22. Чтение старых сообщений индикатор
23. Отвечать
24. Реакция
25. Gifs
26. Упоминания