chatterbox

Parlanchín

Chatterbox es una aplicación de mensajería en tiempo real construida con el próximo 13 y el empuje.

Puede crear un chat grupal o comenzar un DM. Los usuarios pueden enviar mensajes de texto o cargar múltiples videos o imágenes.

La interfaz de usuario se actualiza en tiempo real. Es decir, cuando otro usuario crea un canal, o cuando se envía un mensaje, verá instantáneamente la actualización.

Implementado en Vercel: https://chatterboxes.vercel.app/

Pila de tecnología

• Next.js 13 y mecanografiado
• Presente para actualizaciones en tiempo real.
• Prisma para Orm.
• Siguiente autenticación para la autenticación con GitHub o correo electrónico.
• Carga para cargas de archivos.
• Tailwindcss para el estilo.
• Radix UI Primitives + Shadcn UI
• Zod para validar formularios y analizar cargas útiles de API.
• React Forma de gancho para formas de construcción.
• Jotai para el estado global.

Siguiente 13

Este proyecto utiliza el nuevo enrutador de aplicaciones Next.js 13, Componentes del servidor React, acciones del servidor, suspenso y cache() de React 18

También utilizamos rutas API (implementadas como funciones sin servidor a Vercel) para acciones como registrar un nuevo usuario, crear un mensaje, etc.

En tiempo real

Cada vez que un usuario envía un mensaje, crea un chat o viene en línea, por ejemplo, todos los demás usuarios serán notificados y su interfaz de usuario se actualizará en tiempo real.

Esto se hace con Pusher. Escuchamos eventos como message:new o chat:update . Cuando un usuario realiza una acción, activamos el evento en el servidor, y la escucha de otros usuarios recibirá las actualizaciones.

Presencia

Además de escuchar y activar eventos, los canales de presencia de Pusher se usan para poner a todos los usuarios actualmente en línea.

Cuando un usuario inicia sesión, obtenemos a todos los usuarios activos de Pusher y los almacenamos en una tienda local de Jotai. Cuando un usuario inicia sesión o inicia sesión, Pusher envía una actualización y actualizamos la tienda Jotai localmente.

Mecanografiado

Este proyecto está escrito en TypeScript y utiliza tipos generados por Prisma y esquemas y tipos de ZOD para garantizar la seguridad de los tipos en la base de código. Debido a que Prisma genere automáticamente tipos, rara vez tenemos que declarar o mantener cualquier tipo.

zod se usa para validar cada formulario del lado del cliente para garantizar que los valores sean correctos antes de realizar cualquier llamada o mutación de API.

En el servidor, cada ruta API también tiene validación de ZOD para garantizar que la entrada sea válida y corresponde al esquema Zod antes de continuar.

Eslint también está configurado con reglas estrictas para garantizar la calidad del código y minimizar los errores.

---

Diádico

1. "Hoy", "ayer", etc. Indicadores
2. Texto de estado del miembro (descripción a continuación Tarjeta de vista previa del usuario)
3. Descripción del grupo
4. Rol de administrador
5. Agregue un canal inicial predeterminado para todos los miembros
6. Mejorar la visualización de lecturas
7. Abra los detalles del usuario en Haga clic en GCS
8. Búsqueda de canales y usuarios
9. Eliminar mensajes
10. Enviar enlaces (raspado - MetaScraper y Autolinking)
11. Contadores no leídos (en chats y general)
12. Dejando GCS
13. Eventos de teclado en la entrada de chat
14. Cambiar contraseña en configuración modal
15. Olvidé el flujo de contraseña con nodemailer
16. Bugfix : videos que no se muestran en iOS
17. Invitar a los nuevos usuarios al chat grupal
18. Chats mudos
19. Infinito desplazamiento interno y en la lista de usuarios/chat
20. Experimento de conversión de rutas API a acciones del servidor (por ejemplo: Eliminar chat)
21. Mensajes de búsqueda
22. Lectura del indicador de mensajes antiguos
23. Responder
24. Reacciones
25. Gifs
26. Menciones