⚠ Disclaimer : this README.md is in French, use translater if needeed

Il y a des balises html dans ce fichier, s'il y a un problème d'affichage, essayez de l'ouvrir ailleurs (e.g. depuis GitHub).

---

GitHub README - GameHub

🛠 Outils :

Backend	Frontend	Full Stack
Python	JavaScript	Docker
Flask	React (CRA)
PostgreSQL	Lucide Icons + CSS Custom

☲ Description

Ce projet, réalisé dans le cadre de la matière Fullstack Data, est un réseau social dédié aux jeux vidéo (GameHub).

Le backend est développé avec Flask en Python, utilisant une base de données PostgreSQL (via SQLAlchemy) pour gérer les utilisateurs, les fils de discussion (threads) et les commentaires. Une particularité de ce projet est l'intégration de l'API externe RAWG.io, permettant aux utilisateurs de rechercher des jeux réels et de créer des discussions liées à des fiches de jeux existantes.

Le frontend est construit avec React en JavaScript, assurant une interface fluide et réactive. La sécurité est gérée via des JWT (JSON Web Tokens).

Apercu du projet

---

Table des matières

Guide de l’utilisateur

1. Avant tout
2. Configuration API
3. Lancer le projet
4. Utiliser l'application Web

Guide du développeur

1. Aperçu global
2. Backend
3. Frontend
4. Continuer le projet

Contexte et Retours d'expérience

1. Pourquoi ce projet
2. Difficultés rencontrées
3. Usage de l'IA

---

Guide de l'utilisateur

1 - Avant tout

Dans un premier temps, vous devez installer <a href="https://www.docker.com/products/docker-desktop/" target="_blank">{=html}Docker Desktop</a>{=html} pour faire fonctionner le projet.

Faites une installation classique.

2 - Configuration API

Ce projet utilise l'API RAWG pour récupérer les données des jeux vidéo. La clé API ne doit pas être commise dans le code.

1. Récupérez votre clé API (fournie avec le rendu sous format d'un fichier .env ou gratuite sur RAWG.io).
2. À la racine du projet doit se trouver un fichier .env.
3. Ce fichier doit contenir la valeur de la clé API sous ce format : env RAWG_API_KEY=votre_vraie_clé_ici

3 - Lancer et Initialiser le projet

Tout d'abord, veuillez lancer l'application Docker Desktop.

Rejoignez le dossier du projet dans un terminal (PowerShell recommandé) :

$ cd chemin/vers/le/projet

1. Nettoyage (Recommandé pour une installation propre)
   Si vous avez déjà lancé le projet auparavant, supprimez le volume de données pour repartir de zéro :

Remove-Item -Recurse -Force data

2. Lancement des conteneurs
   Construisez et démarrez les services :

docker compose up --build -d

Patientez que les services (backend, db, ui) soient tous démarrés.

3. Remplissage de la base de données (Seed)
   La base de données est vide au démarrage. Pour créer des utilisateurs, importer des jeux via l'API et générer de l'activité, lancez ce script :

docker compose exec backend python seed_db.py

Une fois le script terminé, ouvrez votre navigateur à l'adresse : <a href="http://localhost:3000" target="_blank">{=html}http://localhost:3000``{=html}

4 - Utiliser l'application Web

⚠ Note : La base de données est vide au lancement si le script de remplissage n'a pas été exécuté. Vous devrez créer un premier compte utilisateur.

Le réseau social GameHub permet de :

• S'inscrire / Se connecter : Gestion complète de l'authentification.
• Rechercher des jeux : Utilisez la barre de recherche ou la page de création pour trouver un jeu via l'API RAWG.
• Créer des Threads : Lancez une discussion sur un jeu spécifique. Si le sujet existe déjà, vous rejoignez la conversation.
• Interagir : Commentez les posts et "Likez" les sujets intéressants.
• Profil : Modifiez votre avatar (upload d'image), votre bio, ou supprimez votre compte (Zone de danger).

Les différentes pages

• Connexion / Inscription : Interface simple pour accéder à la plateforme.
• Accueil : Flux d'actualité des derniers sujets créés.
• Créer un sujet : Recherche en temps réel d'un jeu via RAWG, sélection, et rédaction du premier message.
• Page du sujet : Détails du jeu (provenant de RAWG : note Metacritic, date de sortie, genres) à gauche, et fil de discussion à droite.
• Profil : Gestion des informations personnelles et visualisation de ses propres contributions.

---

Guide du développeur

1 - Aperçu global

L'application suit une architecture Full Stack séparée :

• Backend : API RESTful exposée sur le port 5000.
• Frontend : SPA (Single Page Application) React sur le port 3000.
• Database : Conteneur PostgreSQL sur le port 5432.

2 - Backend (Flask)

Le backend est structuré de manière modulaire dans le dossier src/ :

• app.py : Point d'entrée de l'application, initialisation des routes.
• models.py : Définition des modèles SQLAlchemy (User, Thread, Post) et tables d'association (thread_likes).
• auth.py : Gestion de l'inscription et du login (hachage des mots de passe avec werkzeug, génération de token flask_jwt_extended).
• games.py : Logique de communication avec l'API tierce RAWG.
• routes/ : (Logique répartie dans les fichiers racines users.py, threads.py, posts.py pour ce projet).

Nous utilisons Flask-Migrate (Alembic) pour gérer les évolutions du schéma de base de données.

3 - Frontend (React)

Le frontend est généré avec Create React App.

• src/pages/ : Contient les vues principales (HomePage, ThreadPage, ProfilePage, etc.).
• src/services/api.js : Configuration d'Axios avec un intercepteur pour injecter automatiquement le token JWT dans les headers.
• src/App.css : Styles globaux (thème sombre par défaut).

4 - Pour les tests

⚠️ NOTE IMPORTANTE SUR LA BASE DE DONNÉES ⚠️

Les tests sont configurés pour utiliser une base de données SQLite en mémoire afin de ne pas toucher à vos données. Cependant, en cas de mauvaise configuration ou d'exécution locale incorrecte, il peut arriver que l'application bascule sur cette base vide ou réinitialise la base principale.

Si votre application semble vide après avoir lancé les tests :

Cela signifie que la base de données a été réinitialisée ou que l'application pointe temporairement vers SQLite. Pour corriger cela, assurez-vous de relancer le conteneur backend : docker compose restart backend. Relancez impérativement le script de remplissage pour retrouver vos données :

docker compose exec backend python seed_db.py

# Lancer les tests
pytest -v

# Lancer les tests via docker
docker compose exec backend pytest

5 - Continuer le projet

Pistes d'amélioration :

• Sécurité : Passer en HTTPS et stocker les tokens dans des cookies HttpOnly plutôt que le localStorage pour lutter contre failles XSS.
• Fonctionnalités : Ajouter un système de "Follow" entre utilisateurs (la base est là avec les profils).
• Performance : Mettre en cache les requêtes vers RAWG pour limiter les appels API externes.

---

Contexte et Retours d'expérience

1 - Pourquoi ce projet

Nous avons opté pour un réseau social de gaming car il permettait de combiner plusieurs défis techniques intéressants :

1. La gestion d'une base de données relationnelle (Utilisateurs / Posts / Commentaires).
2. L'intégration d'une API Externe (RAWG) pour enrichir le contenu sans avoir à remplir manuellement la base de données de jeux.
3. La gestion de l'upload de fichiers (Avatars utilisateurs).

2 - Difficultés rencontrées

• Gestion des images : Nous avons mis en place un système d'upload d'avatars stockés localement dans le dossier uploads/ et servis statiquement par Flask (send_from_directory), ce qui a demandé une configuration spécifique des volumes Docker.
• Relations SQL : La mise en place de la table d'association pour les "Likes" (thread_likes) et la gestion des cascades (supprimer un user supprime ses posts) a nécessité une attention particulière avec SQLAlchemy.
• React & Asynchronicité : Gérer les états de chargement lors des appels à l'API RAWG (barre de recherche avec debounce) a été un bon exercice de gestion d'état frontend.

3 - Usage de l'IA

Nous avons choisi d'intégrer l'IA générative comme un véritable assistant de productivité au quotidien, plutôt que comme un simple générateur de code.

• Un accélérateur sur l'UI : C'est sur le Frontend que le gain de temps a été le plus flagrant. En lui confiant l'écriture du code répétitif (la structure des composants React, les bases du CSS), nous avons pu consacrer notre énergie à ce qui compte vraiment : l'expérience utilisateur et la logique.

• Un binôme pour le Debug : Face à un bug tenace, l'IA nous a servi de 'second regard'. Elle a été précieuse pour analyser rapidement des logs complexes ou nous suggérer des syntaxes plus élégantes (comme les list comprehensions en Python).

• L'humain garde le contrôle : L'IA n'a pas la science infuse. Nous avons systématiquement relu et testé son code, écartant ses hallucinations pour ne garder que ce qui respectait strictement notre architecture Flask/PostgreSQL

Merci du temps que vous avez consacré à cette lecture.