Leschat! | Echtzeit Messenger | Pern-Graphql
Echtzeit -Chat -App mit Pern + GraphQL - Funktionen private, globale und Gruppennachrichten
Demo
Eingesetzt auf Netlify (Front-End) & Heroku (Back-End)
Gebaut mit
Frontend
- Reactjs - Frontend -Framework
- Apollo Client - State Management Library, um sowohl lokale als auch Remotedaten mit GraphQL zu verwalten
- Apollo -Abonnements - Erhalten Sie Echtzeit -Updates von Ihrem GraphQL -Server
- Kontext -API W/ Hooks - Für Status des Benutzers, ausgewählte Chat, Toast Notifs, Thema usw.
- React Router - für allgemeine Routing & Navigation
- React Hook Form - für flexible Formen
- Material -UI mit vielen CSS -Anpassungen - UI -Bibliothek
- Yup - für die Formularvalidierung
- Date -Fns - zum Manipulieren und Formatieren von Daten
Back-End
- Node.js - Laufzeitumgebung für JS
- Apollo Server - Erstellen eines selbstdokumentierenden GraphQL -API -Servers
- Apollo -Abonnements - Abonnements sind GraphQL -Operationen, die Ereignisse von Apollo Server beobachten.
- PostgreSQL - OpenSource SQL -Datenbank, um Daten zu speichern
- FECKELIZE - NODEJS ORM für SQL -basierte Datenbanken
- JSON Web Token - ein Standard zur Sicherung/Authentifizierung von HTTP -Anforderungen
- Bcrypt.js - Für Hashing -Passwörter
- DOTENV - Umgebungsvariablen aus einer .Env -Datei zu laden
Merkmale
- Authentifizierung (Login/ Register mit Benutzername und Passwort)
- Echtzeit-Chat mit Websockets
- Private Nachrichten mit allen registrierten Benutzern
- Globaler Kanal für All-Benutzer-AT-Ein-Ort-Chat
- Erstellung von Gruppen mit Nutzern der Wahl
- Benutzer können nach dem Hinzufügen von der Gruppe abreisen
- Gruppenschöpfer kann Mitglieder aus der Gruppe hinzufügen/entfernen
- Gruppenschöpfer kann die Gruppe und ihre Nachrichten zusammen mit ihr löschen
- Gruppenschöpfer kann den Namen der besagten Gruppe umbenennen
- Fehlerverwaltung mit beschreibenden Nachrichten
- Toastbenachrichtigungen für Aktionen: Gruppen erstellen, Benutzer usw. entfernt usw.
- Laden von Spinnern für relevante Abrufprozesse
- Formatierte Daten zum Hinzufügen/Aktualisieren von Fragen/Antworten/Kommentaren
- Dark -Modus -Schalter mit lokalem Speicher speichern
- Richtige reaktionsschnelle Benutzeroberfläche für alle Bildschirme
Screenshots
Desktop/Tablet
Mobile
Verwendung
Env Variable:
Erstellen Sie eine .env -Datei im Serververzeichnis und fügen Sie Folgendes hinzu:
PORT = 4000
JWT_SECRET = "Your JWT secret"
Kunde:
Öffnen Sie Client/SRC/Backendurls.js und ändern Sie das Objekt "Backendurls" in:
{
http: "http://localhost:4000",
ws: "ws://localhost:4000/graphql"
}
Client Development Server ausführen:
cd client
npm install
npm start
Server:
Öffnen Sie Server/config/config.json und aktualisieren Sie die Werte der Entwicklungsschlüssel, die Ihren lokalen PostgreSQL -Anmeldeinformationen entsprechen.
Installieren Sie 'Sequelize-Cli' & 'Nodemon' als globale Pakete, wenn Sie es noch nicht getan haben.
Führen Sie diesen Befehl aus, um die SQL -Tabelle in Ihr eigenes lokales PSQL zu migrieren: sequelize db:migrate
Backend Development Server ausführen:
cd server
npm install
npm run dev
