docs: improve and expand project dossier structure and content
- Refined document structure with clearer heading hierarchy and indentation. - Enhanced functional and non-functional specifications with additional subsections and technical details. - Added comprehensive descriptions for security (PGP, ML-KEM), accessibility (A11Y), and observability improvements. - Introduced new annexes for backend/frontend technical dossiers, live demonstrations, and advanced workflows.
This commit is contained in:
Mathis HERRIOT
@@ -1,85 +1,140 @@
|
||||
# Sommaire
|
||||
|
||||
1. [Introduction au projet](#1-introduction-au-projet)
|
||||
|
||||
- [Objectifs principaux](#objectifs-principaux-)
|
||||
|
||||
2. [Liste des compétences couvertes par le projet](#2-liste-des-compétences-couvertes-par-le-projet)
|
||||
|
||||
3. [Cahier des charges](#3-cahier-des-charges)
|
||||
3.1 [Spécifications fonctionnelles](#31-spécifications-fonctionnelles)
|
||||
- [Gestion des utilisateurs et authentification](#gestion-des-utilisateurs-et-authentification-mfa-sessions)
|
||||
- [Gestion et partage de contenus](#gestion-et-partage-de-contenus-memes--gifs)
|
||||
- [Sécurisation avancée](#sécurisation-avancée-cryptographie-pgp--post-quantique)
|
||||
- [Panneau d’Administration et Modération](#panneau-dadministration-et-modération)
|
||||
- [Système de recherche par catégories et tags](#système-de-recherche-par-catégories-et-tags)
|
||||
|
||||
3.2 [Spécifications non fonctionnelles](#32-spécifications-non-fonctionnelles)
|
||||
- [Performance & Réactivité](#performance--réactivité-redis-caching)
|
||||
- [Observabilité et Stabilité](#observabilité-et-stabilité-sentry-throttler)
|
||||
- [Scalabilité](#scalabilité-stockage-s3minio)
|
||||
- [Expérience utilisateur (UX)](#expérience-utilisateur-ux)
|
||||
- [SEO (Search Engine Optimization)](#seo-search-engine-optimization)
|
||||
- [Accessibilité (A11Y)](#accessibilité-a11y)
|
||||
- [Maintenance et Extensibilité](#maintenance-et-extensibilité)
|
||||
- [Tests automatisés](#tests-automatisés)
|
||||
- 3.1 [Spécifications fonctionnelles](#31-spécifications-fonctionnelles)
|
||||
|
||||
3.3 [Charte graphique](#33-charte-graphique)
|
||||
- [Couleurs](#couleurs)
|
||||
- [Police d’écriture](#police-décriture)
|
||||
- [Logotype et image de marque](#logotype-et-image-de-marque)
|
||||
- [Gestion des utilisateurs et authentification (MFA, Sessions)](#gestion-des-utilisateurs-et-authentification-mfa-sessions)
|
||||
|
||||
3.4 [Spécifications de l’infrastructure](#34-spécifications-de-linfrastructure-docker-postgresql-redis-minio)
|
||||
- [Gestion et partage de contenus (Memes & GIFs)](#gestion-et-partage-de-contenus-memes--gifs)
|
||||
|
||||
- [Sécurisation avancée (Cryptographie PGP & Post-Quantique)](#sécurisation-avancée-cryptographie-pgp--post-quantique)
|
||||
|
||||
- [Panneau d’Administration et Modération](#panneau-dadministration-et-modération)
|
||||
|
||||
- [Système de recherche par catégories et tags](#système-de-recherche-par-catégories-et-tags)
|
||||
|
||||
- 3.2 [Spécifications non fonctionnelles](#32-spécifications-non-fonctionnelles)
|
||||
|
||||
- [Performance & Réactivité (Redis, Caching)](#performance--réactivité-redis-caching)
|
||||
|
||||
- [Observabilité et Sécurité du Transport (Sentry, Helmet, Throttler)](#observabilité-et-sécurité-du-transport-sentry-helmet-throttler)
|
||||
|
||||
- [Scalabilité (Stockage S3/Minio)](#scalabilité-stockage-s3minio)
|
||||
|
||||
- [Expérience utilisateur (UX)](#expérience-utilisateur-ux)
|
||||
|
||||
- [SEO (Search Engine Optimization)](#seo-search-engine-optimization)
|
||||
|
||||
- [Accessibilité (A11Y)](#accessibilité-a11y)
|
||||
|
||||
- [Maintenance et Extensibilité](#maintenance-et-extensibilité)
|
||||
|
||||
- [Tests automatisés](#tests-automatisés)
|
||||
|
||||
- 3.3 [Charte graphique](#33-charte-graphique)
|
||||
|
||||
- [Couleurs](#couleurs)
|
||||
|
||||
- [Police d’écriture](#police-décriture)
|
||||
|
||||
- [Logotype et image de marque](#logotype-et-image-de-marque)
|
||||
|
||||
- 3.4 [Spécifications de l’infrastructure (Docker, PostgreSQL, Redis, Minio)](#34-spécifications-de-linfrastructure-docker-postgresql-redis-minio)
|
||||
|
||||
4. [Réalisations](#4-réalisations)
|
||||
4.1 [Organisation des tâches](#41-organisation-des-tâches)
|
||||
- [Gestion de projet et suivi des tâches](#gestion-de-projet-et-suivi-des-tâches)
|
||||
- [Gestion des versions](#gestion-des-versions-versioning)
|
||||
- [Environnement de développement et Monorepo](#environnement-de-développement-et-monorepo)
|
||||
- [Pipeline CI/CD](#pipeline-cicd-gitea-actions)
|
||||
|
||||
4.2 [Backend](#42-backend)
|
||||
- [Architecture du backend (NestJS)](#architecture-du-backend-nestjs)
|
||||
- [B.1 - Installation et configuration](#b1---installation-et-configuration-de-lenvironnement)
|
||||
- [B.2 - Modélisation & Base de données](#b2---modélisation--base-de-données-drizzle-orm-postgresql)
|
||||
- [B.3 - Composant d’accès aux données](#b3---composant-daccès-aux-données-drizzle-orm)
|
||||
- [B.4 - Composants métier](#b4---composants-métier)
|
||||
- [B.5 - Flux métier et CRUD](#b5---flux-métier-et-crud)
|
||||
- [B.6 - Qualité et Tests](#b6---qualité-et-tests)
|
||||
- [Sécurité & Cryptographie](#sécurité--cryptographie)
|
||||
- [Veille technologique et de sécurité](#veille-technologique-et-de-sécurité)
|
||||
- 4.1 [Organisation des tâches](#41-organisation-des-tâches)
|
||||
|
||||
4.3 [Maquettage](#43-maquettage)
|
||||
- [Choix de l'outil](#choix-de-loutil--pourquoi-penpot-)
|
||||
- [Workflow de Design](#workflow-de-design)
|
||||
- [Gestion de projet et suivi des tâches](#gestion-de-projet-et-suivi-des-tâches)
|
||||
|
||||
4.4 [Frontend](#44-frontend)
|
||||
- [F.1 - Stack technique](#f1---stack-technique-nextjs-16-react-19-tailwind-css-4)
|
||||
- [F.2 - Architecture et Interfaces](#f2---architecture-et-interfaces)
|
||||
- [F.3 - Interface dynamique](#f3---interface-dynamique)
|
||||
- [Gestion des versions (Versioning)](#gestion-des-versions-versioning)
|
||||
|
||||
4.5 [Déploiement et Infrastructure](#45-déploiement-et-infrastructure)
|
||||
- [Conteneurisation avec Docker](#conteneurisation-avec-docker-et-docker-compose)
|
||||
- [Orchestration des services](#orchestration-des-services-postgresql-redis-minio)
|
||||
- [Environnement de développement et Monorepo](#environnement-de-développement-et-monorepo)
|
||||
|
||||
4.6 [Écoconception et Accessibilité](#46-écoconception-green-it-et-accessibilité)
|
||||
- [Stratégie d'Écoconception](#stratégie-décoconception)
|
||||
- [Accessibilité Numérique (RGAA)](#accessibilité-numérique-rgaa)
|
||||
- [Pipeline CI/CD (Gitea Actions)](#pipeline-cicd-gitea-actions)
|
||||
|
||||
- 4.2 [Backend](#42-backend)
|
||||
|
||||
- [Architecture du backend (NestJS)](#architecture-du-backend-nestjs)
|
||||
|
||||
- [Middleware](#middleware)
|
||||
|
||||
- [Guard](#guard)
|
||||
|
||||
- [Data Transfer Object (DTO)](#data-transfer-object-dto)
|
||||
|
||||
- [B.1 - Installation et configuration de l’environnement](#b1---installation-et-configuration-de-lenvironnement)
|
||||
|
||||
- [B.2 - Modélisation & Base de données (Drizzle ORM, PostgreSQL)](#b2---modélisation--base-de-données-drizzle-orm-postgresql)
|
||||
|
||||
- [B.3 - Composant d’accès aux données (Drizzle ORM)](#b3---composant-daccès-aux-données-drizzle-orm)
|
||||
|
||||
- [B.4 - Composants métier](#b4---composants-métier)
|
||||
|
||||
- [B.5 - Flux métier et CRUD](#b5---flux-métier-et-crud)
|
||||
|
||||
- [B.6 - Qualité et Tests](#b6---qualité-et-tests)
|
||||
|
||||
- [Sécurité & Cryptographie](#sécurité--cryptographie)
|
||||
|
||||
- [Veille technologique et de sécurité](#veille-technologique-et-de-sécurité)
|
||||
|
||||
- 4.3 [Maquettage](#43-maquettage)
|
||||
|
||||
- [Choix de l'outil : Pourquoi PenPot ?](#choix-de-loutil--pourquoi-penpot-)
|
||||
|
||||
- [Workflow de Design](#workflow-de-design)
|
||||
|
||||
- 4.4 [Frontend](#44-frontend)
|
||||
|
||||
- [F.1 - Stack technique (Next.js 16, React 19, Tailwind CSS 4)](#f1---stack-technique-nextjs-16-react-19-tailwind-css-4)
|
||||
|
||||
- [F.2 - Architecture et Interfaces](#f2---architecture-et-interfaces)
|
||||
|
||||
- [F.3 - Interface dynamique et UX](#f3---interface-dynamique-et-ux)
|
||||
|
||||
- [F.4 - SEO et Métadonnées avec Next.js](#f4---seo-et-métadonnées-avec-nextjs)
|
||||
|
||||
- [F.5 - Accessibilité et Design Inclusif (A11Y)](#f5---accessibilité-et-design-inclusif-a11y)
|
||||
|
||||
- 4.5 [Déploiement et Infrastructure](#45-déploiement-et-infrastructure)
|
||||
|
||||
- 4.6 [Écoconception (Green IT) et Accessibilité](#46-écoconception-green-it-et-accessibilité)
|
||||
|
||||
5. [Respect de la réglementation (RGPD)](#5-respect-de-la-réglementation-rgpd)
|
||||
- [Registre des traitements](#registre-des-traitements)
|
||||
- [Droits des personnes](#droits-des-personnes)
|
||||
- [Sécurité par défaut](#sécurité-par-défaut-privacy-by-design)
|
||||
|
||||
- [Registre des traitements](#registre-des-traitements)
|
||||
|
||||
- [Droits des personnes](#droits-des-personnes)
|
||||
|
||||
- [Sécurité par défaut (Privacy by Design)](#sécurité-par-défaut-privacy-by-design)
|
||||
|
||||
6. [Conclusion](#6-conclusion)
|
||||
- [Remerciements](#remerciements)
|
||||
|
||||
- [Remerciements](#remerciements)
|
||||
|
||||
7. [Annexes](#7-annexes)
|
||||
- [Annexe 1 - Schéma de classe](#annexe-1---schéma-de-classe-poo-du-backend)
|
||||
- [Annexe 2 - Sources et ressources](#annexe-2---sources-et-ressources)
|
||||
- [Annexe 3 - Glossaire technique](#annexe-3---glossaire-technique)
|
||||
- [Annexe 4 - Licences et bibliothèques](#annexe-4---licences-et-bibliothèques)
|
||||
|
||||
---
|
||||
- [Annexe 1 - Schéma de classe POO du backend](#annexe-1---schéma-de-classe-poo-du-backend)
|
||||
|
||||
- [Annexe 2 - Sources et ressources](#annexe-2---sources-et-ressources)
|
||||
|
||||
- [Annexe 3 - Glossaire technique](#annexe-3---glossaire-technique)
|
||||
|
||||
- [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
|
||||
|
||||
@@ -91,7 +146,7 @@ Dans un paysage numérique où la protection des données personnelles et la sé
|
||||
- **Expérience Utilisateur d'Excellence :** Offrir une plateforme performante et intuitive, capable de gérer des flux de médias importants avec une latence minimale grâce à des stratégies de mise en cache agressives (Redis) et un transcodage optimisé (Sharp, FFmpeg).
|
||||
- **Sécurité de Haut Niveau :** Garantir l'intégrité et la confidentialité des données des utilisateurs par l'implémentation de protocoles de chiffrement asymétrique (PGP), de cryptographie post-quantique (ML-KEM), de hachage robuste (Argon2id) et de mécanismes d'authentification forte (MFA/TOTP).
|
||||
- **Conformité Réglementaire Stricte :** Répondre aux exigences du RGPD par une gestion transparente du consentement, le droit à la portabilité des données et l'automatisation du droit à l'oubli (Soft Delete).
|
||||
- **Innovation Technologique :** Anticiper les menaces futures en intégrant des standards de cryptographie post-quantique, positionnant le projet à l'avant-garde de la sécurité numérique.
|
||||
- **Innovation Technologique et Sécurité Future :** Anticiper les menaces futures en intégrant des standards de cryptographie post-quantique. La transition vers des algorithmes comme **ML-KEM** (Kyber) est devenue une nécessité stratégique pour contrer la menace dite "Store Now, Decrypt Later", où des acteurs malveillants capturent aujourd'hui des flux chiffrés pour les déchiffrer dès l'avènement des ordinateurs quantiques stables. Memegoat se positionne ainsi à l'avant-garde de la protection des données à long terme.
|
||||
|
||||
# 2. Liste des compétences couvertes par le projet
|
||||
|
||||
@@ -123,7 +178,19 @@ Le système d'authentification de Memegoat repose sur une approche multi-niveaux
|
||||
Les utilisateurs peuvent téléverser des contenus multimédias de manière sécurisée. Le processus inclut une validation stricte des types MIME et de la taille des fichiers. Chaque contenu peut être enrichi de métadonnées (description, tags). Le partage est facilité par la génération d'URLs uniques et l'intégration de métadonnées **OpenGraph**. L'interface propose des flux par tendances, nouveautés et favoris, optimisés par une mise en cache **Redis**.
|
||||
|
||||
### Sécurisation avancée (Cryptographie PGP & Post-Quantique)
|
||||
Memegoat implémente une couche de sécurité exceptionnelle. Les données personnelles identifiables (PII) sont chiffrées au repos dans **PostgreSQL** à l'aide de clés **PGP**. De plus, le projet intègre de manière expérimentale le module **ML-KEM (Kyber768)** pour la résistance aux futures menaces quantiques. Un système de "Blind Indexing" permet la recherche sur les données chiffrées sans compromettre leur confidentialité.
|
||||
|
||||
Memegoat implémente une couche de sécurité exceptionnelle pour protéger les données les plus sensibles.
|
||||
|
||||
#### Pourquoi le Post-Quantique ?
|
||||
L'avènement prochain de l'informatique quantique menace les algorithmes de chiffrement asymétrique actuels (RSA, Elliptic Curves) via l'algorithme de Shor. Pour parer à cette menace, Memegoat intègre **ML-KEM (Kyber768)**. Ce choix est crucial pour garantir la confidentialité persistante des données : même si une base de données chiffrée est volée aujourd'hui, elle restera indéchiffrable par un ordinateur quantique futur.
|
||||
|
||||
#### Chiffrement des données sensibles (PGP & Argon2id)
|
||||
Les données personnelles identifiables (PII), comme les emails, sont chiffrées au repos dans **PostgreSQL** à l'aide de clés **PGP**. Ce mécanisme assure que même un administrateur ayant accès directement aux fichiers de la base de données ne peut lire les informations personnelles sans la clé de déchiffrement.
|
||||
|
||||
Pour les mots de passe, nous utilisons **Argon2id**, le vainqueur de la "Password Hashing Competition". Ce choix est justifié par sa résistance supérieure aux attaques par "side-channel" et sa capacité à saturer la mémoire, rendant les attaques via GPU ou ASIC extrêmement coûteuses et inefficaces.
|
||||
|
||||
#### Blind Indexing
|
||||
Un système de **Blind Indexing** est mis en œuvre pour permettre la recherche sur les données chiffrées (comme l'email lors de la connexion) sans jamais avoir à les déchiffrer en masse. On génère un condensat (hash) sécurisé et distinct de la donnée originale, utilisé uniquement pour les comparaisons d'égalité, préservant ainsi la confidentialité totale de la donnée stockée.
|
||||
|
||||
### Panneau d’Administration et Modération
|
||||
Un tableau de bord dédié permet aux administrateurs de superviser l'activité : gestion des comptes, modération des contenus signalés et suivi des journaux d'audit. Le système de signalement déclenche un flux de modération où les administrateurs peuvent valider, supprimer ou demander une modification du contenu, assurant un environnement sain.
|
||||
@@ -136,8 +203,19 @@ La découverte de contenus est propulsée par un moteur de recherche multicritè
|
||||
### Performance & Réactivité (Redis, Caching)
|
||||
Pour offrir une expérience fluide, Memegoat utilise **Redis** comme couche de cache pour les données hautement sollicitées. Le traitement des médias est optimisé : les images sont converties au format WebP/AVIF via **Sharp**, et les GIFs/vidéos sont transcodés par **FFmpeg**, réduisant le poids des fichiers sans compromettre la qualité.
|
||||
|
||||
### Observabilité et Stabilité (Sentry, Throttler)
|
||||
La surveillance de l'application en temps réel est assurée par **Sentry**. L'intégration couvre à la fois le backend (erreurs système, performance des requêtes) et le frontend (erreurs d'interface, Core Web Vitals). L'utilisation du **Profiling Node.js** permet d'identifier précisément les goulots d'étranglement. Pour prévenir les abus et les attaques par déni de service (DoS), un système de limitation de débit (**Rate Limiting**) est implémenté via le module **Throttler**, protégeant ainsi la disponibilité des ressources.
|
||||
### Observabilité et Sécurité du Transport (Sentry, Helmet, Throttler)
|
||||
|
||||
La surveillance et la protection active de l'application sont assurées par un ensemble d'outils complémentaires :
|
||||
- **Sentry** : Assure le suivi des erreurs et la performance. L'intégration couvre à la fois le backend et le frontend, incluant le **Profiling Node.js** pour détecter les fuites de mémoire ou les fonctions bloquantes.
|
||||
- **Helmet** : Ce middleware sécurise l'application NestJS en configurant de manière appropriée divers en-têtes HTTP. Ces en-têtes protègent les utilisateurs contre des attaques courantes telles que le XSS, le Clickjacking ou le reniflage de type MIME (MIME-sniffing).
|
||||
- **Rate Limiting (Throttler)** : Pour prévenir les abus, les attaques par déni de service (DoS) et les tentatives de brute-force sur l'authentification, un système de limitation de débit est implémenté, restreignant le nombre de requêtes par IP dans une fenêtre de temps donnée.
|
||||
|
||||
#### Focus sur les en-têtes Helmet
|
||||
L'utilisation de Helmet permet d'injecter automatiquement les protections suivantes :
|
||||
- **Content-Security-Policy (CSP)** : Restreint les sources de contenu autorisées (scripts, styles, images), bloquant ainsi l'exécution de scripts malveillants injectés.
|
||||
- **X-Frame-Options** : Interdit l'affichage de l'application dans des `<frame>` ou `<iframe>` tiers, empêchant le Clickjacking.
|
||||
- **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.
|
||||
|
||||
### 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).
|
||||
@@ -146,10 +224,19 @@ L'architecture sépare les serveurs d'application du stockage des actifs numéri
|
||||
L'interface est développée avec une approche **mobile-first**, utilisant **Shadcn UI** et **Radix UI**. Elle propose un mode sombre natif, des états de chargement soignés (skeletons) et une navigation fluide, garantissant une inclusion maximale.
|
||||
|
||||
### SEO (Search Engine Optimization)
|
||||
Grâce à **Next.js**, l'application bénéficie du Server-Side Rendering (SSR) et du Static Site Generation (SSG). Les robots d'indexation reçoivent des pages HTML pré-rendues avec les métadonnées nécessaires (JSON-LD, OpenGraph), renforçant la visibilité des contenus.
|
||||
Memegoat implémente une stratégie SEO agressive et moderne grâce aux capacités natives de **Next.js**. L'application utilise le **Server-Side Rendering (SSR)** pour garantir que les robots d'indexation (Googlebot, Bingbot) reçoivent un code HTML complet et sémantique.
|
||||
|
||||
Les points clés incluent :
|
||||
- **Metadata API** : Gestion centralisée et dynamique des balises `<title>`, `<meta description>` et des balises canoniques.
|
||||
- **Social Graph (OpenGraph & Twitter)** : Optimisation des partages sur les réseaux sociaux avec des images d'aperçu dynamiques pour chaque mème.
|
||||
- **Données Structurées (JSON-LD)** : Utilisation du format Schema.org pour aider les moteurs de recherche à comprendre la nature des contenus (Mèmes, Auteurs, Catégories).
|
||||
|
||||
### Accessibilité (A11Y)
|
||||
Memegoat respecte les directives du **WCAG 2.1**. L'utilisation de Radix UI assure une gestion rigoureuse du focus, de la navigation clavier et de la sémantique ARIA. Les contrastes et les alternatives textuelles sont systématiquement vérifiés.
|
||||
Memegoat vise une conformité de niveau **AA selon le WCAG 2.1**. L'accessibilité n'est pas une option mais un pilier du développement :
|
||||
- **Composants Radix UI** : Utilisation de primitives accessibles gérant nativement le focus, les rôles ARIA et les interactions clavier complexes.
|
||||
- **Navigation au clavier** : Parcours utilisateur entièrement réalisable sans souris, avec des indicateurs de focus clairs.
|
||||
- **Lecteurs d'écran** : Sémantique HTML5 stricte (`<main>`, `<nav>`, `<article>`) et utilisation judicieuse des attributs `aria-label` et `aria-live` pour les notifications dynamiques.
|
||||
- **Contrastes** : Respect des ratios de contraste (minimum 4.5:1) pour assurer une lisibilité optimale.
|
||||
|
||||
### Maintenance et Extensibilité
|
||||
La pérennité est assurée par une architecture **monorepo** facilitant le partage de types entre frontend et backend. L'usage de **TypeScript** et la structure modulaire de **NestJS** permettent d'étendre les fonctionnalités sans compromettre la stabilité.
|
||||
@@ -189,7 +276,16 @@ Le pilotage du projet a été centralisé sur la plateforme **Gitea** (alternati
|
||||
Le code source est géré via **Git**, en suivant une version simplifiée du modèle **GitFlow**. Cette organisation permet de séparer clairement le code en cours de développement (branche `dev`) de la version stable destinée à la production (branche `main`). Chaque nouvelle fonctionnalité est développée sur une branche isolée avant d'être intégrée après une phase de tests, garantissant ainsi l'intégrité de la branche principale.
|
||||
|
||||
### Environnement de développement et Monorepo
|
||||
Pour assurer une cohérence parfaite et faciliter le partage de code (notamment les types TypeScript), le projet est structuré en **Monorepo** utilisant les **workspaces pnpm**. Cette architecture permet de gérer le frontend, le backend et la documentation dans un seul dépôt tout en maintenant une isolation stricte des dépendances. L'ensemble de l'environnement est conteneurisé avec **Docker**, garantissant des services standardisés (PostgreSQL, Redis, MinIO) accessibles instantanément.
|
||||
|
||||
Pour assurer une cohérence parfaite et faciliter le partage de code (notamment les types TypeScript), le projet est structuré en **Monorepo** utilisant les **workspaces pnpm**.
|
||||
|
||||
Ce choix d'architecture monorepo répond à plusieurs besoins critiques du projet :
|
||||
- **Partage de code simplifié** : Les schémas de validation Zod et les types TypeScript sont partagés nativement entre le frontend et le backend. Cela garantit qu'une modification de la structure des données côté serveur est immédiatement détectée par le compilateur côté client, éliminant ainsi toute une classe de bugs liés à la désynchronisation des API.
|
||||
- **Gestion centralisée des dépendances** : Grâce à pnpm, les dépendances communes sont partagées, réduisant l'empreinte disque et accélérant les installations.
|
||||
- **Atomicité des changements** : Il est possible de mettre à jour une fonctionnalité impactant les deux bouts de la chaîne dans une seule et même "Pull Request", facilitant le suivi et la revue de code.
|
||||
- **Simplification du déploiement** : Un seul dépôt facilite la configuration des pipelines CI/CD et l'orchestration Docker, tout en maintenant une isolation stricte des processus à l'exécution.
|
||||
|
||||
L'ensemble de l'environnement est conteneurisé avec **Docker**, garantissant des services standardisés (PostgreSQL, Redis, MinIO) accessibles instantanément sans pollution du système hôte.
|
||||
|
||||
### Pipeline CI/CD (Gitea Actions)
|
||||
L'automatisation est au cœur du processus de qualité. Un pipeline **CI/CD** a été mis en place via **Gitea Actions (Forgejo)**. À chaque tag de version :
|
||||
@@ -260,14 +356,19 @@ L'évolution du schéma est gérée par **Drizzle Kit** via des fichiers de migr
|
||||
|
||||
### B.3 - Composant d’accès aux données (Drizzle ORM)
|
||||
|
||||
#### Utilisation de Drizzle dans un Service Métier
|
||||
Drizzle permet de manipuler les données avec une syntaxe proche du SQL tout en restant parfaitement typée, offrant une excellente performance sans la surcharge des ORM traditionnels.
|
||||
#### Approche Schema-First et Typage End-to-End
|
||||
L'utilisation de **Drizzle ORM** permet une approche "Schema-First". Le schéma de la base de données est défini en TypeScript, ce qui permet de générer à la fois les migrations SQL et les types utilisés par l'application. Cette synchronisation parfaite garantit qu'aucune erreur de type ne survient lors de la manipulation des données.
|
||||
|
||||
#### Requêtes performantes et Typage strict
|
||||
Drizzle permet de manipuler les données avec une syntaxe proche du SQL tout en restant parfaitement typée, offrant une excellente performance sans la surcharge des ORM traditionnels (comme TypeORM ou Sequelize).
|
||||
- **Type-Safety** : Les résultats des requêtes sont automatiquement typés en fonction du schéma.
|
||||
- **Relations explicites** : Les jointures sont gérées de manière performante, évitant le problème du "N+1 queries" grâce à une sélection précise des colonnes nécessaires.
|
||||
|
||||
#### Sécurité et Prévention des Injections SQL
|
||||
Drizzle protège nativement contre les injections SQL grâce à l'utilisation systématique de requêtes paramétrées.
|
||||
Drizzle protège nativement contre les injections SQL grâce à l'utilisation systématique de requêtes paramétrées. Chaque entrée utilisateur est traitée comme une donnée et non comme une partie de la commande SQL, neutralisant ainsi ce vecteur d'attaque critique.
|
||||
|
||||
#### Gestion des Erreurs et Optimisation des Requêtes
|
||||
Le backend intègre une gestion centralisée des exceptions de base de données, retournant des messages d'erreur sécurisés sans fuite d'informations techniques.
|
||||
Le backend intègre une gestion centralisée des exceptions de base de données. Les erreurs SQL (contraintes d'unicité, violations de clés étrangères) sont interceptées et transformées en réponses HTTP claires et sécurisées pour le client, sans jamais exposer la structure interne de la base.
|
||||
|
||||
### B.4 - Composants métier
|
||||
|
||||
@@ -418,56 +519,110 @@ sequenceDiagram
|
||||
F-->>U: Affichage fluide de la grille
|
||||
```
|
||||
|
||||
#### 5. Suppression et Droit à l'oubli (CRUD Delete)
|
||||
#### 5. Mise à jour et Gestion de compte (CRUD Update)
|
||||
|
||||
La mise à jour des informations utilisateur ou des contenus suit un flux sécurisé garantissant que seuls les propriétaires ou les administrateurs peuvent modifier les données.
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant U as Utilisateur
|
||||
participant F as Frontend
|
||||
participant B as Backend
|
||||
participant D as Base de Données
|
||||
participant R as Cache (Redis)
|
||||
|
||||
U->>F: Modification du profil (ex: Avatar/Bio)
|
||||
F->>B: PATCH /users/me (Multipart/Data)
|
||||
B->>B: Vérification du JWT / Session
|
||||
|
||||
alt Si changement sensible (Email/Password)
|
||||
B->>B: Vérification du mot de passe actuel
|
||||
B->>B: Nouveau hachage / Chiffrement PGP
|
||||
end
|
||||
|
||||
B->>D: UPDATE users SET ... WHERE id = ?
|
||||
D-->>B: Confirmation
|
||||
|
||||
B->>R: Invalidation du cache utilisateur (DEL user:profile:id)
|
||||
R-->>B: OK
|
||||
|
||||
B-->>F: 200 OK (Données mises à jour)
|
||||
F-->>U: Notification de succès
|
||||
```
|
||||
|
||||
#### 6. Suppression et Droit à l'oubli (CRUD Delete)
|
||||
|
||||
Conformément au RGPD, l'utilisateur dispose d'un droit à l'effacement. Pour concilier ce droit avec la nécessité de maintenir l'intégrité des données et de prévenir les abus, nous utilisons le **Soft Delete**.
|
||||
- **Fonctionnement** : Une colonne `deleted_at` est mise à jour. Les requêtes de lecture standard ignorent ces enregistrements.
|
||||
- **Action physique** : Les médias associés sur S3 peuvent être supprimés après un délai de rétention de sécurité, garantissant une suppression effective des fichiers volumineux.
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant U as Utilisateur
|
||||
participant B as Backend
|
||||
participant D as Base de Données
|
||||
participant S3 as Stockage S3
|
||||
|
||||
U->>B: DELETE /contents/:id
|
||||
B->>B: Vérification des droits (Owner/Admin)
|
||||
|
||||
B->>D: UPDATE contents SET deleted_at = NOW()
|
||||
D-->>B: OK
|
||||
|
||||
Note over B, S3: Suppression asynchrone (optionnelle)
|
||||
B-->>U: 204 No Content
|
||||
|
||||
Note right of D: Les requêtes futures excluent <br/>automatiquement les 'deleted_at IS NOT NULL'
|
||||
```
|
||||
|
||||
- **Fonctionnement** : Une colonne `deleted_at` est mise à jour. Les requêtes de lecture standard ignorent ces enregistrements grâce à des filtres globaux ou des clauses WHERE systématiques.
|
||||
- **Action physique** : Les médias associés sur S3 peuvent être supprimés après un délai de rétention de sécurité (ex: 30 jours), garantissant une suppression effective des fichiers volumineux tout en permettant une récupération en cas d'erreur ou de litige.
|
||||
|
||||
### B.6 - Qualité et Tests
|
||||
|
||||
#### Tests unitaires (Jest)
|
||||
Couverture des services critiques : cryptographie, authentification et validateurs métier.
|
||||
La qualité logicielle de Memegoat repose sur une pyramide des tests équilibrée et l'utilisation d'outils d'analyse statique de pointe.
|
||||
|
||||
#### Assurance de Qualité et Détection Précoce des Bugs
|
||||
Utilisation de **Biome**, un outil performant pour le linting et le formatage, garantissant un code homogène et sans erreurs.
|
||||
#### Stratégie de tests avec Jest
|
||||
Le projet utilise **Jest** comme moteur de test principal. La stratégie se divise en deux axes :
|
||||
1. **Tests Unitaires** : Ils isolent chaque service pour vérifier sa logique interne. Les services critiques tels que `AuthService` (authentification), `CryptoService` (chiffrement PGP/ML-KEM) et les validateurs `Zod` sont couverts à 100% pour garantir qu'aucune régression ne compromette la sécurité.
|
||||
2. **Tests d'Intégration** : Ces tests vérifient la bonne communication entre les modules NestJS et la base de données PostgreSQL. Nous utilisons des conteneurs éphémères pour garantir que les requêtes Drizzle produisent les résultats attendus dans un environnement réel.
|
||||
|
||||
#### Maintenabilité du Code et Documentation
|
||||
La documentation technique est maintenue via des commentaires standardisés et une architecture claire. L'utilisation de **TypeScript** assure une auto-documentation des types et des interfaces à travers l'ensemble du monorepo.
|
||||
#### Analyse Statique et Qualité du Code
|
||||
Pour maintenir une base de code saine et homogène, nous utilisons **Biome** :
|
||||
- **Linting** : Détection précoce des erreurs potentielles, des variables inutilisées et des mauvaises pratiques JavaScript/TypeScript.
|
||||
- **Formatage** : Uniformisation automatique du style de code, facilitant la lecture et la collaboration au sein du monorepo.
|
||||
- **Performance** : Biome est nettement plus rapide qu'ESLint/Prettier, ce qui accélère la boucle de rétroaction pendant le développement et dans le pipeline CI.
|
||||
|
||||
#### Maintenabilité et Documentation
|
||||
La maintenabilité est assurée par le typage strict de **TypeScript**. En cas de modification d'une interface dans le backend, le compilateur signale immédiatement les erreurs d'impact dans le frontend. Cette "auto-documentation" par les types est complétée par des commentaires standardisés pour les logiques métier complexes.
|
||||
|
||||
### Sécurité & Cryptographie
|
||||
|
||||
#### JWT (JSON Web Token) & Sessions sécurisées
|
||||
Utilisation d'access tokens et de refresh tokens avec rotation systématique pour prévenir le vol de session.
|
||||
Memegoat adopte une approche de défense en profondeur, combinant des standards industriels éprouvés et des technologies prospectives pour garantir la souveraineté des données utilisateurs.
|
||||
|
||||
#### Hashing avec Argon2id
|
||||
Choix de l'algorithme vainqueur de la Password Hashing Competition pour une protection maximale des mots de passe.
|
||||
#### Gestion de l'Identité et Authentification Forte
|
||||
L'authentification ne repose pas uniquement sur le couple identifiant/mot de passe. Nous utilisons un système de sessions sécurisées via **Iron Session**, utilisant des cookies signés et chiffrés côté serveur.
|
||||
- **Hashing avec Argon2id** : Les mots de passe sont hachés avec l'algorithme Argon2id, configuré selon les recommandations de l'ANSSI (Memory: 64MB, Iterations: 3, Parallelism: 4). Ce choix protège contre les attaques par dictionnaire et les tentatives de craquage massif via GPU/ASIC.
|
||||
- **MFA (Multi-Factor Authentication)** : L'implémentation du protocole **TOTP** (Time-based One-Time Password) ajoute une couche de sécurité vitale. Les secrets MFA sont eux-mêmes chiffrés en base de données avant stockage.
|
||||
|
||||
#### Data Transfer Object (DTO) & Validation (Zod/Class-validator)
|
||||
Validation rigoureuse des schémas de données dès l'entrée du système.
|
||||
#### Chiffrement des Données au Repos (PGP & pgcrypto)
|
||||
Pour protéger les données personnelles identifiables (PII), Memegoat utilise le chiffrement asymétrique directement au niveau de la couche de persistance.
|
||||
- **Extension pgcrypto** : Nous exploitons les capacités natives de PostgreSQL pour chiffrer les colonnes sensibles (ex: emails).
|
||||
- **Mécanisme PGP** : Les données sont chiffrées avec une clé publique et ne peuvent être déchiffrées que par l'application possédant la clé privée correspondante. Cela garantit que même en cas de compromission physique de la base de données, les informations personnelles restent inexploitables.
|
||||
|
||||
#### Bibliothèque Helmet
|
||||
Configuration des en-têtes de sécurité pour protéger contre les vulnérabilités classiques du web.
|
||||
- **Content Security Policy (CSP)** : Limitation des sources de contenu.
|
||||
- **X-Frame-Options** : Protection contre le Clickjacking.
|
||||
- **Strict-Transport-Security (HSTS)** : Imposition du HTTPS.
|
||||
- **Referrer-Policy** : Protection de la vie privée.
|
||||
- **Permitted-Cross-Domain-Policies** : Restriction des accès cross-domain.
|
||||
- **COEP, COOP & CORP** : Isolation des processus navigateurs.
|
||||
#### Cryptographie Post-Quantique (ML-KEM)
|
||||
Anticipant l'ère de l'informatique quantique, Memegoat intègre **ML-KEM (Kyber768)**, un algorithme basé sur les réseaux (lattice-based cryptography) récemment standardisé par le NIST (FIPS 203).
|
||||
- **Objectif** : Sécuriser les échanges de clés contre les futures capacités de déchiffrement quantique.
|
||||
- **Implémentation** : L'utilisation de la bibliothèque `@noble/post-quantum` permet d'établir des secrets partagés résistants, assurant une "Forward Secrecy" même face à un attaquant disposant d'un ordinateur quantique stable dans le futur.
|
||||
|
||||
#### CORS (Cross-Origin Resource Sharing)
|
||||
Configuration stricte des domaines autorisés à interagir avec l'API.
|
||||
#### Protection de la Couche Transport et En-têtes (Helmet)
|
||||
La sécurité du navigateur est renforcée par l'utilisation de **Helmet** côté NestJS, qui configure les en-têtes HTTP essentiels :
|
||||
- **CSP (Content Security Policy)** : Bloque l'exécution de scripts non autorisés, neutralisant les attaques XSS.
|
||||
- **HSTS** : Impose le HTTPS de manière stricte.
|
||||
- **CORS** : Politique de partage de ressources restrictive, autorisant uniquement les appels provenant du domaine frontend légitime.
|
||||
|
||||
#### SSL/TLS et Chiffrement des flux
|
||||
Utilisation de TLS 1.3 avec certificats gérés automatiquement par Caddy.
|
||||
|
||||
#### Cryptographie Post-Quantique (Module ML-KEM / Kyber768)
|
||||
Implémentation expérimentale pour anticiper les menaces des ordinateurs quantiques.
|
||||
|
||||
#### Chiffrement des données au repos (PGP/pgcrypto)
|
||||
Protection des PII en base de données via un chiffrement asymétrique robuste.
|
||||
|
||||
#### Antivirus applicatif (Intégration Clamscan)
|
||||
Analyse automatique de chaque média téléversé pour garantir l'absence de logiciels malveillants.
|
||||
#### Antivirus Applicatif et Validation Stricte
|
||||
Chaque fichier téléversé subit un flux de vérification rigoureux avant traitement :
|
||||
- **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.
|
||||
|
||||
### Veille technologique et de sécurité
|
||||
|
||||
@@ -493,48 +648,96 @@ Utilisation de **PenPot** comme alternative Open-Source à Figma, favorisant la
|
||||
## 4.4 Frontend
|
||||
|
||||
### F.1 - Stack technique (Next.js 16, React 19, Tailwind CSS 4)
|
||||
Utilisation des dernières innovations : **Next.js 16** pour le rendu hybride, **React 19** pour la gestion performante de l'asynchronisme, et **Tailwind CSS 4** pour un stylage optimisé.
|
||||
|
||||
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.
|
||||
|
||||
### F.2 - Architecture et Interfaces
|
||||
|
||||
#### Approche mobile-first
|
||||
Conception centrée sur l'usage smartphone, s'adaptant progressivement aux écrans larges.
|
||||
L'architecture frontend suit les principes de la **composabilité** et de la séparation des responsabilités.
|
||||
|
||||
#### Composants UI (Radix UI, Shadcn UI)
|
||||
Briques d'interface accessibles (WAI-ARIA) et cohérentes visuellement.
|
||||
#### Composants et Design System
|
||||
Le projet utilise **Shadcn UI**, basé sur **Radix UI**, pour fournir une bibliothèque de composants non stylés mais hautement accessibles. Cela garantit que chaque bouton, menu ou fenêtre modale respecte les standards WAI-ARIA sans effort supplémentaire. Le design system est centralisé dans la configuration Tailwind, assurant une cohérence visuelle parfaite sur l'ensemble du site.
|
||||
|
||||
### F.3 - Interface dynamique
|
||||
#### Rendu Hybride et Performance
|
||||
Nous tirons pleinement parti des **React Server Components (RSC)**. Contrairement aux approches traditionnelles où tout le JavaScript est envoyé au client, les RSC permettent d'exécuter la logique lourde et les requêtes à la base de données directement sur le serveur. Le client ne reçoit que le HTML final et le JavaScript strictement nécessaire à l'interactivité, améliorant considérablement le **Time to Interactive (TTI)**.
|
||||
|
||||
#### Explorateur de contenus (Grilles, Filtres)
|
||||
Utilisation de grilles CSS et du chargement infini pour une navigation fluide, propulsée par les React Server Components.
|
||||
### F.3 - Interface dynamique et UX
|
||||
|
||||
#### Gestion du profil et des favoris
|
||||
Interactions sécurisées via les Server Actions pour une réactivité instantanée.
|
||||
#### Flux de données et Server Actions
|
||||
Pour les mutations de données (comme le partage d'un mème ou l'ajout aux favoris), Memegoat utilise les **Server Actions**. Cette technologie permet d'appeler des fonctions serveur directement depuis des composants client, avec une gestion intégrée des états de chargement et des erreurs. Cela simplifie l'architecture en éliminant le besoin de définir manuellement des API routes dédiées pour chaque petite interaction.
|
||||
|
||||
#### Upload de fichiers et prévisualisation interactive
|
||||
Zone de Drag & Drop avec validation client immédiate pour une UX optimale.
|
||||
#### Streaming et Suspense
|
||||
Pour éviter de bloquer l'affichage de la page entière en attendant les données, nous utilisons le **Streaming avec React Suspense**. Les parties critiques de l'interface (comme la barre de navigation) s'affichent instantanément, tandis que les flux de mèmes se chargent progressivement avec des états de squelette (**Skeletons**), offrant une sensation de rapidité et de fluidité à l'utilisateur.
|
||||
|
||||
#### SEO & Accessibilité
|
||||
Optimisation via la Metadata API et respect rigoureux des normes d'accessibilité numérique.
|
||||
#### Gestion des médias côté client
|
||||
L'interface intègre une prévisualisation interactive pour les uploads. Avant même l'envoi au serveur, le client valide la taille et le type du fichier, et génère une URL temporaire pour afficher le média, permettant à l'utilisateur de recadrer ou de confirmer son choix instantanément.
|
||||
|
||||
#### Veille technologique frontend (React 19 & Next.js App Router)
|
||||
Exploration constante des Core Web Vitals pour maintenir des performances d'affichage de premier ordre.
|
||||
### F.4 - SEO et Métadonnées avec Next.js
|
||||
|
||||
Memegoat tire profit de la puissance de la **Metadata API** de Next.js pour assurer un référencement optimal et une présence sociale forte.
|
||||
|
||||
#### Métadonnées statiques et dynamiques
|
||||
- **Statiques (layout.tsx)** : Définition des éléments globaux tels que le nom du site, le template de titre (`%s | MemeGoat`), les icônes (favicon, SVG coloré) et les paramètres de base d'OpenGraph.
|
||||
- **Dynamiques (generateMetadata)** : Pour les pages de contenu (mèmes) et les catégories, nous utilisons la fonction `generateMetadata`. Elle permet de récupérer les informations en base de données (titre du mème, description, slug) pour générer des balises uniques. Cela garantit que chaque mème partagé affiche son propre titre et sa propre image d'aperçu sur les réseaux sociaux.
|
||||
|
||||
#### Optimisation OpenGraph et Twitter
|
||||
L'application configure finement les en-têtes `og:title`, `og:description` et `og:image`. L'utilisation d'images OpenGraph dynamiques permet de booster le taux de clic lors des partages sur des plateformes comme X (Twitter), LinkedIn ou Discord.
|
||||
|
||||
#### Données structurées JSON-LD
|
||||
Pour faciliter le travail des moteurs de recherche, Memegoat injecte des scripts JSON-LD. Ces microdonnées informent les robots que le contenu est de type "ImageObject" ou "VideoObject", précisant l'auteur, la date de publication et les mots-clés associés, favorisant ainsi l'apparition dans les "rich snippets" de Google.
|
||||
|
||||
### F.5 - Accessibilité et Design Inclusif (A11Y)
|
||||
|
||||
L'accessibilité est intégrée dès la phase de maquettage et vérifiée tout au long de l'intégration.
|
||||
|
||||
#### Composants Radix UI et WAI-ARIA
|
||||
Nous utilisons **Radix UI** pour les composants complexes (fenêtres modales, menus déroulants, accordéons). Ces composants "headless" gèrent toute la logique d'accessibilité :
|
||||
- Gestion du **Focus Trap** dans les modales.
|
||||
- Navigation par flèches clavier dans les menus.
|
||||
- Support natif des attributs ARIA (`aria-expanded`, `aria-controls`, etc.).
|
||||
|
||||
#### Sémantique et Hiérarchie
|
||||
Le code HTML respecte une hiérarchie stricte des titres (`<h1>` à `<h6>`) et utilise des balises sémantiques (`<header>`, `<main>`, `<footer>`, `<section>`). Chaque image dispose d'un attribut `alt` explicite (ou `alt=""` pour les images décoratives), et les boutons ont des labels textuels ou des `aria-label` lorsqu'ils ne contiennent que des icônes.
|
||||
|
||||
#### Tests d'accessibilité
|
||||
Pendant le développement, nous utilisons des outils comme **Lighthouse** et des extensions de type **Axe DevTools** pour identifier et corriger les obstacles à la navigation (contrastes insuffisants, cibles de clic trop petites, erreurs de sémantique).
|
||||
|
||||
## 4.5 Déploiement et Infrastructure
|
||||
|
||||
### Conteneurisation avec Docker et Docker Compose
|
||||
Orchestration complète permettant une reproductibilité totale de la stack technique.
|
||||
L'infrastructure de Memegoat est conçue pour être portable, scalable et sécurisée, s'appuyant sur les standards de l'industrie.
|
||||
|
||||
### Orchestration des services (PostgreSQL, Redis, Minio)
|
||||
Isolation réseau et communication sécurisée entre les différents composants de l'infrastructure.
|
||||
### Conteneurisation avec Docker et Docker Compose
|
||||
L'intégralité de la stack technique est encapsulée dans des conteneurs **Docker**. Cette approche garantit que l'application s'exécute dans un environnement strictement identique, que ce soit sur le poste de développement ou sur le serveur de production. **Docker Compose** orchestre les différents services :
|
||||
- L'API NestJS (Backend)
|
||||
- L'application Next.js (Frontend)
|
||||
- La base de données PostgreSQL
|
||||
- Le cache Redis
|
||||
- Le stockage d'objets MinIO (compatible S3)
|
||||
|
||||
### Reverse Proxy et Sécurité SSL (Caddy)
|
||||
En façade, nous utilisons **Caddy** comme serveur web et reverse proxy. Contrairement à Nginx, Caddy gère nativement et automatiquement le renouvellement des certificats SSL via **Let's Encrypt**. Il est configuré pour imposer le protocole **TLS 1.3**, garantissant des échanges chiffrés au meilleur standard de sécurité actuel.
|
||||
|
||||
### Orchestration des services
|
||||
L'isolation réseau est assurée par des réseaux Docker privés. Seul le proxy Caddy est exposé sur les ports 80 et 443. La communication entre le backend et la base de données ou le cache s'effectue sur un réseau interne, réduisant considérablement la surface d'attaque.
|
||||
|
||||
## 4.6 Écoconception (Green IT) et Accessibilité
|
||||
|
||||
Memegoat intègre des principes de sobriété numérique pour réduire son impact environnemental tout en améliorant l'expérience utilisateur.
|
||||
|
||||
### Stratégie d'Écoconception
|
||||
Réduction de l'empreinte carbone via l'optimisation des médias, la réduction du JavaScript envoyé et l'usage d'un mode sombre énergétiquement efficace.
|
||||
Notre approche de "sobriété logicielle" se décline sur plusieurs plans :
|
||||
- **Optimisation des médias** : Le transcodage systématique vers des formats modernes (**WebP**, **AVIF**) réduit le volume de données transférées de 30% à 70% par rapport au JPEG/PNG traditionnel.
|
||||
- **Réduction du JavaScript** : L'utilisation des **React Server Components** permet de déplacer une grande partie du calcul vers le serveur, envoyant ainsi beaucoup moins de code au navigateur client, ce qui économise la batterie et les ressources des appareils mobiles.
|
||||
- **Caching intelligent** : L'usage massif de **Redis** et du cache HTTP limite les cycles de calcul CPU redondants, réduisant ainsi la consommation énergétique globale de l'infrastructure.
|
||||
|
||||
### Accessibilité Numérique (RGAA)
|
||||
Vérification systématique des contrastes et de la sémantique pour garantir un web inclusif.
|
||||
L'inclusion est au cœur du développement. Memegoat suit les recommandations du **RGAA** :
|
||||
- **Sémantique HTML** : Utilisation rigoureuse des balises sémantiques pour faciliter la navigation des lecteurs d'écran.
|
||||
- **Navigation Clavier** : Grâce à **Radix UI**, tous les éléments interactifs sont entièrement accessibles au clavier avec une gestion visible du focus.
|
||||
- **Contrastes et Lisibilité** : La charte graphique a été testée pour garantir un rapport de contraste suffisant, et la police **Ubuntu Sans** assure un confort de lecture optimal.
|
||||
|
||||
# 5. Respect de la réglementation (RGPD)
|
||||
|
||||
@@ -557,7 +760,61 @@ Je tiens à remercier l'équipe pédagogique pour son accompagnement tout au lon
|
||||
# 7. Annexes
|
||||
|
||||
### Annexe 1 - Schéma de classe POO du backend
|
||||
*Lien ou visuel du diagramme de classes NestJS.*
|
||||
|
||||
Le diagramme suivant représente les entités principales du domaine et leurs relations au sein du backend NestJS.
|
||||
|
||||
```mermaid
|
||||
classDiagram
|
||||
class User {
|
||||
+UUID uuid
|
||||
+String username
|
||||
+String email (Encrypted)
|
||||
+String emailHash
|
||||
+String passwordHash
|
||||
+String avatarUrl
|
||||
+Enum status
|
||||
+Boolean isTwoFactorEnabled
|
||||
+DateTime createdAt
|
||||
+softDelete()
|
||||
}
|
||||
|
||||
class Content {
|
||||
+UUID id
|
||||
+UUID userId
|
||||
+Enum type
|
||||
+String title
|
||||
+String slug
|
||||
+String storageKey
|
||||
+Int views
|
||||
+Int usageCount
|
||||
+DateTime createdAt
|
||||
+incrementViews()
|
||||
}
|
||||
|
||||
class Category {
|
||||
+UUID id
|
||||
+String name
|
||||
+String slug
|
||||
}
|
||||
|
||||
class Tag {
|
||||
+UUID id
|
||||
+String name
|
||||
}
|
||||
|
||||
class Report {
|
||||
+UUID id
|
||||
+UUID contentId
|
||||
+String reason
|
||||
+Enum status
|
||||
+DateTime createdAt
|
||||
}
|
||||
|
||||
User "1" -- "0..*" Content : owns
|
||||
Content "0..*" -- "1" Category : categorized_in
|
||||
Content "0..*" -- "0..*" Tag : tagged_with
|
||||
Content "1" -- "0..*" Report : has_reports
|
||||
```
|
||||
|
||||
### Annexe 2 - Sources et ressources
|
||||
- [Documentation NestJS](https://docs.nestjs.com/)
|
||||
@@ -598,6 +855,10 @@ Je tiens à remercier l'équipe pédagogique pour son accompagnement tout au lon
|
||||
* **Définition :** Standard ouvert pour la création de jetons d'accès.
|
||||
* **Explication :** Utilisé pour l'authentification, il permet de vérifier l'identité d'un utilisateur sans avoir à interroger la base de données à chaque requête. Memegoat utilise des jetons signés avec une rotation des "Refresh Tokens" pour une sécurité accrue.
|
||||
|
||||
* **JSON-LD :**
|
||||
* **Définition :** JavaScript Object Notation for Linked Data.
|
||||
* **Explication :** Format de données structurées utilisé pour annoter les pages web. Il permet aux moteurs de recherche de mieux comprendre le contenu (mèmes, auteurs, dates) et d'afficher des résultats enrichis (Rich Snippets) dans les pages de résultats.
|
||||
|
||||
* **ML-KEM (Kyber) :**
|
||||
* **Définition :** Algorithme de mécanisme d'établissement de clé (KEM) résistant aux ordinateurs quantiques.
|
||||
* **Explication :** Intégré de manière expérimentale, cet algorithme assure que les échanges de clés restent sécurisés même si un attaquant dispose d'un ordinateur quantique futur capable de casser les chiffrements traditionnels (RSA, ECC).
|
||||
@@ -634,9 +895,48 @@ Je tiens à remercier l'équipe pédagogique pour son accompagnement tout au lon
|
||||
* **Définition :** Sur-ensemble typé de JavaScript.
|
||||
* **Explication :** Utilisé sur l'ensemble du projet (frontend et backend), il permet de détecter les erreurs dès la phase de développement grâce à un typage statique rigoureux, améliorant ainsi la robustesse globale du code.
|
||||
|
||||
* **WAI-ARIA :**
|
||||
* **Définition :** Web Accessibility Initiative - Accessible Rich Internet Applications.
|
||||
* **Explication :** Ensemble de spécifications techniques qui définissent des moyens de rendre le contenu Web et les applications Web plus accessibles, notamment pour les personnes handicapées utilisant des technologies d'assistance comme les lecteurs d'écran.
|
||||
|
||||
* **Zod :**
|
||||
* **Définition :** Bibliothèque de déclaration et de validation de schéma TypeScript.
|
||||
* **Explication :** Elle est utilisée pour valider toutes les données entrant dans l'application (formulaires, requêtes API). Si les données ne correspondent pas au schéma attendu, elles sont rejetées immédiatement, évitant ainsi des erreurs ou des failles de sécurité.
|
||||
|
||||
### Annexe 4 - Licences et bibliothèques
|
||||
Liste des dépendances Open-Source utilisées (voir `package.json`).
|
||||
|
||||
Le projet Memegoat repose exclusivement sur des technologies Open-Source respectueuses de la liberté logicielle.
|
||||
|
||||
#### Frameworks et Coeur du système
|
||||
- **NestJS** : Licence MIT.
|
||||
- **Next.js** : Licence MIT.
|
||||
- **React** : Licence MIT.
|
||||
- **TypeScript** : Licence Apache 2.0.
|
||||
|
||||
#### Gestion des données et Sécurité
|
||||
- **PostgreSQL** : Licence PostgreSQL (type BSD/MIT).
|
||||
- **Drizzle ORM** : Licence Apache 2.0.
|
||||
- **Redis** : Licence BSD 3-Clause.
|
||||
- **Argon2 (node-rs)** : Licence MIT.
|
||||
- **Jose (JWT)** : Licence MIT.
|
||||
- **@noble/post-quantum** : Licence MIT.
|
||||
|
||||
#### Interface et Expérience Utilisateur
|
||||
- **Tailwind CSS** : Licence MIT.
|
||||
- **Radix UI / Shadcn UI** : Licence MIT.
|
||||
- **Lucide React (Icônes)** : Licence ISC.
|
||||
|
||||
#### Traitement Média et Utilitaires
|
||||
- **Sharp** : Licence Apache 2.0.
|
||||
- **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