NextJs Messenger Clone

NextJS-Messager-Clone

Une application de chat en temps réel entièrement réactive réalisée avec NextJS 13 (Router de l'App), MongoDB, Tailwind CSS, Pusher, Next-Auth et Cloudinary.

• NextJS (13.4.x)
• React (18.x)
• MongoDB (6.x)
• CSS du vent arrière (3.x)
• Pousseur (5.x)
• AUTH suivant (4.x)
• TypeScript (5.x)
• Script de construction de production

Démo en direct

Voir une démo en direct sur Vercel

Caractéristiques

• Mise à jour du chat en temps réel avec Pusher
• Chat de groupe
• Supprimer l'historique du chat
• Hébergement d'images avec cloudinar
• Support du thème dynamique (mode clair et sombre)
• Prise en charge des écrans de bureau et mobiles

Installation

Configuration MongoDB

1. Accédez à https://www.mongodb.com/atlas/database et inscrivez-vous

2. Trouver et sélectionner Build a Database
   Sélectionnez le niveau libre et appuyez sur Create en bas
   

3. Créer un utilisateur (noter le mot de passe)
   Faites défiler vers le bas pour Add entries to your IP Access List
   Entrez 0.0.0.0/0 et appuyez sur Add Entry
   

4. Appuyez Go to Databases
   

5. Cliquez sur Connect et sélectionnez MongoDB for VSCode
   Copiez la chaîne de connexion et enregistrez-la dans un bloc-notes
   Remplacez <password> par votre mot de passe défini à l'étape 3
   Ajouter test à la fin de la chaîne de connexion (Ex. connectionstring/test )
   

Configuration de l'authentification GitHub

1. Accédez à https://github.com/
   Cliquez sur votre profil de profil en haut à droite
   Cliquez Settings
   

2. Cliquez sur Developer settings
   Cliquez sur OAuth Apps
   Cliquez sur New OAuth App
   

3. Donnez un nom à votre application
   Type http://localhost:3020/ Dans l' Homepage URL et les champs Authorization callback URL .
   Cliquez sur "Enregistrer l'application"
   

4. Copiez l' Client Id et notez-le
   Cliquez sur Generate a new client secret , copiez-le et notez-le
   

Configurer l'authentification Google

1. Accédez à https://console.cloud.google.com et créez un nouveau projet
   

2. Accédez au projet nouvellement créé et recherchez API & Services
   

3. Aller à OAuth consent screen
   Cliquez sur le champ External
   Cliquez sur CREATE
   

4. Cliquez sur le champ App name et donnez-lui un nom
   Sur le champ de courrier de l'utilisateur, sélectionnez votre e-mail
   Faites défiler vers Developer contact information et tapez votre e-mail
   Cliquez sur SAVE AND CONTINUE jusqu'à ce que vous soyez sur l'étape Summary
   

5. Aller aux Credentials
   Cliquez sur CREATE CREDENTIALS
   Sélectionnez OAuth client ID
   

6. Sélectionnez Web application comme type d'application
   Faites défiler vers le bas pour Authorized redirect URIs et ajouter http://localhost:3020/api/auth/callback/google
   Cliquez sur CREATE
   Copiez l' CLient ID et Client Secret et notez-le
   

Configuration du cloudinar

1. Accédez à https://console.clouinary.com et connectez-vous
   Allez au Dashboard et notez le Cloud name
   

2. Aller dans les paramètres
   Puis allez Upload
   

3. Cliquez Add upload preset
   Modifier Signing Mode Unsigned
   Cliquez sur Save Copier le nom prédéfini nouvellement ajouté et notez-le
   

Pusteur de configuration

1. Accédez à https://dashboard.pusher.com/channels
   Cliquez sur Create app (ou Get Started )
   Donner un nom à l'application
   Sélectionnez React pour Frontend et Node.js pour le backend
   Créer l'application
   

2. Aller aux App Keys
   Notez les valeurs
   

Projet de configuration

1. Clone / téléchargement Repo
2. Créez un fichier appelé .env.local dans le répertoire racine de votre projet, saisissez ce qui suit dans CMD / PowerShell

    cp env.example .env.local
   

3. À l'intérieur du fichier .env.local , ajoutez les touches MongoDB, Pusher, Cloudinary, GitHub et Google des étapes précédentes
4. yarn install pour installer les dépendances (exécutez npm install yarn si vous n'avez pas installé de fil)
5. yarn prisma db push pour créer les collections de base de données
6. prisma generate pour créer le client Prisma

Usage

Développement

yarn dev

• Créer l'application en continu (HMR activé)

Production

yarn build yarn start

• Créer une application une fois (hmr désactivé) vers /.next/

---

Toutes les commandes

Commande	Description
yarn dev	Créer l'application en continu (HMR activé)
yarn build	Créer une application une fois (hmr désactivé) vers /.next/
yarn start	Run Production Build

Voir aussi

• Certaines idées de conception ont été tirées de Facebook Messenger
• Certaines idées de mise en œuvre pour ce projet sont tirées de Josh et Antonio
• Le projet a été amorcé avec Create-next-App