memegoat/dossier-de-projet-cda.md

Sommaire

1. Introduction au projet

   • Objectifs principaux

2. Liste des compétences couvertes par le projet

3. Cahier des charges 3.1 Spécifications fonctionnelles - Gestion des utilisateurs et authentification - Gestion et partage de contenus - Sécurisation avancée - Panneau d’Administration et Modération - Système de recherche par catégories et tags

   3.2 Spécifications non fonctionnelles - Performance & Réactivité - Observabilité et Stabilité - Scalabilité - Expérience utilisateur (UX) - SEO (Search Engine Optimization) - Accessibilité (A11Y) - Maintenance et Extensibilité - Tests automatisés

   3.3 Charte graphique - Couleurs - Police d’écriture - Logotype et image de marque

   3.4 Spécifications de l’infrastructure

4. Réalisations 4.1 Organisation des tâches - Gestion de projet et suivi des tâches - Gestion des versions - Environnement de développement et Monorepo - Pipeline CI/CD

   4.2 Backend - Architecture du backend (NestJS) - B.1 - Installation et configuration - B.2 - Modélisation & Base de données - B.3 - Composant d’accès aux données - B.4 - Composants métier - B.5 - Flux métier et CRUD - B.6 - Qualité et Tests - Sécurité & Cryptographie - Veille technologique et de sécurité

   4.3 Maquettage - Choix de l'outil - Workflow de Design

   4.4 Frontend - F.1 - Stack technique - F.2 - Architecture et Interfaces - F.3 - Interface dynamique

   4.5 Déploiement et Infrastructure - Conteneurisation avec Docker - Orchestration des services

   4.6 Écoconception et Accessibilité - Stratégie d'Écoconception - Accessibilité Numérique (RGAA)

5. Respect de la réglementation (RGPD) - Registre des traitements - Droits des personnes - Sécurité par défaut

6. Conclusion - Remerciements

7. Annexes - Annexe 1 - Schéma de classe - Annexe 2 - Sources et ressources - Annexe 3 - Glossaire technique - 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é.

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.

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 Ubuntu Sans pour sa lisibilité exceptionnelle et son aspect moderne, complétée par Ubuntu Mono pour les éléments techniques et le code, assurant une cohérence visuelle sur tous les supports.

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 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.

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 :

1. Validation : Linting (Biome) et tests automatisés (Jest) sont exécutés sur chaque composant.
2. Build : Les images Docker sont construites pour valider la compilation.
3. Déploiement : L'application est automatiquement déployée sur le serveur de production via Docker Compose, assurant une livraison continue et fiable.

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. Memegoat utilise un middleware de logging (HTTPLogger) pour la traçabilité et un middleware de détection de robots (Crawler Detection) pour optimiser les ressources et sécuriser l'accès contre le scraping intensif.

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

Validation des données (Zod & DTO)

Toutes les données entrantes (corps de requête, paramètres d'URL) sont validées à l'aide de schémas Zod. Ce choix garantit :

• Un typage strict partagé entre le frontend et le backend.
• L'élimination des données malformées avant qu'elles n'atteignent la logique métier.
• Une documentation automatique des interfaces.

Gestion des médias (S3/Minio, Sharp, FFmpeg)

Le pipeline de traitement inclut :

1. Réception sécurisée en mémoire (Stream-based processing).
2. Scan antivirus systématique (ClamAV) avant toute écriture disque.
3. Optimisation : Images via Sharp (WebP/AVIF), GIFs/Vidéos via FFmpeg pour un compromis idéal qualité/poids.
4. Stockage persistant sur MinIO (S3) avec URLs signées pour la sécurité.

Cycle de vie d'un contenu (Upload, Validation, Modération)

Encadrement strict : de l'upload au statut "actif" ou "suspendu" suite à un signalement. L'utilisation du Soft Delete garantit la conformité RGPD tout en permettant un audit en cas de litige.

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. Les transactions sont utilisées pour garantir l'atomicité des opérations complexes (ex: upload média + insertion DB).

B.5 - Flux métier et CRUD

Cette section détaille les interactions dynamiques entre les composants du système pour les fonctionnalités clés.

1. Inscription et Authentification

Le choix de Argon2id pour le hachage des mots de passe offre la meilleure résistance connue contre les attaques par force brute et par GPU/ASIC. L'authentification est sécurisée par des sessions Iron Session (basées sur des cookies HttpOnly chiffrés) et un support natif du MFA (TOTP).

sequenceDiagram
    participant U as Utilisateur
    participant F as Frontend (Next.js)
    participant B as Backend (NestJS)
    participant D as Base de Données (PostgreSQL)
    participant S as Session (Iron Session)

    Note over U, S: Processus d'Inscription
    U->>F: Saisie (username, email, password)
    F->>B: POST /auth/register
    B->>B: Hachage du mot de passe (Argon2id)
    B->>B: Calcul du Blind Index (Email Hash)
    B->>D: INSERT INTO users (Email chiffré PGP)
    D-->>B: Confirmation
    B-->>F: Compte créé avec succès

    Note over U, S: Processus de Connexion
    U->>F: Login/Password
    F->>B: POST /auth/login
    B->>D: SELECT user WHERE email_hash = ?
    D-->>B: Données utilisateur (Password Haché)
    B->>B: Vérification Argon2id
    
    alt MFA Activé
        B-->>F: 200 OK (Require MFA)
        U->>F: Saisie du code TOTP
        F->>B: POST /auth/verify-2fa
        B->>B: Validation du secret chiffré PGP
    end

    B->>S: Création de la session chiffrée
    S-->>F: Cookie Set-Cookie (HttpOnly, Secure)
    F-->>U: Redirection vers le Dashboard

2. Publication de Contenu (CRUD Create)

Le flux de publication privilégie la sécurité (scan antivirus) et la performance utilisateur (traitement asynchrone possible, bien qu'actuellement synchrone pour garantir la disponibilité immédiate).

sequenceDiagram
    participant U as Utilisateur
    participant F as Frontend
    participant B as Backend
    participant AV as ClamAV (Antivirus)
    participant P as Processeur (Sharp/FFmpeg)
    participant S3 as Stockage S3 (MinIO)
    participant D as Base de Données

    U->>F: Upload du média (Meme/GIF)
    F->>B: POST /contents/upload (Multipart)
    B->>B: Validation du type MIME & Taille
    B->>AV: Scan binaire du fichier
    AV-->>B: Résultat Clean
    
    par Traitement d'optimisation
        B->>P: Sharp (Resize & WebP)
        P-->>B: Buffer optimisé
    and Upload S3
        B->>S3: Upload vers le bucket "memes"
        S3-->>B: Key / ETag
    end

    B->>D: INSERT INTO contents (S3 Key, Metadata)
    D-->>B: ID Contenu
    B-->>F: 201 Created (Redirection vers le contenu)

3. Système de Signalement et Modération

La modération est un flux métier critique. Nous utilisons un système de signalement par les utilisateurs qui alimente une file d'attente pour les modérateurs/administrateurs.

sequenceDiagram
    participant U as Utilisateur
    participant B as Backend
    participant D as Base de Données
    participant A as Admin/Modérateur

    U->>B: POST /reports (ContenuID, Motif)
    B->>D: INSERT INTO reports (Status: PENDING)
    D-->>B: OK
    
    Note over A, D: Interface de Modération
    A->>B: GET /reports (Filter: PENDING)
    B->>D: SELECT reports JOIN contents
    D-->>B: Liste des signalements
    B-->>A: Affichage du Dashboard Admin
    
    A->>B: PATCH /reports/:id (Status: RESOLVED)
    B->>D: UPDATE contents SET status = 'BLOCKED' (ou Soft Delete)
    D-->>B: OK
    B-->>A: Action confirmée

4. Recherche et Exploration (CRUD Read)

L'optimisation des lectures est cruciale pour une plateforme de médias. Nous utilisons une stratégie de mise en cache agressive via Redis pour les flux publics (tendances, nouveautés) afin de réduire la charge sur la base de données PostgreSQL.

sequenceDiagram
    participant U as Utilisateur
    participant F as Frontend
    participant B as Backend
    participant R as Cache (Redis)
    participant D as Base de Données

    U->>F: Navigation vers "Explore"
    F->>B: GET /contents/explore?sort=trend
    B->>R: Recherche de la clé cache (URL hash)
    
    alt Cache HIT (Données présentes)
        R-->>B: Retourne le JSON mis en cache
    else Cache MISS (Données absentes ou expirées)
        B->>D: SELECT contents (filtres, pagination)
        D-->>B: Résultats de la requête
        B->>R: Stockage du résultat (SET with TTL)
    end
    
    B-->>F: Envoi du flux de données
    F-->>U: Affichage fluide de la grille

5. 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.

B.6 - 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

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.

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
• Documentation Next.js
• Guide de sécurité OWASP

Annexe 3 - Glossaire technique

• A11Y (Accessibilité) :

  • 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.

• 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.

• Argon2id :

  • Définition : Algorithme de hachage de mots de passe, vainqueur de la Password Hashing Competition.
  • Explication : Contrairement aux méthodes anciennes (MD5, SHA1), Argon2id est conçu pour être extrêmement résistant aux attaques par force brute et par GPU, en utilisant des paramètres de mémoire et de temps configurables. C'est le standard recommandé par l'ANSSI.

• Biome :

  • 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.

• 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.

• Docker :

  • Définition : Plateforme permettant de lancer des applications dans des conteneurs isolés.
  • Explication : Docker permet d'empaqueter l'application avec toutes ses dépendances. Cela garantit que le projet fonctionnera de la même manière sur l'ordinateur du développeur, sur le serveur de test et en production.

• Drizzle ORM :

  • Définition : "Object-Relational Mapping" moderne et léger pour TypeScript.
  • Explication : Il permet d'interagir avec la base de données PostgreSQL en utilisant du code TypeScript typé. Contrairement à d'autres ORM plus lourds, Drizzle reste très proche du SQL natif, offrant ainsi de meilleures performances et une plus grande transparence.

• JWT (JSON Web Token) :

  • 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.

• 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).

• MFA (Multi-Factor Authentication) :

  • Définition : Méthode d'authentification nécessitant au moins deux preuves d'identité.
  • Explication : Dans Memegoat, l'utilisateur doit fournir son mot de passe ET un code temporaire (TOTP) généré par une application mobile, doublant ainsi la protection du compte.

• PGP (Pretty Good Privacy) :

  • Définition : Programme de chiffrement et de déchiffrement de données asymétrique.
  • Explication : Utilisé pour chiffrer les données sensibles (comme les emails) directement dans la base de données. Même en cas de fuite de la base, les données restent illisibles sans la clé privée correspondante.

• RBAC (Role-Based Access Control) :

  • Définition : Système de gestion des accès basé sur des rôles.
  • Explication : Permet de définir précisément qui peut faire quoi (ex: un utilisateur peut poster, un modérateur peut supprimer n'importe quel post, un administrateur peut gérer les comptes).

• S3 (MinIO) :

  • Définition : Protocole de stockage d'objets (Simple Storage Service).
  • Explication : MinIO est une alternative open-source compatible avec Amazon S3. Il est utilisé pour stocker les fichiers médias (mèmes, GIFs) de manière performante et scalable, séparément de la base de données.

• SSR / SSG (Next.js) :

  • Définition : Server-Side Rendering (rendu côté serveur) et Static Site Generation (génération de site statique).
  • Explication : Ces techniques permettent de pré-rendre les pages HTML. Cela améliore considérablement le SEO et la vitesse de chargement initiale pour l'utilisateur.

• NestJS :

  • Définition : Framework Node.js progressif pour la construction d'applications côté serveur efficaces et évolutives.
  • Explication : Utilisé pour le backend de Memegoat, il offre une architecture modulaire et un support natif de TypeScript, ce qui facilite grandement la maintenance et le test des différents services (authentification, gestion des médias, etc.).

• Next.js :

  • Définition : Framework React pour le développement web.
  • Explication : Choisi pour le frontend, il permet de bénéficier du rendu hybride (SSR/SSG), optimisant ainsi les performances et le référencement naturel (SEO) de la plateforme.

• TypeScript :

  • 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.

• 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).