Leschat! | Messager en temps réel | Pern-graphql
Application de chat en temps réel réalisée avec Pern + GraphQL - Fonctionne la messagerie privée, globale et de groupe
Démo
Déployé sur Netlify (front-end) et Heroku (back-end)
Construit à l'aide
L'extrémité avant
- ReactJS - Frontend Framework
- Client Apollo - Bibliothèque de gestion de l'État pour gérer les données locales et distantes avec GraphQL
- Abonnements Apollo - Obtenez des mises à jour en temps réel à partir de votre serveur GraphQL
- API de contexte avec crochets - Pour l'état de l'utilisateur, le chat sélectionné, les notifs de toast, le thème, etc.
- Routeur React - pour le routage général et la navigation
- REACT HOW FORM - Pour les formes flexibles
- MATÉRIAU-UI avec beaucoup de personnalisations CSS - bibliothèque d'interface utilisateur
- Yup - pour la validation du formulaire
- Date-FNS - pour manipulation et formatage des dates
Back-end
- Node.js - Environnement d'exécution pour JS
- APOLLO Server - Pour créer un serveur API GraphQL auto-documenté
- Abonnements Apollo - Les abonnements sont des opérations GraphQL qui regardent les événements émis par APOLLO Server.
- PostgreSQL - Base de données SQL OpenSource pour stocker les données
- Séqueliste - Nodejs ORM pour les bases de données basées sur SQL
- Jeton Web JSON - une norme pour sécuriser / authentifier les demandes HTTP
- Bcrypt.js - pour le hachage des mots de passe
- Dotenv - pour charger des variables d'environnement à partir d'un fichier .env
Caractéristiques
- Authentification (connexion / enregistrement avec nom d'utilisateur et mot de passe)
- Chat en temps réel à l'aide de sockés Web
- Messagerie privée avec tous les utilisateurs enregistrés
- Channel mondial pour le chat à tous les utilisateurs
- Création de groupes avec des utilisateurs de choix
- Les utilisateurs peuvent partir du groupe après avoir été ajouté
- Le créateur de groupe peut ajouter / supprimer les membres du groupe
- Créateur de groupe peut supprimer le groupe et ses messages avec lui
- Le créateur de groupe peut renommer le nom dudit groupe
- Gestion des erreurs avec des messages descriptifs
- Notifications de toast pour les actions: créer des groupes, supprimer les utilisateurs, etc.
- Chargement des filateurs pour les processus de récupération pertinents
- Dates formatées pour ajouter / mettre à jour les questions / réponses / commentaires
- Bascule en mode noir avec stockage local Enregistrer
- UI réactif approprié pour tous les écrans
Captures d'écran
Bureau / tablette
Mobile
Usage
Variable Env:
Créez un fichier .env dans le répertoire du serveur et ajoutez ce qui suit:
PORT = 4000
JWT_SECRET = "Your JWT secret"
Client:
Ouvrez client / src / backendurls.js et modifier l'objet "backendurls" vers:
{
http: "http://localhost:4000",
ws: "ws://localhost:4000/graphql"
}
Exécutez le serveur de développement client:
cd client
npm install
npm start
Serveur:
Ouvrir le serveur / config / config.json et mettre à jour les valeurs des touches de développement pour correspondre à vos informations d'identification PostgreSQL locales.
Installez «Sequelize-Cli» et «Nodemon» en tant que packages mondiaux, si vous ne l'avez pas encore fait.
Exécutez cette commande pour migrer la table SQL vers votre propre PSQL local: sequelize db:migrate
Exécutez le serveur de développement backend:
cd server
npm install
npm run dev
