Avnyr
4dbb858782
Streamlined project structure documentation by detailing separate backend and frontend directories, updated setup commands, added Docker usage examples, and improved clarity on environment configuration.
272 lines
9.1 KiB
Markdown
272 lines
9.1 KiB
Markdown
# 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](#présentation)
|
|
- [Fonctionnalités](#fonctionnalités)
|
|
- [Architecture Technique](#architecture-technique)
|
|
- [Stack Technologique](#stack-technologique)
|
|
- [Modèle de Données](#modèle-de-données)
|
|
- [Installation et Démarrage](#installation-et-démarrage)
|
|
- [Sécurité et Conformité](#sécurité-et-conformité)
|
|
- [Performance](#performance)
|
|
- [Documentation](#documentation)
|
|
- [Contribution](#contribution)
|
|
- [Licence](#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 avec séparation claire entre le frontend et le backend:
|
|
|
|
```
|
|
/
|
|
├── backend/ # Application backend NestJS
|
|
│ ├── src/ # Code source du backend
|
|
│ │ ├── database/ # Configuration et schéma de base de données
|
|
│ │ │ ├── migrations/ # Système de migrations de base de données
|
|
│ │ │ └── schema/ # Schéma de base de données avec DrizzleORM
|
|
│ │ └── modules/ # Modules NestJS (auth, users, projects, etc.)
|
|
│ └── drizzle.config.ts # Configuration de DrizzleORM pour les migrations
|
|
├── frontend/ # Application frontend NextJS
|
|
│ ├── app/ # Pages et routes Next.js (App Router)
|
|
│ ├── components/ # Composants UI réutilisables
|
|
│ ├── hooks/ # Hooks React personnalisés
|
|
│ └── lib/ # Utilitaires et configurations
|
|
├── docs/ # Documentation du projet
|
|
```
|
|
|
|
### Flux d'Interactions
|
|
|
|
```mermaid
|
|
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é
|
|
|
|
```mermaid
|
|
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
|
|
|
|
```bash
|
|
# Cloner le dépôt
|
|
git clone git@git.yidhra.fr:WorkSimplon/brief-20.git
|
|
|
|
# Installer les dépendances du backend
|
|
cd backend
|
|
npm install
|
|
|
|
# Configurer les variables d'environnement du backend
|
|
cp .env.example .env
|
|
# Éditer le fichier .env avec vos propres valeurs
|
|
|
|
# Installer les dépendances du frontend
|
|
cd ../frontend
|
|
npm install
|
|
|
|
# Configurer les variables d'environnement du frontend (si nécessaire)
|
|
cp .env.example .env.local (si le fichier existe)
|
|
# Éditer le fichier .env.local avec vos propres valeurs
|
|
|
|
# Démarrer le backend en mode développement
|
|
cd ../backend
|
|
npm run start:dev
|
|
|
|
# Dans un autre terminal, démarrer le frontend en mode développement
|
|
cd ../frontend
|
|
npm run dev
|
|
```
|
|
|
|
Vous pouvez également utiliser Docker pour démarrer l'application complète :
|
|
|
|
```bash
|
|
# À la racine du projet
|
|
docker-compose up -d
|
|
```
|
|
|
|
### Gestion des Projets Backend et Frontend
|
|
|
|
Ce projet est organisé en deux applications distinctes (backend et frontend) qui peuvent être développées et déployées séparément. Chaque application a ses propres dépendances et scripts npm.
|
|
|
|
Pour travailler avec les projets backend et frontend séparément :
|
|
|
|
```bash
|
|
# Naviguer vers le répertoire backend
|
|
cd backend
|
|
|
|
# Démarrer le backend en mode développement
|
|
npm run start:dev
|
|
|
|
# Naviguer vers le répertoire frontend
|
|
cd ../frontend
|
|
|
|
# Démarrer le frontend en mode développement
|
|
npm run dev
|
|
```
|
|
|
|
Vous pouvez également utiliser Docker Compose pour démarrer l'ensemble de l'application :
|
|
|
|
```bash
|
|
# Démarrer tous les services (backend, frontend, base de données)
|
|
docker-compose up -d
|
|
|
|
# Arrêter tous les services
|
|
docker-compose down
|
|
```
|
|
|
|
## 🔒 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 :
|
|
|
|
### Vue d'Ensemble
|
|
- [Vue d'Ensemble du Projet](docs/PROJECT_OVERVIEW.md) - Analyse complète de l'architecture, des technologies et des fonctionnalités
|
|
- [État d'Avancement du Projet](docs/PROJECT_STATUS.md) - État actuel, tâches restantes et prochaines étapes
|
|
- [Diagrammes de Flux Métier](docs/BUSINESS_FLOW_DIAGRAMS.md) - Diagrammes de séquence pour les principaux flux métier
|
|
- [Cahier des Charges](docs/SPECIFICATIONS.md) - Spécifications initiales du projet
|
|
|
|
### Guides d'Implémentation
|
|
- [Guides d'Implémentation](docs/implementation/README.md) - Index des guides d'implémentation détaillés
|
|
|
|
Les plans d'implémentation détaillés pour chaque composant du système sont disponibles dans le répertoire `docs/implementation`.
|
|
|
|
## 👥 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)](LICENSE).
|