Skip to content

Home

Jump to bottom
Rémi Bernard edited this page Jun 16, 2025 · 7 revisions

Bienvenue sur le wiki du projet ! Cette documentation centralise toutes les informations techniques nécessaires pour comprendre, développer et maintenir notre application full-stack Angular/Express.js.

Ces guides ont été édités avec l'aide de LLMs.

📖 Navigation de la Documentation

🚀 Démarrer le Développement

Prérequis Système

Avant de commencer, assurez-vous d'avoir installé :

Vérifiez vos installations :

node --version  # doit être >= 18.0
npm --version   # doit être >= 8.0
docker --version
git --version

Installation et Configuration

1. Cloner le Projet

git clone https://github.com/Jipmaa/WE4B.git
cd project-root

2. Installer les Dépendances

# Installation des dépendances frontend
cd client
npm install

# Installation des dépendances backend
cd ../server
npm install

3. Configuration de l'Environnement

Créez le fichier de configuration pour le serveur :

cd server
cp .env.example .env

Modifiez le fichier .env avec vos paramètres locaux :

# Configuration de base
NODE_ENV=development
PORT=3000
CORS_ORIGIN=http://localhost:3000

# Base de données MongoDB (laisser identique pour utiliser Docker)
MONGODB_URI=mongodb://localhost:27017/votre-db-name
MONGODB_TEST_URI=mongodb://localhost:27017/votre-db-test

# JWT Configuration
JWT_SECRET=your-super-secret-jwt-key-here
JWT_EXPIRES_IN=7d

4. Démarrer les Services

Étape 1 : Lancer la base de données

cd server
docker compose up -d

Étape 2 : Démarrer le backend (dans un terminal)

cd server
npm run dev

Étape 3 : Démarrer le frontend (dans un nouveau terminal)

cd client
npm start

Vérification de l'Installation

Une fois tous les services démarrés, vérifiez que tout fonctionne :

Les logs des serveurs doivent afficher :

✅ Frontend: Compiled successfully
✅ Backend: Server running on port 3000
✅ Database: Connected to MongoDB

🏗️ Architecture de l'Application

Vue d'Ensemble Technique

Notre application suit une architecture full-stack moderne :

┌─────────────────┐    HTTP/REST API    ┌─────────────────┐
│                 │ ◄─────────────────► │                 │
│  Angular Client │                     │  Express Server │
│  (Port 4200)    │                     │  (Port 3000)    │
│                 │                     │                 │
└─────────────────┘                     └─────────────────┘
                                                 │
                                                 ▼
                                        ┌─────────────────┐
                                        │  MongoDB Atlas  │
                                        │  ou Local       │
                                        └─────────────────┘

Technologies Principales

Frontend (Client)

  • Angular 20+ avec TypeScript
  • Tailwind CSS pour le styling
  • Angular Router pour la navigation
  • RxJS pour la programmation réactive

Backend (Server)

  • Express.js avec TypeScript
  • Mongoose pour MongoDB ODM
  • JWT pour l'authentification
  • Bcrypt pour le hachage des mots de passe

Base de Données

  • MongoDB avec Docker pour le développement
  • MongoDB Atlas pour la production

🛠️ Scripts de Développement Disponibles

Frontend (client/)

npm start          # Démarrer le serveur de développement
npm run build      # Build de production
npm run test       # Lancer les tests unitaires

Backend (server/)

npm run dev        # Démarrer avec nodemon (rechargement auto)
npm start          # Démarrer en mode production
npm run build      # Compiler TypeScript

🔧 Résolution de Problèmes

Problèmes Courants

Port déjà utilisé

# Trouver le processus utilisant le port
lsof -ti:3000  # Pour le port 3000
lsof -ti:4200  # Pour le port 4200

# Arrêter le processus
kill -9 [PID]

Base de données non accessible

# Vérifier que Docker tourne
docker ps

# Redémarrer les containers
docker compose down
docker compose up -d

Erreurs de dépendances

# Nettoyer et réinstaller (se positionner dans le dossier avec le problème)
rm -rf node_modules package-lock.json
npm install

Problèmes de CORS

  • Vérifiez que CORS_ORIGIN est correctement configuré dans .env
  • Le frontend doit tourner sur http://localhost:4200
  • Par défaut, les origines http://localhost:4200 et http://localhost:3000 sont autorisés en plus de la variable d'environnement CORS_ORIGIN

Logs Utiles

Consultez les logs pour diagnostiquer les problèmes :

# Logs du backend
cd server && npm run dev

# Logs de la base de données
docker compose logs mongodb

# Logs des containers Docker
docker compose logs -f

👥 Contribuer au Projet

Workflow de Développement

  1. Créer une branche pour votre fonctionnalité

    git checkout -b feature/nouvelle-fonctionnalite

  2. Développer et tester vos modifications

  3. Vérifier la qualité du code

  4. Commiter vos changements

    git add .
git commit -m "feat: description de la nouvelle fonctionnalité"

  5. Créer une Pull Request avec une description détaillée

Standards de Code

📚 Ressources Supplémentaires

Clone this wiki locally