Mathis/memegoat
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Activity
Files
89587d6abca5bc4f92a1006a690f9c3255c77611
memegoat/dossier-de-projet-cda.md
Mathis HERRIOT 89587d6abc docs: update project dossier with additional sections and enhancements 
- Added detailed objectives, technical overview, and regulatory compliance for "Memegoat".
- Expanded functional and non-functional specifications with rich examples and new subsections.
- Enhanced documentation with accessibility, security, UX, and Green IT strategies.
- Revised and restructured content for coherence and clarity.
2026-01-27 12:50:36 +01:00

478 lines
34 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# Sommaire
1. [Introduction au projet](#1-introduction-au-projet)
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 (MFA, Sessions)](#gestion-des-utilisateurs-et-authentification-mfa-sessions)
- [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)
- [Sécurité Applicative (Helmet, Clamscan, Sentry)](#sécurité-applicative-helmet-clamscan-sentry)
- [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](#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)
4.2 [Backend](#42-backend)
- [Architecture du backend (NestJS)](#architecture-du-backend-nestjs)
- [Controller](#controller)
- [Service](#service)
- [Module](#module)
- [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)
- [Table Users](#table-users)
- [Table Contents (Memes & GIFs)](#table-contents-memes--gifs)
- [Table Categories & Tags](#table-categories--tags)
- [Table Favorites](#table-favorites)
- [Table Audit Logs & Reports](#table-audit-logs--reports)
- [Table Sessions & API Keys](#table-sessions--api-keys)
- [Table RBAC (Rôles & Permissions)](#table-rbac-rôles--permissions)
- [Table PGP (Chiffrement symétrique)](#table-pgp-chiffrement-symétrique)
- [Migration & Seeding](#migration--seeding)
- [B.3 - Composant d’accès aux données (Drizzle ORM)](#b3---composant-daccès-aux-données-drizzle-orm)
- [Utilisation de Drizzle dans un Service Métier](#utilisation-de-drizzle-dans-un-service-métier)
- [Sécurité et Prévention des Injections SQL](#sécurité-et-prévention-des-injections-sql)
- [Gestion des Erreurs et Optimisation des Requêtes](#gestion-des-erreurs-et-optimisation-des-requêtes)
- [B.4 - Composants métier](#b4---composants-métier)
- [Gestion des médias (S3/Minio, Sharp, FFmpeg)](#gestion-des-médias-s3minio-sharp-ffmpeg)
- [Cycle de vie d'un contenu (Upload, Validation, Modération)](#cycle-de-vie-dun-contenu-upload-validation-modération)
- [Règles Métier et Avantages de Drizzle ORM](#règles-métier-et-avantages-de-drizzle-orm)
- [B.5 - Qualité et Tests](#b5---qualité-et-tests)
- [Tests unitaires (Jest)](#tests-unitaires-jest)
- [Assurance de Qualité et Détection Précoce des Bugs](#assurance-de-qualité-et-détection-précoce-des-bugs)
- [Maintenabilité du Code et Documentation](#maintenabilité-du-code-et-documentation)
- [Sécurité & Cryptographie](#sécurité--cryptographie)
- [JWT (JSON Web Token) & Sessions sécurisées](#jwt-json-web-token--sessions-sécurisées)
- [Hashing avec Argon2id](#hashing-avec-argon2id)
- [Data Transfer Object (DTO) & Validation (Zod/Class-validator)](#data-transfer-object-dto--validation-zodclass-validator)
- [Bibliothèque Helmet](#bibliothèque-helmet)
- [Content Security Policy (CSP)](#content-security-policy-csp)
- [X-Frame-Options](#x-frame-options)
- [Strict-Transport-Security (HSTS)](#strict-transport-security-hsts)
- [Referrer-Policy](#referrer-policy)
- [Permitted-Cross-Domain-Policies](#permitted-cross-domain-policies)
- [COEP, COOP & CORP](#coep-coop--corp)
- [CORS (Cross-Origin Resource Sharing)](#cors-cross-origin-resource-sharing)
- [SSL/TLS et Chiffrement des flux](#ssltls-et-chiffrement-des-flux)
- [Cryptographie Post-Quantique (Module ML-KEM / Kyber768)](#cryptographie-post-quantique-module-ml-kem--kyber768)
- [Chiffrement des données au repos (PGP/pgcrypto)](#chiffrement-des-données-au-repos-pgppgcrypto)
- [Antivirus applicatif (Intégration Clamscan)](#antivirus-applicatif-intégration-clamscan)
- [Veille technologique et de sécurité](#veille-technologique-et-de-sécurité)
- [OWASP Top Ten : Priorité à la sécurité applicative](#owasp-top-ten--priorité-à-la-sécurité-applicative)
- [Veille sur la sécurité Post-Quantique](#veille-sur-la-sécurité-post-quantique)
- [CERT-FR (Veille gouvernementale)](#cert-fr-veille-gouvernementale)
4.3 [Maquettage](#43-maquettage)
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)
- [Approche mobile-first](#approche-mobile-first)
- [Composants UI (Radix UI, Shadcn UI)](#composants-ui-radix-ui-shadcn-ui)
- [F.3 - Interface dynamique](#f3---interface-dynamique)
- [Explorateur de contenus (Grilles, Filtres)](#explorateur-de-contenus-grilles-filtres)
- [Gestion du profil et des favoris](#gestion-du-profil-et-des-favoris)
- [Upload de fichiers et prévisualisation interactive](#upload-de-fichiers-et-prévisualisation-interactive)
- [SEO & Accessibilité](#seo--accessibilité)
- [Veille technologique frontend (React 19 & Next.js App Router)](#veille-technologique-frontend-react-19--nextjs-app-router)
4.5 [Déploiement et Infrastructure](#45-déploiement-et-infrastructure)
- [Conteneurisation avec Docker et Docker Compose](#conteneurisation-avec-docker-et-docker-compose)
- [Orchestration des services (PostgreSQL, Redis, Minio)](#orchestration-des-services-postgresql-redis-minio)
5. [Conclusion](#5-conclusion)
- [Remerciements](#remerciements)
6. [Annexes](#6-annexes)
- [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)
---
# 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.
Dans un paysage numérique où la protection des données personnelles et la sécurité des infrastructures sont devenues des enjeux critiques, Memegoat se distingue par une approche **"Security by Design"** et **"Privacy by Design"**. L'application ne se contente pas d'offrir une interface utilisateur fluide et réactive ; elle intègre des mécanismes de chiffrement avancés (PGP, ML-KEM), une protection contre les menaces virales via un scan systématique des fichiers (ClamAV), et une architecture robuste basée sur des technologies de pointe telles que Next.js 16, NestJS et PostgreSQL.
### Objectifs principaux :
- **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.
# 2. Liste des compétences couvertes par le projet
Ce projet a été conçu pour couvrir l'intégralité du REAC (Référentiel d'Emploi, d'Activités et de Compétences) **Concepteur Développeur d'Applications (V04)**. Le tableau suivant détaille comment chaque compétence est mise en œuvre au sein de Memegoat.
| Compétence (CP) | Description | Mise en œuvre dans Memegoat |
|:----------------|:---------------------------------------------------------------------------------------------------------|:-------------------------------------------------------------------------------------------------------------------------------|
| **CP 1** | Maquetter une application | Conception de maquettes haute fidélité sous **Penpot**, respectant une approche mobile-first et les principes d'accessibilité. |
| **CP 2** | Réaliser une interface utilisateur web statique et adaptable | Intégration **Next.js 16** avec **Tailwind CSS 4** pour un rendu réactif et optimisé. |
| **CP 3** | Développer une interface utilisateur web dynamique | Développement de composants **React 19** utilisant les Server Actions et une gestion d'état optimisée. |
| **CP 4** | Réaliser une interface utilisateur avec une solution de gestion de contenu ou e-commerce | Création d'un module de gestion de contenu personnalisé pour l'administration et la modération. |
| **CP 5** | Créer une base de données | Modélisation et implémentation sous **PostgreSQL** via **Drizzle ORM**, incluant le chiffrement natif PGP. |
| **CP 6** | Développer les composants d’accès aux données | Implémentation de services de données sous NestJS avec un typage strict (TypeScript) et validation via Zod. |
| **CP 7** | Développer la partie back-end d’une application web ou mobile | Architecture modulaire **NestJS** intégrant JWT, RBAC et services métier complexes. |
| **CP 8** | Élaborer et mettre en œuvre des composants dans une application de gestion de contenu ou e-commerce | Développement de tableaux de bord administratifs pour le suivi des signalements et la gestion utilisateur. |
| **CP 9** | Concevoir une application | Élaboration de diagrammes UML et choix d'une architecture monorepo pour la cohérence globale. |
| **CP 10** | Collaborer à la gestion d’un projet informatique et à l’organisation de l’environnement de développement | Utilisation de Git (GitFlow), **Docker Compose** et gestion des tâches en méthode Agile. |
| **CP 11** | Préparer le déploiement de l’application | Configuration de conteneurs Docker pour l'orchestration des services (API, DB, Redis, MinIO). |
| **CP 12** | Organiser la veille technologique | Veille continue sur les évolutions de React 19, la sécurité Post-Quantique (ML-KEM) et le Green IT. |
# 3. Cahier des charges
## 3.1 Spécifications fonctionnelles
### Gestion des utilisateurs et authentification (MFA, Sessions)
Le système d'authentification de Memegoat repose sur une approche multi-niveaux garantissant sécurité et flexibilité. L'inscription et la connexion utilisent le hachage **Argon2id**, résistant aux attaques par force brute. La gestion des sessions est assurée par des jetons **JWT** avec un mécanisme de **rotation des jetons de rafraîchissement** (Refresh Tokens) pour limiter les risques de vol de session. Pour renforcer la sécurité, l'application intègre une authentification à deux facteurs (**MFA/TOTP**), dont les secrets sont chiffrés en base de données via **PGP**.
### Gestion et partage de contenus (Memes & GIFs)
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é.
### 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.
### Système de recherche par catégories et tags
La découverte de contenus est propulsée par un moteur de recherche multicritère. Les utilisateurs peuvent filtrer par catégories thématiques, tags ou recherche textuelle. L'architecture est optimisée grâce à des index performants et une dénormalisation contrôlée pour garantir des temps de réponse rapides.
## 3.2 Spécifications non fonctionnelles
### 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é.
### Sécurité Applicative (Helmet, Clamscan, Sentry)
La protection est proactive : l'en-tête **Helmet** prévient les attaques XSS et Clickjacking. Chaque fichier téléversé est analysé en temps réel par un moteur antivirus (**Clamscan**) avant stockage. La stabilité est monitorée par **Sentry**, tandis que les journaux d'audit tracent les actions sensibles.
### 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).
### Expérience utilisateur (UX)
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.
### 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.
### 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é.
### Tests automatisés
La robustesse repose sur une stratégie de tests rigoureuse avec **Jest**. Les services critiques (cryptographie, authentification) sont couverts par des tests unitaires, tandis que des tests d'intégration vérifient la communication avec la base de données via **Drizzle**.
## 3.3 Charte graphique
### Couleurs
La palette s'articule autour d'une dominante sombre (**Zinc/Black**) pour le confort visuel, avec des accents de violet électrique et d'indigo pour les éléments d'interaction, reflétant l'aspect moderne et communautaire.
### Police d’écriture
Le choix s'est porté sur **Geist Sans** (Vercel) pour sa lisibilité exceptionnelle, complétée par une police mono-espacée pour les éléments techniques.
### Logotype et image de marque
Le logotype représente une chèvre stylisée, symbole du **"G.O.A.T"**, incarnant l'ambition de devenir la référence ultime des mèmes tout en inspirant confiance par sa rigueur technique.
## 3.4 Spécifications de l’infrastructure (Docker, PostgreSQL, Redis, Minio)
L'infrastructure est entièrement conteneurisée avec **Docker**, garantissant la parité entre environnements.
- **Caddy** : Reverse proxy avec gestion automatique du SSL (TLS 1.3).
- **PostgreSQL** : Stockage relationnel avec extension `pgcrypto` pour PGP.
- **Redis** : Cache de performance et gestion des sessions.
- **MinIO** : Stockage d'objets compatible S3 pour les médias.
# 4. Réalisations
## 4.1 Organisation des tâches
La réussite d'un projet de l'envergure de Memegoat repose sur une organisation rigoureuse et une méthodologie de travail éprouvée. Pour ce développement, j'ai adopté une approche **Agile**, s'inspirant du cadre **Scrum**, permettant une itération rapide et une adaptation continue aux défis techniques rencontrés, notamment sur les aspects complexes de cryptographie et de traitement des médias.
### Gestion de projet et suivi des tâches
Le pilotage du projet a été centralisé sur la plateforme **Gitea** (alternative auto-hébergée à GitHub). Chaque fonctionnalité ou correction de bug a fait l'objet d'une "Issue" détaillée, servant de point de départ à la réflexion technique. Pour la gestion visuelle du flux de travail, j'ai utilisé un tableau **Kanban**, permettant de suivre l'évolution des tâches de l'état "Backlog" à "Terminé". Cette visibilité constante a été cruciale pour maintenir une cadence de développement régulière et prioriser les composants critiques liés à la sécurité.
### Gestion des versions (Versioning)
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
Pour assurer une cohérence parfaite entre les différentes étapes du développement, l'ensemble de l'environnement a été conteneurisé avec **Docker**. Cela a permis de s'affranchir des problématiques de configuration locale ("ça marche sur ma machine") en fournissant des services standardisés (PostgreSQL, Redis, MinIO) accessibles instantanément à chaque membre du projet ou lors du déploiement.
## 4.2 Backend
L'architecture backend de Memegoat a été conçue pour être à la fois robuste, évolutive et sécurisée. Le choix s'est porté sur **NestJS**, un framework Node.js progressif, pour sa capacité à structurer le code de manière modulaire et son support natif de **TypeScript**.
### Architecture du backend (NestJS)
NestJS impose une structure rigoureuse inspirée de l'architecture Angular, ce qui facilite grandement la maintenance. L'application est découpée en **Modules**, chacun étant responsable d'un domaine fonctionnel précis (ex: `UsersModule`, `AuthModule`, `ContentsModule`). Cette approche garantit une séparation stricte des préoccupations (**Separation of Concerns**).
#### Controller
Les contrôleurs constituent la porte d'entrée de l'API. Ils réceptionnent les requêtes HTTP, délèguent le traitement à la logique métier et retournent une réponse formatée au client. Dans Memegoat, chaque contrôleur utilise des décorateurs NestJS pour définir les routes, les méthodes (GET, POST, etc.) et les mécanismes de sécurité (**Guards**).
#### Service
Les services encapsulent l'intégralité de la logique métier. Ils sont injectés dans les contrôleurs via le mécanisme d'**injection de dépendances**. C'est ici que sont réalisées les opérations complexes : validation des données, calculs métiers, et interactions avec la base de données via l'ORM.
#### Module
Le module est la brique de base de NestJS. Il permet d'organiser le code en domaines logiques et de gérer les dépendances. Memegoat utilise un `AppModule` racine qui orchestre les modules transverses (Database, Config, Cache) et les modules métier.
#### Middleware
Les middlewares sont utilisés pour des traitements transverses sur les requêtes entrantes, comme le logging, la compression des réponses ou la gestion des en-têtes de sécurité via Helmet.
#### Guard
Les Guards sont responsables de l'autorisation. Ils déterminent si une requête donnée est autorisée à accéder à une route, en fonction des rôles de l'utilisateur (**RBAC**) ou de la validité de sa session (**JWT**).
#### Data Transfer Object (DTO)
Les DTO définissent la forme des données pour chaque opération de l'API. Couplés à **Zod**, ils permettent une validation stricte et automatique des données entrantes, protégeant l'application contre les données corrompues.
### B.1 - Installation et configuration de l’environnement
La mise en place a été optimisée pour la performance via le gestionnaire de paquets **pnpm**. La configuration est centralisée dans des variables d'environnement (`.env`), validées au démarrage par un schéma **Zod**. Cela permet de détecter immédiatement toute erreur de configuration critique.
### B.2 - Modélisation & Base de données (Drizzle ORM, PostgreSQL)
Pour la persistance, Memegoat s'appuie sur **PostgreSQL**. L'interaction est gérée par **Drizzle ORM**, un outil moderne "Type-safe" qui permet d'écrire des requêtes SQL de manière intuitive tout en bénéficiant de la puissance du typage TypeScript.
#### Table Users
Pilier de la gestion d'identité. Elle stocke les profils, les secrets MFA et les métadonnées RGPD. Les données sensibles (email) sont chiffrées nativement via **PGP**.
#### Table Contents (Memes & GIFs)
Centralise les métadonnées des médias : titres, slugs, clés de stockage S3 et statistiques d'utilisation.
#### Table Categories & Tags
Permettent une organisation taxonomique flexible des contenus pour faciliter la découverte et le filtrage.
#### Table Favorites
Gère la relation "plusieurs-à-plusieurs" entre utilisateurs et contenus.
#### Table Audit Logs & Reports
Assurent la traçabilité des actions administratives et permettent aux utilisateurs de signaler les contenus inappropriés pour la modération.
#### Table Sessions & API Keys
Gèrent l'accès prolongé (Refresh Tokens) et les accès programmatiques sécurisés.
#### Table RBAC (Rôles & Permissions)
Définit finement les droits d'accès (Utilisateur, Modérateur, Administrateur).
#### Table PGP (Chiffrement symétrique)
Configuration permettant l'usage transparent du chiffrement symétrique au sein de PostgreSQL via l'extension `pgcrypto`.
#### Migration & Seeding
L'évolution du schéma est gérée par **Drizzle Kit** via des fichiers de migration SQL versionnés. Des scripts de seeding permettent de peupler l'environnement avec des données cohérentes.
### 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.
#### 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.
#### 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.
### B.4 - Composants métier
#### Gestion des médias (S3/Minio, Sharp, FFmpeg)
Le pipeline de traitement inclut :
1. **Réception sécurisée** en mémoire.
2. **Scan antivirus** systématique (ClamAV).
3. **Optimisation** : Images via **Sharp** (WebP), GIFs/Vidéos via **FFmpeg**.
4. **Stockage persistant** sur MinIO (S3).
#### Cycle de vie d'un contenu (Upload, Validation, Modération)
Encadrement strict : de l'upload au statut "actif" ou "suspendu" suite à un signalement, garantissant la qualité des contenus de la plateforme.
#### Règles Métier et Avantages de Drizzle ORM
L'utilisation de Drizzle permet d'implémenter les contraintes métier (unicité, intégrité) de manière fluide et performante.
### B.5 - Qualité et Tests
#### Tests unitaires (Jest)
Couverture des services critiques : cryptographie, authentification et validateurs métier.
#### 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.
#### Maintenabilité du Code et Documentation
Génération automatique de la documentation API via **Swagger (OpenAPI)**, offrant une interface interactive pour tester les endpoints.
### 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.
#### Hashing avec Argon2id
Choix de l'algorithme vainqueur de la Password Hashing Competition pour une protection maximale des mots de passe.
#### Data Transfer Object (DTO) & Validation (Zod/Class-validator)
Validation rigoureuse des schémas de données dès l'entrée du système.
#### 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.
#### CORS (Cross-Origin Resource Sharing)
Configuration stricte des domaines autorisés à interagir avec l'API.
#### 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.
### Veille technologique et de sécurité
#### OWASP Top Ten : Priorité à la sécurité applicative
Conception guidée par les standards de l'OWASP pour prévenir les vulnérabilités les plus critiques.
#### Veille sur la sécurité Post-Quantique
Suivi des standards du NIST et de l'ANSSI pour la migration vers des algorithmes résistants.
#### CERT-FR (Veille gouvernementale)
Surveillance active des vulnérabilités pour maintenir les dépendances à jour.
## 4.3 Maquettage
### Choix de l'outil : Pourquoi PenPot ?
Utilisation de **PenPot** comme alternative Open-Source à Figma, favorisant la souveraineté des données et une transition fluide vers le code grâce au format SVG et au Flex Layout.
### Workflow de Design
1. **Wireframes** : Focus sur l'UX et l'ergonomie.
2. **Maquettes Haute Fidélité** : Application de l'identité visuelle.
3. **Prototypage** : Simulation du parcours utilisateur complet.
## 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é.
### F.2 - Architecture et Interfaces
#### Approche mobile-first
Conception centrée sur l'usage smartphone, s'adaptant progressivement aux écrans larges.
#### Composants UI (Radix UI, Shadcn UI)
Briques d'interface accessibles (WAI-ARIA) et cohérentes visuellement.
### F.3 - Interface dynamique
#### Explorateur de contenus (Grilles, Filtres)
Utilisation de grilles CSS et du chargement infini pour une navigation fluide, propulsée par les React Server Components.
#### Gestion du profil et des favoris
Interactions sécurisées via les Server Actions pour une réactivité instantanée.
#### Upload de fichiers et prévisualisation interactive
Zone de Drag & Drop avec validation client immédiate pour une UX optimale.
#### SEO & Accessibilité
Optimisation via la Metadata API et respect rigoureux des normes d'accessibilité numérique.
#### Veille technologique frontend (React 19 & Next.js App Router)
Exploration constante des Core Web Vitals pour maintenir des performances d'affichage de premier ordre.
## 4.5 Déploiement et Infrastructure
### Conteneurisation avec Docker et Docker Compose
Orchestration complète permettant une reproductibilité totale de la stack technique.
### Orchestration des services (PostgreSQL, Redis, Minio)
Isolation réseau et communication sécurisée entre les différents composants de l'infrastructure.
## 4.6 Écoconception (Green IT) et Accessibilité
### 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.
### Accessibilité Numérique (RGAA)
Vérification systématique des contrastes et de la sémantique pour garantir un web inclusif.
# 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.
### Droits des personnes
Mécanismes d'export de données (portabilité) et de suppression définitive (droit à l'oubli).
### Sécurité par défaut (Privacy by Design)
Minimisation des données et chiffrement systématique des informations identifiables.
# 6. Conclusion
Memegoat démontre qu'il est possible d'allier une thématique ludique à une exigence technique et sécuritaire de haut niveau. Ce projet a permis de maîtriser l'ensemble du cycle de développement d'une application moderne, de la conception UI/UX au déploiement orchestré, tout en intégrant des technologies de pointe en cryptographie.
### Remerciements
Je tiens à remercier l'équipe pédagogique pour son accompagnement tout au long de cette formation, ainsi que mes pairs pour leurs retours constructifs durant la phase de développement.
# 7. Annexes
### Annexe 1 - Schéma de classe POO du backend
*Lien ou visuel du diagramme de classes NestJS.*
### 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/)
### Annexe 3 - Glossaire technique
* **A11Y (Accessibilité) :** Pratiques visant à rendre les services numériques utilisables par tous.
* **API (Interface de Programmation d'Application) :** Pont de communication entre frontend et backend.
* **Argon2id :** Algorithme de hachage de mots de passe de pointe.
* **Docker :** Technologie de conteneurisation pour isoler l'application.
* **JWT (JSON Web Token) :** Jeton sécurisé pour l'authentification des utilisateurs.
* **ML-KEM (Kyber) :** Algorithme de cryptographie post-quantique.
* **ORM (Drizzle) :** Outil de liaison entre le code et la base de données.
* **PGP :** Standard de chiffrement asymétrique pour les données sensibles.
* **S3 (MinIO) :** Protocole de stockage de fichiers volumineux.
### Annexe 4 - Licences et bibliothèques
Liste des dépendances Open-Source utilisées (voir `package.json`).
Reference in New Issue View Git Blame Copy Permalink