chatterbox

Tagarela

O ChatterBox é um aplicativo de mensagens em tempo real criado com o próximo 13 e o empurrador.

Você pode criar um bate -papo em grupo ou iniciar um DM. Os usuários podem enviar mensagens de texto ou fazer upload de vários vídeos ou imagens.

A interface do usuário é atualizada em tempo real. Significado quando um canal é criado por outro usuário ou quando uma mensagem é enviada, você verá instantaneamente a atualização.

Implantado no vercel: https://chatterboxes.vercel.app/

Pilha de tecnologia

• Next.js 13 e TypeScript
• Pusher para atualizações em tempo real.
• Prisma para orm.
• Próxima autenticação para autenticação com GitHub ou e -mail.
• Uploading para uploads de arquivo.
• Tailwindcss para estilo.
• Primitivos da UI da Radix + Shadcn Ui
• Zod para validar os formulários e analisar as cargas úteis da API.
• React gancho forma para formas de construção.
• Jotai para o estado global.

Próximos 13

Este projeto usa o novo roteador App Next.js 13, componentes do servidor React, ações do servidor, suspense e reagir cache()

Também fazemos uso de rotas de API (implantadas como funções sem servidor no VERCEL) para ações como registrar um novo usuário, criar uma mensagem, etc.

Em tempo real

Sempre que um usuário envia uma mensagem, cria um bate-papo ou vem on-line, por exemplo, todos os outros usuários serão notificados e sua interface do usuário será atualizada em tempo real.

Isso é feito com o empurrador. Ouvimos eventos como message:new ou chat:update . Quando um usuário faz uma ação, acionamos o evento no servidor e a audição de outros usuários receberá as atualizações.

Presença

Além de ouvir e desencadear eventos, os canais de presença do Pusher são usados ​​para colocar todos os usuários atualmente online.

Quando um usuário faz login, recebemos todos os usuários ativos do empurrador e os armazenamos em uma loja local da Jotai. Quando um usuário efetua login ou logoff, o Pusher envia uma atualização e atualizamos a loja JOTAI localmente.

TypeScript

Este projeto é escrito no TypeScript e usa tipos e esquemas de zod gerados pelo Prisma para garantir a segurança da base de código. Como os tipos de gerações automáticas do Prisma, raramente precisamos declarar ou manter qualquer tipo.

zod é usado para validar todos os formulários do lado do cliente para garantir que os valores estejam corretos antes de fazer chamadas ou mutações na API.

No servidor, toda rota da API também possui validação de Zod para garantir que a entrada seja válida e corresponda ao esquema ZOD antes de prosseguir.

O ESLint também é configurado com regras rigorosas para garantir a qualidade do código e minimizar os bugs.

---

Todos

1. "Today", "Ontem", etc. Indicadores
2. Texto do status do membro (descrição abaixo do cartão de visualização do usuário)
3. Descrição do grupo
4. Função de administrador
5. Adicione um canal inicial padrão para todos os membros
6. Melhorar a visualização de leituras
7. Abra os detalhes do usuário em clique no GCS
8. Canais de pesquisa e usuários
9. Excluir mensagens
10. Enviar links (raspagem - metascraper e automaticamente)
11. Contadores não lidos (em bate -papos e gerais)
12. Deixando GCs
13. Eventos de teclado na entrada de bate -papo
14. Altere a senha nas configurações modal
15. Esqueci o fluxo de senha com nodemailer
16. Bugfix : vídeos não aparecem no iOS
17. Convide novos usuários para o bate -papo em grupo
18. Bate -papos mudo
19. Rolagem infinita dentro de bate -papos e na lista de usuários/bate -papo
20. Experiência convertendo rotas de API em ações do servidor (por exemplo: excluir bate -papo)
21. Mensagens de pesquisa
22. Lendo o indicador de mensagens antigas
23. Responder
24. Reações
25. Gifs
26. Menções