docs: refine and expand project dossier content
- Improved structure with updated headings and enhanced indentation for clarity. - Added new sections: "Analyse et Conception," personas, user stories, and advanced diagrams (use cases, sequence flows). - Expanded content on backend architecture, security features, and compliance (RGPD, ANSSI). - Updated annexes with additional resources and technical glossary entries.
This commit is contained in:
Mathis HERRIOT
@@ -86,13 +86,17 @@
|
||||
|
||||
- [Veille technologique et de sécurité](#veille-technologique-et-de-sécurité)
|
||||
|
||||
- 4.3 [Maquettage](#43-maquettage)
|
||||
|
||||
- 4.3 Maquettage
|
||||
- [Choix de l'outil : Pourquoi PenPot ?](#choix-de-loutil--pourquoi-penpot-)
|
||||
|
||||
- [Workflow de Design](#workflow-de-design)
|
||||
|
||||
- 4.4 [Frontend](#44-frontend)
|
||||
- 4.4 [Analyse et Conception](#44-analyse-et-conception)
|
||||
- [Analyse des besoins et Personas](#analyse-des-besoins-et-personas)
|
||||
- [User Stories](#user-stories)
|
||||
- [Diagramme de Cas d'Utilisation (Use Case)](#diagramme-de-cas-dutilisation-use-case)
|
||||
- [Diagramme de Séquence (Flux d'Upload)](#diagramme-de-séquence-flux-dupload)
|
||||
|
||||
- 4.5 [Frontend](#45-frontend)
|
||||
|
||||
- [F.1 - Stack technique (Next.js 16, React 19, Tailwind CSS 4)](#f1---stack-technique-nextjs-16-react-19-tailwind-css-4)
|
||||
|
||||
@@ -130,12 +134,6 @@
|
||||
|
||||
- [Annexe 4 - Licences et bibliothèques](#annexe-4---licences-et-bibliothèques)
|
||||
|
||||
- [Annexe 5 - Dossier technique (Backend)](#annexe-5---dossier-technique-backend)
|
||||
|
||||
- [Annexe 6 - Dossier technique (Frontend)](#annexe-6---dossier-technique-frontend)
|
||||
|
||||
- [Annexe 7 - Démonstration et accès](#annexe-7---démonstration-et-accès)
|
||||
|
||||
# 1. Introduction au projet
|
||||
|
||||
Memegoat est une plateforme numérique innovante dédiée à la création, au partage et à la découverte de contenus multimédias éphémères et viraux, tels que les mèmes et les GIFs. Développé dans le cadre du titre professionnel **Concepteur Développeur d'Applications (CDA)**, ce projet transcende la simple fonctionnalité de partage social pour devenir une démonstration technique d'architecture logicielle moderne, de sécurité proactive et de conformité réglementaire.
|
||||
@@ -217,6 +215,9 @@ L'utilisation de Helmet permet d'injecter automatiquement les protections suivan
|
||||
- **Strict-Transport-Security (HSTS)** : Force le navigateur à utiliser uniquement des connexions HTTPS sécurisées.
|
||||
- **X-Content-Type-Options** : Empêche le navigateur d'interpréter un fichier autrement que par son type MIME déclaré, neutralisant certaines attaques par upload de fichiers.
|
||||
|
||||
#### Détection de Crawlers et Protection contre le Scraping
|
||||
Un middleware dédié (`CrawlerDetectionMiddleware`) analyse les motifs de requêtes et les User-Agents. Il identifie les comportements suspects (tentatives d'accès à des fichiers sensibles comme `.env`, scans de vulnérabilités PHP) et les robots connus pour optimiser la charge serveur et protéger le contenu des mèmes contre le pillage automatique.
|
||||
|
||||
### Scalabilité (Stockage S3/Minio)
|
||||
L'architecture sépare les serveurs d'application du stockage des actifs numériques via le protocole **S3** (MinIO). Cette approche facilite la scalabilité horizontale et permet de servir les médias via un réseau de diffusion de contenu (CDN).
|
||||
|
||||
@@ -624,6 +625,12 @@ Chaque fichier téléversé subit un flux de vérification rigoureux avant trait
|
||||
- **Scan ClamAV** : Utilisation d'un démon ClamAV pour analyser le binaire de chaque image ou GIF à la recherche de malwares ou de scripts malveillants encapsulés.
|
||||
- **Validation Zod** : Toutes les entrées de l'API sont validées par des schémas Zod, empêchant les injections de données malformées ou les attaques par pollution de prototypes.
|
||||
|
||||
#### Amorçage Sécurisé (Bootstrap Service)
|
||||
Le système intègre un mécanisme d'amorçage unique (`BootstrapService`) qui génère un jeton à usage unique au premier démarrage si aucun administrateur n'est détecté. Cela permet de créer le premier compte "Admin" de manière sécurisée sans exposer d'identifiants par défaut dans le code ou la base de données.
|
||||
|
||||
#### Purge et Maintenance Automatisée (RGPD)
|
||||
Un service de purge automatique (`PurgeService`) s'exécute quotidiennement pour garantir que les données supprimées (Soft Delete) ou expirées (Sessions, Signalements) sont physiquement retirées du système après 30 jours, assurant une conformité stricte avec le principe de limitation de la conservation du RGPD.
|
||||
|
||||
### Veille technologique et de sécurité
|
||||
|
||||
#### OWASP Top Ten : Priorité à la sécurité applicative
|
||||
@@ -645,14 +652,76 @@ Utilisation de **PenPot** comme alternative Open-Source à Figma, favorisant la
|
||||
2. **Maquettes Haute Fidélité** : Application de l'identité visuelle.
|
||||
3. **Prototypage** : Simulation du parcours utilisateur complet.
|
||||
|
||||
## 4.4 Frontend
|
||||
## 4.4 Analyse et Conception
|
||||
|
||||
### Analyse des besoins et Personas
|
||||
La phase d'analyse a permis d'identifier les besoins des utilisateurs cibles :
|
||||
- **Le Consommateur** : Recherche un divertissement rapide, fluide et accessible sur mobile.
|
||||
- **Le Créateur** : Souhaite partager ses contenus facilement tout en ayant l'assurance que ses données sont protégées.
|
||||
- **Le Modérateur/Admin** : Nécessite des outils robustes pour maintenir un environnement sain.
|
||||
|
||||
### User Stories
|
||||
Les fonctionnalités ont été priorisées via la méthode **MoSCoW** :
|
||||
- **Must (Indispensable)** : Inscription sécurisée (MFA), Upload de mèmes, Consultation des tendances.
|
||||
- **Should (Important)** : Mise en favoris, Recherche par tags, Signalement de contenu.
|
||||
- **Could (Optionnel)** : Profils personnalisés avancés, Statistiques de vues.
|
||||
|
||||
### Diagramme de Cas d'Utilisation (Use Case)
|
||||
Le diagramme suivant illustre les interactions des acteurs avec le système :
|
||||
|
||||
```mermaid
|
||||
graph LR
|
||||
V[Visiteur]
|
||||
U[Utilisateur Authentifié]
|
||||
A[Administrateur]
|
||||
|
||||
V --- C1(Consulter les tendances)
|
||||
V --- C2(S'inscrire / Se connecter)
|
||||
|
||||
U --- C3(Poster un mème)
|
||||
U --- C4(Ajouter aux favoris)
|
||||
U --- C5(Signaler un contenu)
|
||||
|
||||
A --- C6(Modérer les contenus)
|
||||
A --- C7(Gérer les utilisateurs)
|
||||
A --- C8(Consulter les statistiques)
|
||||
```
|
||||
|
||||
### Diagramme de Séquence (Flux d'Upload)
|
||||
Détail des interactions lors de la publication d'un contenu, intégrant la sécurité et l'optimisation :
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant User as Utilisateur
|
||||
participant API as Backend (NestJS)
|
||||
participant AV as Scanner (ClamAV)
|
||||
participant P as Processeur (Sharp/FFmpeg)
|
||||
participant S3 as Stockage (MinIO)
|
||||
participant DB as PostgreSQL
|
||||
|
||||
User->>API: POST /contents/upload (Multipart)
|
||||
API->>AV: Scan Antivirus du buffer
|
||||
AV-->>API: Résultat: Sain
|
||||
|
||||
par Optimisation et Stockage
|
||||
API->>P: Conversion WebP / Transcodage
|
||||
P-->>API: Média optimisé
|
||||
API->>S3: Transfert vers le bucket
|
||||
end
|
||||
|
||||
API->>DB: INSERT INTO contents (Metadata + S3 Key)
|
||||
DB-->>API: Confirmation (ID)
|
||||
API-->>User: 201 Created (Affichage)
|
||||
```
|
||||
|
||||
## 4.5 Frontend
|
||||
|
||||
### F.1 - Stack technique (Next.js 16, React 19, Tailwind CSS 4)
|
||||
|
||||
L'interface de Memegoat repose sur une stack à la pointe de l'écosystème web, choisie pour ses performances et sa maintenabilité :
|
||||
- **Next.js 16 (App Router)** : Utilisation du framework de référence pour React, permettant un rendu hybride. Les pages sont pré-rendues côté serveur (SSR) pour le SEO, tandis que les interactions dynamiques sont gérées côté client.
|
||||
- **React 19** : Cette version majeure introduit des améliorations significatives, notamment dans la gestion des formulaires avec les **Server Actions** et le support natif de l'asynchronisme, réduisant drastiquement le code "boilerplate" de gestion d'état.
|
||||
- **Tailwind CSS 4** : La nouvelle itération de ce framework "Utility-First" offre une compilation plus rapide et une syntaxe simplifiée, permettant de construire des interfaces complexes sans quitter le fichier HTML/JSX.
|
||||
- **React 19** : Cette version majeure introduit des améliorations significatives, notamment dans la gestion des formulaires avec les **Server Actions** et le support natif de l'asynchronisme (use, transition API), réduisant drastiquement le code "boilerplate" de gestion d'état.
|
||||
- **Tailwind CSS 4** : La nouvelle itération de ce framework "Utility-First" offre une compilation ultra-rapide et une configuration simplifiée via CSS-native variables, permettant de construire des interfaces complexes sans quitter le fichier HTML/JSX.
|
||||
|
||||
### F.2 - Architecture et Interfaces
|
||||
|
||||
@@ -742,13 +811,21 @@ L'inclusion est au cœur du développement. Memegoat suit les recommandations du
|
||||
# 5. Respect de la réglementation (RGPD)
|
||||
|
||||
### Registre des traitements
|
||||
Collecte limitée aux données strictement nécessaires (Username, Email chiffré) pour le fonctionnement du service.
|
||||
L'application tient à jour un registre des traitements limitant la collecte aux données strictement nécessaires au fonctionnement du service :
|
||||
- **Utilisateur** : Pseudonyme, Email (chiffré PGP), Mot de passe (haché Argon2id).
|
||||
- **Médias** : Mèmes et GIFs téléversés, métadonnées associées.
|
||||
- **Sécurité** : Logs d'audit (actions sensibles), Sessions (chiffrées).
|
||||
|
||||
### Droits des personnes
|
||||
Mécanismes d'export de données (portabilité) et de suppression définitive (droit à l'oubli).
|
||||
Memegoat intègre nativement des mécanismes pour répondre aux sollicitations des utilisateurs :
|
||||
- **Droit d'accès et portabilité** : Possibilité d'exporter l'intégralité des données rattachées à un compte via un service dédié (`exportUserData`).
|
||||
- **Droit à l'effacement (Droit à l'oubli)** : Implémentation du **Soft Delete** permettant une suppression logique immédiate pour l'utilisateur, suivie d'une purge physique automatisée après 30 jours par le `PurgeService`.
|
||||
- **Droit d'opposition et de rectification** : Interface de gestion de compte permettant la mise à jour ou la suppression des informations personnelles à tout moment.
|
||||
|
||||
### Sécurité par défaut (Privacy by Design)
|
||||
Minimisation des données et chiffrement systématique des informations identifiables.
|
||||
- **Minimisation des données** : Seules les informations essentielles sont conservées.
|
||||
- **Chiffrement systématique** : Les données identifiables (PII) sont chiffrées dès leur réception et avant stockage en base de données.
|
||||
- **Transparence** : Information claire de l'utilisateur sur l'usage de ses données lors de l'inscription.
|
||||
|
||||
# 6. Conclusion
|
||||
|
||||
@@ -761,12 +838,18 @@ Je tiens à remercier l'équipe pédagogique pour son accompagnement tout au lon
|
||||
|
||||
### Annexe 1 - Schéma de classe POO du backend
|
||||
|
||||
Le schéma suivant représente l'architecture logicielle du backend NestJS, mettant en évidence la modularité du système et les relations entre les contrôleurs, services et repositories.
|
||||
|
||||
|
||||
|
||||
*Note : Le diagramme complet est disponible au format PlantUML dans le fichier `backend.plantuml` à la racine du projet.*
|
||||
|
||||
### Annexe 2 - Sources et ressources
|
||||
- [Documentation NestJS](https://docs.nestjs.com/)
|
||||
- [Documentation Next.js](https://nextjs.org/docs)
|
||||
- [Guide de sécurité OWASP](https://owasp.org/www-project-top-ten/)
|
||||
- [Standard NIST Post-Quantum (ML-KEM)](https://csrc.nist.gov/pubs/fips/203/final)
|
||||
- [Référentiel Général d'Accessibilité (RGAA)](https://www.numerique.gouv.fr/publications/rgaa-accessibilite/)
|
||||
|
||||
### Annexe 3 - Glossaire technique
|
||||
|
||||
@@ -774,6 +857,10 @@ Je tiens à remercier l'équipe pédagogique pour son accompagnement tout au lon
|
||||
* **Définition :** Contraction du mot "Accessibility" (11 lettres entre le A et le Y).
|
||||
* **Explication :** Désigne l'ensemble des pratiques visant à rendre les services numériques utilisables par tous, y compris les personnes en situation de handicap (visuel, moteur, auditif, etc.). Dans Memegoat, cela se traduit par l'utilisation de composants sémantiques et le respect des normes WCAG.
|
||||
|
||||
* **ANSSI (Agence Nationale de la Sécurité des Systèmes d'Information) :**
|
||||
* **Définition :** Autorité nationale française en matière de cybersécurité.
|
||||
* **Explication :** Memegoat suit les recommandations de l'ANSSI pour le choix des algorithmes de hachage (Argon2id) et la configuration des protocoles TLS afin de garantir un niveau de sécurité étatique.
|
||||
|
||||
* **API (Interface de Programmation d'Application) :**
|
||||
* **Définition :** Ensemble de règles et de protocoles permettant à deux logiciels de communiquer entre eux.
|
||||
* **Explication :** Dans ce projet, l'API NestJS sert de pont entre le frontend (Next.js) et les données stockées en base. Elle expose des points d'accès (endpoints) sécurisés pour récupérer ou modifier les mèmes et les profils utilisateurs.
|
||||
@@ -786,6 +873,10 @@ Je tiens à remercier l'équipe pédagogique pour son accompagnement tout au lon
|
||||
* **Définition :** Chaîne d'outils (toolchain) ultra-rapide pour le web.
|
||||
* **Explication :** Il remplace ESLint et Prettier pour assurer le formatage et le linting du code. Son utilisation garantit une base de code propre, homogène et performante, tout en accélérant le workflow de développement.
|
||||
|
||||
* **Blind Indexing (Indexation Aveugle) :**
|
||||
* **Définition :** Technique permettant de rechercher des données chiffrées sans les déchiffrer.
|
||||
* **Explication :** Utilisé pour l'unicité des emails. On stocke un hash de l'email à côté de l'email chiffré PGP. Cela permet de vérifier si un email existe déjà en base sans avoir à déchiffrer tous les emails de la table.
|
||||
|
||||
* **CSP (Content Security Policy) :**
|
||||
* **Définition :** Couche de sécurité supplémentaire qui aide à détecter et atténuer certains types d'attaques, comme le XSS.
|
||||
* **Explication :** En définissant quelles sources de contenu (scripts, images) sont autorisées, Memegoat empêche l'exécution de code malveillant injecté par un tiers.
|
||||
@@ -878,12 +969,3 @@ Le projet Memegoat repose exclusivement sur des technologies Open-Source respect
|
||||
- **FFmpeg** : Licence LGPL / GPL (utilisé via wrapper fluent-ffmpeg).
|
||||
- **ClamAV** : Licence GPL.
|
||||
- **MinIO** : Licence GNU AGPL v3.
|
||||
|
||||
### Annexe 5 - Dossier technique (Backend)
|
||||
*Documentation détaillée des API et de la logique serveur.*
|
||||
|
||||
### Annexe 6 - Dossier technique (Frontend)
|
||||
*Documentation détaillée des composants et de la gestion d'état client.*
|
||||
|
||||
### Annexe 7 - Démonstration et accès
|
||||
*Liens vers l'instance de démonstration et codes d'accès de test.*
|
||||
Reference in New Issue
Block a user