Mathis/memegoat
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Activity

docs: remove detailed table of contents from project dossier

Browse Source 
- Simplified the document by removing the exhaustive table of contents to enhance readability.
- Maintained key subsections and updated in-text references for smooth navigation.
This commit is contained in:
Mathis HERRIOT
2026-01-28 13:19:49 +01:00
parent 329a150ff8
commit 988eacc281
1 changed files with 85 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

290
dossier-de-projet-cda.md
View File

@@ -1,139 +1,3 @@
# 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 (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)
- [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 (Versioning)](#gestion-des-versions-versioning)
- [Environnement de développement et Monorepo](#environnement-de-développement-et-monorepo)
- [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
- [Choix de l'outil : Pourquoi PenPot ?](#choix-de-loutil--pourquoi-penpot-)
- [Workflow de Design](#workflow-de-design)
- 4.4 [Analyse et Conception](#44-analyse-et-conception)
- [Analyse des besoins et Personas](#analyse-des-besoins-et-personas)
- [User Stories](#user-stories)
- [Diagramme de Cas d'Utilisation (Use Case)](#diagramme-de-cas-dutilisation-use-case)
- [Diagramme de Séquence (Flux d'Upload)](#diagramme-de-séquence-flux-dupload)
- 4.5 [Frontend](#45-frontend)
- [F.1 - Stack technique (Next.js 16, React 19, Tailwind CSS 4)](#f1---stack-technique-nextjs-16-react-19-tailwind-css-4)
- [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 (Privacy by Design)](#sécurité-par-défaut-privacy-by-design)
6. [Conclusion](#6-conclusion)
- [Remerciements](#remerciements)
7. [Annexes](#7-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.
@@ -150,20 +14,20 @@ Dans un paysage numérique où la protection des données personnelles et la sé
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. |
| 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é. Voir [4.3 Maquettage](#43-maquettage). |
| **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é. Voir [F.1 Stack technique](#f1---stack-technique-nextjs-16-react-19-tailwind-css-4). |
| **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. Voir [F.3 Interface dynamique](#f3---interface-dynamique-et-ux). |
| **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. Voir [4.4 Analyse](#44-analyse-et-conception). |
| **CP 5** | Créer une base de données | Modélisation et implémentation sous **PostgreSQL** via **Drizzle ORM**, incluant le chiffrement natif PGP. Voir [B.2 Modélisation](#b2---modélisation--base-de-données-drizzle-orm-postgresql). |
| **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. Voir [B.3 Accès aux données](#b3---composant-daccès-aux-données-drizzle-orm). |
| **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. Voir [4.2 Backend](#42-backend). |
| **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. Voir [B.5 Flux métier](#b5---flux-métier-et-crud). |
| **CP 9** | Concevoir une application | Élaboration de diagrammes UML et choix d'une architecture monorepo pour la cohérence globale. Voir [4.4 Analyse](#44-analyse-et-conception). |
| **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. Voir [4.1 Organisation](#41-organisation-des-tâches). |
| **CP 11** | Préparer le déploiement de l’application | Configuration de conteneurs Docker pour l'orchestration des services (API, DB, Redis, MinIO). Voir [4.5 Déploiement](#45-déploiement-et-infrastructure). |
| **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. Voir [B.6 Qualité et Tests](#b6---qualité-et-tests). |
# 3. Cahier des charges
@@ -256,13 +120,22 @@ Le choix s'est porté sur **Ubuntu Sans** pour sa lisibilité exceptionnelle et
### 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)
## 3.4 Spécifications de l’infrastructure
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.
- **Caddy** : Reverse proxy avec gestion automatique du SSL (TLS 1.3). Il agit comme point d'entrée unique, gérant le routage vers le frontend et le backend tout en assurant une couche de sécurité supplémentaire.
- **PostgreSQL 17** : Stockage relationnel avec extension `pgcrypto` pour le chiffrement PGP.
- **Redis 7** : Utilisé pour la mise en cache des requêtes API et la gestion des sessions à haute performance.
- **MinIO** : Serveur de stockage d'objets auto-hébergé, compatible avec l'API Amazon S3, utilisé pour la persistance des fichiers médias.
- **ClamAV** : Service d'analyse antivirus intégré au flux d'upload pour protéger l'infrastructure contre les fichiers malveillants.
## 3.5 Sécurité et Conformité
Le projet a été conçu selon le principe de **Défense en Profondeur**.
- **Sécurité Applicative** : Validation rigoureuse via Zod, hachage Argon2id, et protection contre les failles OWASP (XSS, CSRF) via Helmet.
- **Sécurité des Données** : Chiffrement PGP au repos et cryptographie post-quantique (ML-KEM) pour les échanges de clés.
- **Disponibilité** : Architecture conteneurisée permettant un redémarrage rapide et une isolation des services.
- **Conformité RGPD** : Gestion native des droits utilisateurs (accès, oubli) et minimisation des données collectées.
# 4. Réalisations
@@ -294,7 +167,40 @@ L'automatisation est au cœur du processus de qualité. Un pipeline **CI/CD** a
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
## 4.2 Analyse et Conception
La phase de conception est le socle sur lequel repose la robustesse de Memegoat. Elle a permis d'anticiper les défis techniques liés à la sécurité et à la gestion des médias.
### Analyse des besoins et Personas
L'analyse a identifié trois profils types (Personas) :
1. **Le Créateur de contenu** : Recherche la simplicité d'upload et une visibilité maximale.
2. **Le Consommateur** : Privilégie la fluidité de navigation et la pertinence du flux (tendances).
3. **Le Modérateur** : Nécessite des outils d'administration efficaces pour garantir la sécurité de la communauté.
### User Stories
- "En tant qu'utilisateur, je veux pouvoir téléverser un mème de manière sécurisée afin de le partager."
- "En tant que modérateur, je veux pouvoir suspendre un contenu signalé pour non-respect des règles."
- "En tant qu'utilisateur soucieux de ma vie privée, je veux pouvoir activer la double authentification (MFA)."
### Diagramme de Cas d'Utilisation (Use Case)
Il illustre les interactions majeures : Inscription, Recherche, Upload, Modération, et Gestion de profil.
### Diagramme de Séquence (Flux d'Upload)
Détaille le passage du média à travers le scanner antivirus ClamAV avant son stockage sur MinIO et son référencement en base de données.
## 4.3 Maquettage
Le design de Memegoat a été guidé par une approche **Mobile-First** et une esthétique épurée.
### Choix de l'outil : Pourquoi PenPot ?
Le choix de **PenPot** s'inscrit dans la démarche Open-Source du projet. Contrairement à Figma, PenPot permet une pleine maîtrise des assets (format SVG natif) et facilite la collaboration sans contraintes de licences propriétaires, tout en offrant des fonctionnalités de prototypage avancées.
### Workflow de Design
1. **Wireframes** : Définition de la structure sans distraction visuelle.
2. **Maquettes Haute Fidélité** : Application de la charte graphique (Ubuntu Sans, palette de gris profond).
3. **Prototypage** : Simulation des transitions pour valider l'UX (User Experience) avant le développement.
## 4.4 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**.
@@ -716,65 +622,38 @@ sequenceDiagram
## 4.5 Frontend
### F.1 - Stack technique (Next.js 16, React 19, Tailwind CSS 4)
L'interface utilisateur de Memegoat a été développée avec **Next.js**, en tirant parti des dernières avancées de l'écosystème React pour offrir une expérience fluide, performante et accessible.
### F.1 - Stack technique (Next.js 16, React 19, Tailwind CSS 4)
L'interface de Memegoat repose sur une stack à la pointe de l'écosystème web, choisie pour ses performances et sa maintenabilité :
- **Next.js 16 (App Router)** : Utilisation du framework de référence pour React, permettant un rendu hybride. Les pages sont pré-rendues côté serveur (SSR) pour le SEO, tandis que les interactions dynamiques sont gérées côté client.
- **React 19** : Cette version majeure introduit des améliorations significatives, notamment dans la gestion des formulaires avec les **Server Actions** et le support natif de l'asynchronisme (use, transition API), réduisant drastiquement le code "boilerplate" de gestion d'état.
- **Tailwind CSS 4** : La nouvelle itération de ce framework "Utility-First" offre une compilation ultra-rapide et une configuration simplifiée via CSS-native variables, permettant de construire des interfaces complexes sans quitter le fichier HTML/JSX.
### F.2 - Architecture et Interfaces
L'architecture frontend suit les principes de la **composabilité** et de la séparation des responsabilités.
#### 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.
#### 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)**.
L'architecture frontend suit les principes de la **composabilité** et de la séparation des responsabilités. Le frontend est organisé en composants réutilisables, suivant les principes de l'**Atomic Design**.
- **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.
- **Type-Safety** : Les interfaces TypeScript sont partagées avec le backend, garantissant que les données affichées correspondent exactement aux données envoyées par l'API.
- **Rendu Hybride** : 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 directement sur le serveur.
### F.3 - Interface dynamique et UX
#### 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.
#### 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.
#### 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.
L'expérience utilisateur est au cœur du développement :
- **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**, simplifiant l'architecture en éliminant le besoin de définir manuellement des API routes dédiées.
- **Optimistic Updates** : Pour des actions comme la mise en favoris, l'interface réagit instantanément avant même la confirmation du serveur, renforçant la sensation de fluidité.
- **Streaming et Suspense** : L'utilisation de placeholders animés (**Skeletons**) pendant le chargement des contenus réduit la perception du temps d'attente.
### 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.
Memegoat est optimisé pour les moteurs de recherche :
- **Génération dynamique de métadonnées** : Chaque mème possède son propre titre, description et image OpenGraph générés dynamiquement via la fonction `generateMetadata`.
- **Données structurées (JSON-LD)** : Intégration de schémas (ImageObject, VideoObject) pour aider les moteurs de recherche à indexer le contenu de manière sémantique et favoriser l'apparition dans les "rich snippets".
### F.5 - Accessibilité et Design Inclusif (A11Y)
Le projet respecte les standards d'accessibilité :
- **Composants Radix UI / Shadcn** : Utilisation de primitives accessibles respectant les spécifications WAI-ARIA (Gestion du Focus Trap, Navigation Clavier).
- **Contraste et Navigation** : Respect des ratios de contraste WCAG et support complet de la navigation au clavier avec une gestion visible du focus.
- **Sémantique HTML** : Utilisation rigoureuse des balises sémantiques (`<header>`, `<main>`, `<section>`) pour faciliter la navigation des lecteurs d'écran.
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
## 4.6 Déploiement et Infrastructure
L'infrastructure de Memegoat est conçue pour être portable, scalable et sécurisée, s'appuyant sur les standards de l'industrie.
@@ -792,7 +671,7 @@ En façade, nous utilisons **Caddy** comme serveur web et reverse proxy. Contrai
### 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é
## 4.7 Écoconception 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.
@@ -818,9 +697,10 @@ L'application tient à jour un registre des traitements limitant la collecte aux
### Droits des personnes
Memegoat intègre nativement des mécanismes pour répondre aux sollicitations des utilisateurs :
- **Droit d'accès et portabilité** : Possibilité d'exporter l'intégralité des données rattachées à un compte via un service dédié (`exportUserData`).
- **Droit à l'effacement (Droit à l'oubli)** : Implémentation du **Soft Delete** permettant une suppression logique immédiate pour l'utilisateur, suivie d'une purge physique automatisée après 30 jours par le `PurgeService`.
- **Droit d'opposition et de rectification** : Interface de gestion de compte permettant la mise à jour ou la suppression des informations personnelles à tout moment.
- **Droit d'accès et portabilité** : Possibilité d'exporter l'intégralité des données rattachées à un compte via un service dédié (`exportUserData`).
- **Droit à l'effacement (Droit à l'oubli)** : Implémentation du **Soft Delete** permettant une suppression logique immédiate pour l'utilisateur, suivie d'une purge physique automatisée après 30 jours par le `PurgeService`. Ce délai permet de prévenir les suppressions accidentelles et de conserver les preuves nécessaires en cas de litige ou de réquisition judiciaire.
- **Droit d'opposition et de rectification** : Interface de gestion de compte permettant la mise à jour ou la suppression des informations personnelles à tout moment.
- **Information des utilisateurs** : Une politique de confidentialité claire est accessible, détaillant la finalité des traitements et la durée de conservation des données.
### Sécurité par défaut (Privacy by Design)
- **Minimisation des données** : Seules les informations essentielles sont conservées.