chatterbox

Bavard

ChatterBox est une application de messagerie en temps réel construite avec les 13 prochains et Pusher.

Vous pouvez créer un chat de groupe ou démarrer un DM. Les utilisateurs peuvent envoyer des messages texte ou télécharger plusieurs vidéos ou images.

L'interface utilisateur est mise à jour en temps réel. Ce qui signifie lorsqu'un canal est créé par un autre utilisateur, ou lorsqu'un message est envoyé, vous verrez instantanément la mise à jour.

Déployé sur Vercel: https://chatterboxes.vercel.app/

Pile technologique

• Next.js 13 et dactylographie
• Pusher pour les mises à jour en temps réel.
• Prisma pour orm.
• Auth suivant pour l'authentification avec Github ou e-mail.
• Téléchargement pour les téléchargements de fichiers.
• Tailwindcss pour le style.
• Radix ui primitives + shadcn ui
• ZOD pour valider les formulaires et l'analyse des charges utiles de l'API.
• REACT HOW FORM pour les formulaires de construction.
• Jotai pour l'État mondial.

13 prochain

Ce projet utilise le nouveau routeur de l'application Next.js 13, React Server Components, Server Actions, Suspense et React 18's cache()

Nous utilisons également les routes API (déployées sous forme de fonctions sans serveur sur Vercel) pour des actions telles que l'enregistrement d'un nouvel utilisateur, la création d'un message, etc.

En temps réel

Chaque fois qu'un utilisateur envoie un message, crée un chat ou est en ligne par exemple, tous les autres utilisateurs seront informés et leur interface utilisateur sera mise à jour en temps réel.

Cela se fait avec Pusher. Nous écoutons des événements comme message:new ou chat:update . Lorsqu'un utilisateur effectue une action, nous déclenchons l'événement sur le serveur et l'écoute de l'autre utilisateur recevra les mises à jour.

Présence

En plus d'écouter et de déclencher des événements, les canaux de présence de Pusher sont utilisés pour obtenir chaque utilisateur actuellement en ligne.

Lorsqu'un utilisateur se connecte, nous obtenons chaque utilisateur actif de Pusher et les stockons dans une boutique Jotai locale. Lorsqu'un utilisateur se connecte ou se connecte, Pusher envoie une mise à jour et nous mettons à jour le magasin Jotai localement.

Manuscrit

Ce projet est écrit en dactylographie et utilise des types générés par prisma et des schémas et des types ZOD pour garantir que TypeSafety à travers la base de code. Parce que PRISMA génère automatiquement les types, nous devons rarement déclarer ou maintenir des types.

zod est utilisé pour valider chaque formulaire côté client pour s'assurer que les valeurs sont correctes avant de faire des appels ou des mutations API.

Sur le serveur, chaque itinéraire API a également une validation ZOD pour s'assurer que l'entrée est valide et correspond au schéma ZOD avant de continuer.

Eslint est également configuré avec des règles strictes pour garantir la qualité du code et minimiser les bogues.

---

Todos

1. "Aujourd'hui", "Hier", etc. Indicateurs
2. Texte d'état du membre (Description ci-dessous carte d'aperçu de l'utilisateur)
3. Description du groupe
4. Rôle d'administration
5. Ajouter un canal initial par défaut pour tous les membres
6. Améliorer la visualisation des lectures
7. Ouvrez les détails de l'utilisateur sur Click dans GCS
8. Recherchez les canaux et les utilisateurs
9. Supprimer les messages
10. Envoyez des liens (gratte - métascraper et automatiquement)
11. Compteurs non lus (dans les chats et général)
12. Laisser GCS
13. Événements de clavier sur l'entrée de chat
14. Modifier le mot de passe dans les paramètres modal
15. Flux de mot de passe oublié avec nodemailer
16. BugFix : les vidéos ne sont pas affichées sur iOS
17. Invitez de nouveaux utilisateurs à discuter de groupe
18. Chats de la muette
19. Infini défilement à l'intérieur des chats et sur la liste des utilisateurs / chats
20. Expérimenter la conversion des voies d'API en actions du serveur (par exemple: supprimer le chat)
21. Rechercher des messages
22. Lire les anciens messages indicateur
23. Répondre
24. Réactions
25. Gifs
26. Mentions