ti# Sociaux - Application de Messagerie

Application de messagerie complète avec interface React et backend FastAPI, inspirée de WhatsApp.

🚀 Technologies

Backend

• FastAPI - Framework web moderne
• PostgreSQL - Base de données relationnelle
• SQLAlchemy - ORM
• WebSockets - Communication temps réel
• OpenAI - Assistant IA conversationnel

Frontend

• React - Bibliothèque UI
• React Router - Navigation
• CSS3 - Styling militaire vert/white/noir

📋 Prérequis

Backend

• Python 3.8+
• PostgreSQL
• Virtual Environment

Frontend

• Node.js 16+
• npm ou yarn

🛠️ Installation

1. Backend Setup

# Créer l'environnement virtuel
python -m venv venv
source venv/bin/activate  # Linux/Mac
# ou
venv\Scripts\activate     # Windows

# Installer les dépendances
pip install -r requirements.txt

# Configuration de la base de données
# 1. Créer la base de données PostgreSQL
createdb chatapp_db

# 2. Exécuter le script SQL
psql -U votre_utilisateur -d chatapp_db -f database_schema.sql

# 3. Configurer les variables d'environnement
cp .env.example .env
# Éditer .env avec vos valeurs

2. Frontend Setup

cd frontend
npm install
npm start

3. Lancement

# Backend (dans un terminal)
uvicorn main:app --reload

# Frontend (dans un autre terminal)
cd frontend && npm start

🌐 URLs

• Frontend: http://localhost:3000
• Backend: http://localhost:8000
• Documentation API: http://localhost:8000/docs
• WebSocket: ws://localhost:8000/ws/{conversation_id}/{user_id}

🧪 Test des APIs

1. Gestion des Utilisateurs

Créer un utilisateur

curl -X POST "http://localhost:8000/register/" \
  -H "Content-Type: application/json" \
  -d '{
    "username": "testuser",
    "email": "test@example.com",
    "password": "password123"
  }'

Connexion utilisateur

curl -X POST "http://localhost:8000/login/" \
  -H "Content-Type: application/json" \
  -d '{
    "username": "testuser",
    "password": "password123"
  }'

Rechercher des utilisateurs

curl "http://localhost:8000/users/search/?username=test"

Obtenir utilisateurs actifs

curl "http://localhost:8000/users/active/"

2. Conversations

Créer une conversation privée

curl -X POST "http://localhost:8000/conversations/private/" \
  -H "Content-Type: application/json" \
  -d '{
    "user1_id": 1,
    "user2_id": 2
  }'

Créer une conversation de groupe

curl -X POST "http://localhost:8000/conversations/group/" \
  -H "Content-Type: application/json" \
  -d '{
    "name": "Groupe Test",
    "creator_id": 1,
    "user_ids": [2, 3, 4]
  }'

Obtenir les conversations d'un utilisateur

curl "http://localhost:8000/users/1/conversations/"

Obtenir les participants d'une conversation

curl "http://localhost:8000/conversations/1/participants/details/"

3. Messages

Envoyer un message

curl -X POST "http://localhost:8000/conversations/1/messages/" \
  -H "Content-Type: application/json" \
  -d '{
    "user_id": 1,
    "content": "Bonjour !"
  }'

Obtenir les messages d'une conversation

curl "http://localhost:8000/conversations/1/messages/"

4. Fichiers Médias

Partager un fichier

curl -X POST "http://localhost:8000/conversations/1/files/" \
  -F "user_id=1" \
  -F "file=@/path/to/file.jpg" \
  -F "description=Description du fichier"

Obtenir les médias d'une conversation

curl "http://localhost:8000/conversations/1/media/"

Obtenir un média spécifique

curl "http://localhost:8000/media/filename.jpg"

5. Appels Vidéo/Audio

Démarrer un appel

curl -X POST "http://localhost:8000/conversations/1/calls/start/" \
  -F "user_id=1" \
  -F "call_type=video"

Terminer un appel

curl -X POST "http://localhost:8000/conversations/1/calls/end/" \
  -F "user_id=1" \
  -F "call_id=call_123"

6. Assistant IA

Obtenir des suggestions de réponse

curl -X POST "http://localhost:8000/ai/suggestions/" \
  -H "Content-Type: application/json" \
  -d '{
    "conversation_id": 1,
    "user_id": 1,
    "context_length": 10
  }'

Discuter avec l'IA

curl -X POST "http://localhost:8000/ai/chat/" \
  -H "Content-Type: application/json" \
  -d '{
    "conversation_id": 1,
    "user_id": 1,
    "message": "Comment allez-vous ?"
  }'

🔄 WebSocket Communication

Connexion WebSocket

// JavaScript example
const ws = new WebSocket('ws://localhost:8000/ws/1/1');

ws.onopen = () => {
  console.log('Connected to conversation 1 as user 1');
};

ws.onmessage = (event) => {
  const message = JSON.parse(event.data);
  console.log('New message:', message);
};

ws.send(JSON.stringify({
  content: "Hello from WebSocket!"
}));

📊 Structure des Données

Utilisateur

{
  "id": 1,
  "username": "testuser",
  "email": "test@example.com",
  "created_at": "2023-12-01T10:00:00",
  "is_active": true
}

Conversation

{
  "id": 1,
  "name": "Private chat between user1 and user2",
  "is_group": false,
  "created_at": "2023-12-01T10:00:00"
}

Message

{
  "id": 1,
  "conversation_id": 1,
  "sender_id": 1,
  "content": "Hello!",
  "sent_at": "2023-12-01T10:00:00"
}

🔧 Configuration

Variables d'environnement (.env)

# Base de données
DATABASE_URL=postgresql://user:password@localhost:5432/chatapp_db

# OpenAI (optionnel)
OPENAI_API_KEY=votre_cle_api_ici
OPENAI_MODEL=gpt-3.5-turbo

# Backend
SECRET_KEY=votre_cle_secrete
DEBUG=true

# Frontend
REACT_APP_API_URL=http://localhost:8000

🚀 Déploiement

Backend Production

# Avec Gunicorn
gunicorn main:app -w 4 -k uvicorn.workers.UvicornWorker

# Avec Docker (à configurer)
docker build -t sociaux-backend .
docker run -p 8000:8000 sociaux-backend

Frontend Production

cd frontend
npm run build
# Serveur statique (nginx, Apache, etc.)

🐛 Dépannage

Problèmes courants

1. Base de données non connectée

   • Vérifiez que PostgreSQL est en cours d'exécution
   • Vérifiez les identifiants dans .env

2. Port déjà utilisé

   • Changez le port dans .env ou dans uvicorn

3. CORS errors

   • Vérifiez la configuration CORS dans main.py

4. Fichiers médias non accessibles

   • Vérifiez que le répertoire media_files existe
   • Vérifiez les permissions

Logs

# Backend logs
uvicorn main:app --reload --log-level debug

# Frontend logs
npm start
# Ouvrez la console du navigateur

📈 Performance

Optimisations

• Index PostgreSQL sur les champs fréquemment consultés
• Pagination pour les messages (à implémenter)
• Cache Redis (à implémenter)
• Compression des fichiers médias

Monitoring

• Métriques FastAPI
• Logs structurés
• Surveillance PostgreSQL

🤝 Contribuer

1. Fork le projet
2. Créez une branche feature
3. Commit vos changements
4. Push vers la branche
5. Créez un Pull Request

📄 License

MIT License - voir le fichier LICENSE pour plus de détails.

🙏 Remerciements

• FastAPI pour le framework incroyable
• React pour l'expérience utilisateur
• PostgreSQL pour la fiabilité
• OpenAI pour les fonctionnalités IA