chatterbox Download - chatterbox Source Code Download

chatterbox

Anderer Quellcode

1.0.0

Herunterladen

Schwätzer

Chatterbox ist eine Echtzeit -Messaging -Anwendung, die mit nächsten 13 und Pusher erstellt wurde.

Sie können einen Gruppenchat erstellen oder einen DM starten. Benutzer können Textnachrichten senden oder mehrere Videos oder Bilder hochladen.

Die Benutzeroberfläche wird in Echtzeit aktualisiert. Das heißt, wenn ein Kanal von einem anderen Benutzer erstellt wird oder wenn eine Nachricht gesendet wird, sehen Sie das Update sofort.

Bereitstellung auf Vercel: https://chatterboxes.vercel.app/

Tech Stack

Weiter.js 13 und Typenkript
Pusher für Echtzeit -Updates.
Prisma für Orm.
Nächstes Authent für Authentifizierung mit GitHub oder E -Mail.
Uploading für Datei -Uploads.
Rückenwindcss zum Styling.
Radix UI Primitive + Shadcn UI
ZOD zur Überprüfung von Formularen und zur Parsen von API -Nutzlasten.
Reagieren Sie die Hakenform für Gebäudeformulare.
Jotai für den globalen Staat.

Nächste 13

Dieses Projekt verwendet cache() neuen nächsten.

Wir verwenden API -Routen (als Serverless -Funktionen für Vercel bereitgestellt) auch für Aktionen wie die Registrierung eines neuen Benutzer, das Erstellen einer Nachricht usw.

Echtzeit

Immer wenn ein Benutzer eine Nachricht sendet, einen Chat erstellt oder beispielsweise online kommt, werden alle anderen Benutzer benachrichtigt und ihre Benutzeroberfläche wird in Echtzeit aktualisiert.

Dies geschieht mit Pusher. Wir hören Ereignisse wie message:new oder chat:update . Wenn ein Benutzer eine Aktion ausführt, lösen wir das Ereignis auf dem Server aus, und das Hören anderer Benutzer erhält die Aktualisierungen.

Gegenwart

Neben dem Zuhören und Auslösen von Ereignissen wird die Präsenzkanäle von Pusher verwendet, um jeden Benutzer derzeit online zu erhalten.

Wenn sich ein Benutzer anmeldet, erhalten wir jeden aktiven Benutzer von Pusher und speichern ihn in einem lokalen Jotai -Store. Wenn sich ein Benutzer anmeldet oder sich anmeldet, sendet Pusher ein Update und wir aktualisieren den Jotai -Store lokal.

Typoskript

Dieses Projekt ist in TypeScript geschrieben und verwendet Prisma -generierte Typen und ZOD -Schemata und -Typen, um die TypeSafety über die Codebasis zu gewährleisten. Da Prisma-Automodypen Typen generiert, müssen wir selten irgendwelche Typen deklarieren oder aufrechterhalten.

zod wird verwendet, um alle Client-Seite zu validieren, um sicherzustellen, dass die Werte korrekt sind, bevor API-Aufrufe oder -Mutationen durchgeführt werden.

Auf dem Server verfügt jede API -Route auch für die ZOD -Validierung, um sicherzustellen, dass die Eingabe gültig ist und dem ZOD -Schema entspricht, bevor Sie fortfahren.

Eslint ist auch mit strengen Regeln konfiguriert, um die Codequalität zu gewährleisten und Fehler zu minimieren.