Application de Création de Groupes

Une application web moderne dédiée à la création et à la gestion de groupes, permettant aux utilisateurs de créer des groupes selon différents critères et de conserver un historique des groupes précédemment créés.

📋 Sommaire

• Présentation
• Fonctionnalités
• Architecture Technique
• Stack Technologique
• Modèle de Données
• Installation et Démarrage
• Sécurité et Conformité
• Performance
• Documentation
• Contribution
• Licence

🚀 Présentation

Cette application permet aux utilisateurs de créer et gérer des groupes de personnes en prenant en compte divers paramètres et critères. Elle offre une interface intuitive et responsive, tout en assurant la sécurité des données utilisateurs et le respect des normes RGPD.

Objectifs du Projet

• Développer une application permettant la création de groupes selon différents critères
• Maintenir un historique des groupes créés pour éviter les duplications
• Offrir une interface intuitive et responsive
• Assurer la sécurité des données utilisateurs
• Respecter les normes RGPD

✨ Fonctionnalités

Gestion des Utilisateurs

• Authentification via OAuth2.0 avec GitHub
• Gestion des sessions utilisateur avec JWT
• Gestion des autorisations basée sur les rôles (RBAC)
• Profil utilisateur personnalisable
• Tableau de bord personnel avec statistiques d'utilisation
• Export des données personnelles (RGPD)

Création et Gestion de Groupes

• Création de projets de groupe avec liste de personnes
• Attribution de tags aux personnes
• Définition d'échelles de niveau personnalisées
• Interface de création manuelle de groupes
• Assistant à la création automatique de groupes équilibrés
• Collaboration en temps réel entre utilisateurs

Administration

• Tableau de bord administrateur
• Gestion des tags globaux
• Surveillance de l'activité des utilisateurs
• Gestion des rôles et permissions

🏗️ Architecture Technique

L'application suit une architecture monorepo avec séparation claire entre le frontend et le backend:

/
├── apps/
│   ├── web/                 # Application frontend NextJS
│   └── api/                 # Application backend NestJS
├── packages/                # Packages partagés
│   ├── database/            # Configuration DrizzleORM et modèles
│   ├── eslint-config/       # Configuration ESLint partagée
│   ├── tsconfig/            # Configuration TypeScript partagée
│   └── ui/                  # Bibliothèque de composants UI partagés

Flux d'Interactions

flowchart TB
    subgraph Client["Client (Navigateur)"]
        FE["Frontend (NextJS)"]
    end

    subgraph Server["Serveur"]
        BE["Backend (NestJS)"]
        WS["WebSocket (SocketIO)"]
    end

    subgraph Storage["Stockage"]
        DB[(PostgreSQL)]
    end

    subgraph External["Services Externes"]
        GH["API GitHub"]
    end

    FE <--> BE
    FE <--> WS
    BE <--> DB
    BE <--> GH
    BE <--> WS

💻 Stack Technologique

Frontend

• NextJS: Framework React pour le rendu côté serveur et la génération de sites statiques
• SWR: Bibliothèque React Hooks pour la récupération de données avec mise en cache, revalidation et focus tracking
• ShadcnUI: Bibliothèque de composants UI pour un design cohérent
• React Hook Form: Gestion des formulaires
• Motion: Bibliothèque pour les animations et le dynamisme de l'interface

Backend

• NestJS: Framework Node.js pour construire des applications serveur efficaces et scalables
• PostgreSQL: Système de gestion de base de données relationnelle
• DrizzleORM: ORM pour interagir avec la base de données
• SocketIO: Bibliothèque pour la communication en temps réel
• @node-rs/argon2: Bibliothèque pour le hachage sécurisé des mots de passe
• jose: Bibliothèque pour la gestion des JWT

Authentification

• OAuth2.0 + OIDC: Via compte GitHub pour l'authentification sécurisée

Déploiement

• Docker: Conteneurisation pour assurer la cohérence entre les environnements
• Gitea Actions: CI/CD pour l'intégration et le déploiement continus

📊 Modèle de Données

Entités Principales

1. User: Utilisateurs de l'application
2. Project: Projets de création de groupes
3. Person: Personnes à placer dans les groupes
4. Group: Groupes créés dans le cadre d'un projet
5. Tag: Étiquettes pour catégoriser les personnes et les projets

Modèle Simplifié

flowchart TD
    User[Utilisateur] -->|Crée et gère| Project[Projet]
    Project -->|Contient| Person[Personnes]
    Project -->|Organise en| Group[Groupes]
    Project -->|Associé à| Tag[Tags/Étiquettes]
    Person -->|Appartient à| Group
    Person -->|Associée à| Tag
    Admin[Administrateur] -->|Gère| Tag

🔧 Installation et Démarrage

# Cloner le dépôt
git clone git@git.yidhra.fr:WorkSimplon/brief-20.git

# Installer pnpm si ce n'est pas déjà fait
npm install -g pnpm

# Installer les dépendances
pnpm install

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

# Démarrer l'application en mode développement
pnpm dev

# Construire l'application pour la production
pnpm build

# Démarrer l'application en mode production
pnpm start

Gestion du Workspace avec PNPM

Ce projet utilise PNPM pour la gestion du workspace et des packages. PNPM offre plusieurs avantages :

• Efficacité de stockage : Utilise un stockage partagé pour éviter la duplication des packages
• Gestion de monorepo : Facilite la gestion des dépendances entre les packages du monorepo
• Performance : Installation et mise à jour des dépendances plus rapides
• Déterminisme : Garantit que les mêmes dépendances sont installées de manière cohérente

Pour travailler avec les différents packages du monorepo :

# Exécuter une commande dans un package spécifique
pnpm --filter <package-name> <command>

# Exemple : démarrer le frontend uniquement
pnpm --filter web dev

# Installer une dépendance dans un package spécifique
pnpm --filter <package-name> add <dependency>

# Installer une dépendance de développement dans un package spécifique
pnpm --filter <package-name> add -D <dependency>

🔒 Sécurité et Conformité

Protection des Données

• Chiffrement des données sensibles
• Hachage sécurisé des mots de passe
• Protection contre les attaques courantes (CSRF, XSS, injections SQL)
• Rate limiting pour prévenir les attaques par force brute

Conformité RGPD

• Minimisation des données collectées
• Finalité claire de la collecte de données
• Mise en œuvre des droits des utilisateurs (accès, rectification, effacement, portabilité)
• Renouvellement du consentement utilisateur tous les 13 mois

📈 Performance

Objectifs

• Temps de chargement initial < 2 secondes (95ème percentile)
• Temps de réponse API < 300ms (95ème percentile)
• Disponibilité > 99.9%
• Support de 1000 utilisateurs simultanés minimum

Optimisations

• Utilisation efficiente des index pour les requêtes fréquentes
• Mise en cache des requêtes fréquentes
• Optimisation des requêtes N+1
• Monitoring et alerting automatique

📚 Documentation

Pour plus de détails sur l'implémentation et l'architecture de l'application, consultez les documents suivants :

• Diagrammes de Flux Métier - Diagrammes de séquence pour les principaux flux métier de l'application
• Plan d'Implémentation du Backend - Plan détaillé pour l'implémentation du backend
• Plan du Schéma de Base de Données - Définition du schéma de base de données avec DrizzleORM
• Plan d'Implémentation de l'Authentification - Détails sur l'implémentation de l'authentification OAuth avec GitHub
• Plan d'Implémentation des WebSockets - Plan pour la communication en temps réel
• Guide d'Implémentation - Guide complet pour l'implémentation du backend
• Résumé et Prochaines Étapes - Résumé du travail effectué et prochaines étapes

👥 Contribution

Ce projet n'est pas ouvert aux contributions externes.

📄 Licence

Ce projet est sous licence GNU Affero General Public License v3.0 (AGPL-3.0).