https://github.com/cyril-develop/chat-app
Application de chat en temps réel.
https://github.com/cyril-develop/chat-app
api-rest app application chat chat-application react reactjs realtime realtime-chat socket socket-io socketio zustand
Last synced: 5 months ago
JSON representation
Application de chat en temps réel.
- Host: GitHub
- URL: https://github.com/cyril-develop/chat-app
- Owner: Cyril-Develop
- Created: 2024-05-09T09:06:29.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-05-18T17:16:52.000Z (about 1 year ago)
- Last Synced: 2025-06-09T10:27:33.561Z (about 1 year ago)
- Topics: api-rest, app, application, chat, chat-application, react, reactjs, realtime, realtime-chat, socket, socket-io, socketio, zustand
- Language: TypeScript
- Homepage: https://cyril-develop.fr/chat-app/
- Size: 10.7 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Chat'App est une application de chat en temps réel.
## 🚀 Technologies utilisées :
Frontend :
- ⚛️ React – Interface utilisateur
- 🎨 ShadCN – Composants UI
- 💨 Tailwind CSS / SASS – Styles
Backend :
- 🟢 Node.js / Express – API REST et gestion des requêtes
- 🔌 Socket.io – Communication en temps réel
Base de données :
- 🛢️ Prisma / MySQL – Gestion et requêtes SQL
## 📥 Installation
### Cloner le projet :
```terminal
git clone https://github.com/Cyril-Develop/chat-app.git .
```
### Créer le dossier des images :
Dans le dossier `api`, créez un dossier `images/message` pour stocker les fichiers envoyés.
### Installation des dépendances :
Ouvrez un terminal pour chaque dossier (api, client, socket) et exécutez :
```terminal
npm install
```
### Configuration de la base de données :
### Vérifier MySQL
Assurez-vous que MySQL est installé et en cours d'exécution.
### Créer la base de données :
Connectez-vous à MySQL et exécutez :
```sql
CREATE DATABASE ;
```
### Configurer Prisma :
Dans le dossier `api`, initialisez Prisma :
```terminal
npx prisma init
```
Dans le fichier `api/.env`, ajoutez l'URL de connexion :
```env
DATABASE_URL="mysql://:@localhost:3306/"
```
### Appliquer les migrations :
Créez les tables en exécutant :
```terminal
npx prisma migrate dev --name init
```
### Générer le client Prisma :
Une fois la migration terminée, générez le client Prisma :
```terminal
npx prisma generate
```
### Variables d'environnement :
Créez un fichier `.env` dans les dossiers `client` et `socket` puis modifiez celui de `api` comme suit :
```env
### api/.env
DATABASE_URL="mysql://:@localhost:3306/"
PORT="35000"
JWT_SECRET="g16er1fFE"
### client/.env
VITE_REACT_APP_BASE_URL="http://localhost:35000"
VITE_REACT_APP_IMAGE_URL="http://localhost:35000/images/"
VITE_REACT_APP_SOCKET_URL="http://localhost:30000"
### socket/.env
CLIENT_URL="http://localhost:5173"
SOCKET_PORT="30000"
```
### Démarrer les serveurs
Dans chaque dossier (api, client, socket), ouvrez un terminal et exécutez :
Backend (API Express) :
```terminal
cd api && npm start
```
Frontend (React) :
```terminal
cd client && npm start
```
Socket.io (serveur WebSocket) :
```terminal
cd socket && npm start
```
## Fonctionnalités :
- Authentification – Créer un compte utilisateur, se connecter et se déconnecter
- Salons de discussion – Créer, rejoindre et gérer des salons publics ou privés
- Messagerie – Envoyer des messages (texte, image) en groupe ou en privé
- Chat en temps réel – textuel et/ou vocal
- Amis – Rechercher, ajouter, bloquer et supprimer des amis
- Statuts en temps réel – Voir qui est en ligne et suivre les changements de statut
- Mise à jour du profil – Modifier photo de profil, nom d'utilisateur et email
- Interface responsive – Adaptée aux mobiles et tablettes
- Notifications – Recevoir des alertes pour les nouveaux messages et les demandes d'amis (temps réel, hors ligne)
- Mode espion
- Dark mode
## 🎮 Tester le projet en ligne
🚀 [Démo chat-app](https://cyril-develop.fr/chat-app)
