🎯 Le contexte : un besoin concret
Ce projet est né d'un besoin réel au sein du CRDV (Centre de Ressources pour Déficients Visuels), dont je fais partie. Chaque semaine, les résidents de l'internat doivent pouvoir consulter les menus du midi et du soir. Jusque-là, rien de compliqué... sauf que l'accessibilité entre en jeu.
📋 La situation initiale : Les menus étaient distribués sur papier, en gros caractères pour les malvoyants et en braille pour les non-voyants. Mais chaque personne a des besoins différents : certains lisent en police 18, d'autres en police 36, d'autres encore préfèrent le braille intégral ou abrégé...
Le problème ? Il était impossible d'adapter le menu à chaque personne individuellement. Imprimer des dizaines de versions différentes chaque semaine n'était tout simplement pas viable.
C'est alors que j'ai eu une idée simple : tout le monde possède un smartphone. Chaque résident sait utiliser son téléphone avec ses propres paramètres d'accessibilité (zoom, VoiceOver, TalkBack, contraste...). Pourquoi ne pas créer une application web qui affiche le menu de façon nativement accessible ?
✨ Fonctionnalités de l'application
Miam DV n'est pas qu'un simple affichage de menu. L'application propose plusieurs fonctionnalités pensées pour faciliter le quotidien des résidents et du personnel :
Menu de la semaine
Affichage clair des menus midi et soir, du lundi au vendredi, avec entrée, plat, fromage et dessert.
100% Accessible
Compatible avec VoiceOver, TalkBack et tous les outils d'accessibilité. Chacun utilise ses réglages personnels.
Proverbe ou blague
Chaque semaine, un proverbe ou une blague est affiché pour égayer les repas et créer du lien.
Suggestions
Les utilisateurs peuvent proposer leurs propres proverbes ou blagues pour les semaines suivantes.
Administration sécurisée
Interface d'administration avec authentification JWT pour gérer les menus et les suggestions.
Serveur MCP
Automatisation de la publication des menus via un serveur Model Context Protocol.
♿ L'accessibilité au cœur du projet
Contrairement à de nombreux projets où l'accessibilité est ajoutée après coup, Miam DV a été conçu dès le départ pour être accessible. C'est la raison d'être même du projet.
Pourquoi une application web plutôt qu'une app native ?
- Pas d'installation requise : un simple lien à ouvrir dans le navigateur
- Multi-plateforme : fonctionne sur iOS, Android, Windows, Mac...
- Toujours à jour : pas besoin de télécharger des mises à jour
- Accessibilité native : les navigateurs respectent les préférences système (zoom, contraste, synthèse vocale)
Les bonnes pratiques appliquées
HTML sémantique
Utilisation de balises appropriées (header, main, nav, article) pour une navigation logique au lecteur d'écran.
Navigation clavier
Tous les éléments interactifs sont accessibles et navigables au clavier avec un ordre logique.
Contrastes suffisants
Les couleurs respectent les ratios WCAG pour être lisibles par les personnes malvoyantes.
Texte redimensionnable
L'interface s'adapte parfaitement aux agrandissements de texte jusqu'à 200% sans perte d'information.
💡 Le pouvoir du smartphone : En laissant chaque utilisateur consulter l'application sur son propre appareil, configuré selon ses besoins, on résout élégamment le problème de la personnalisation. Plus besoin d'imprimer 10 versions différentes du menu !
🛠️ Stack technique
Pour ce projet, j'ai choisi une stack moderne et robuste, capable de gérer l'authentification, la persistance des données, et un déploiement professionnel.
Frontend
Le frontend est développé avec Angular en utilisant les standalone components, une approche moderne qui simplifie l'architecture. L'interface est stylée avec Tailwind CSS pour un développement rapide et cohérent.
Les interceptors Angular gèrent automatiquement l'ajout du token JWT sur chaque requête et la redirection en cas d'erreur d'authentification.
Backend
Le backend repose sur NestJS, un framework Node.js inspiré d'Angular qui offre une architecture modulaire et une excellente gestion de la sécurité. TypeORM assure la communication avec la base de données MySQL.
L'authentification utilise des tokens JWT avec un système de versioning : si un administrateur modifie son mot de passe, son ancien token est automatiquement invalidé.
Déploiement
L'application est entièrement containerisée avec Docker. Caddy sert
de reverse proxy et gère automatiquement les certificats HTTPS. Un simple docker compose up
suffit à déployer l'ensemble de l'infrastructure.
🏗️ Architecture du projet
Vue d'ensemble
Structure des fichiers
miam-dv/
├── src/ # Frontend Angular
│ ├── app/
│ │ ├── components/ # Standalone components
│ │ ├── services/ # Services (API, Auth)
│ │ └── interceptors/ # HTTP interceptors
│ └── environments/
├── backend/ # Backend NestJS
│ ├── src/
│ │ ├── auth/ # Module authentification
│ │ ├── menus/ # CRUD menus
│ │ ├── proverbes/ # CRUD proverbes
│ │ ├── suggestions/ # CRUD suggestions
│ │ └── admins/ # Gestion administrateurs
│ └── entities/ # Entités TypeORM
├── mcp-server/ # Serveur MCP
├── docker-compose.yml
└── Caddyfile
Le serveur MCP : automatiser la publication
Une fonctionnalité avancée du projet est le serveur MCP (Model Context Protocol). Ce serveur expose des "tools" qui permettent d'automatiser la publication des menus via des requêtes HTTP structurées.
publish_week_menu
Publie ou remplace le menu d'une semaine complète en une seule requête.
publish_week_proverb
Publie le proverbe ou la blague de la semaine.
publish_week_from_text
Parse un bloc de texte en français et extrait automatiquement le menu.
clear_week_data
Supprime les données d'une semaine (nécessite confirmation).
🤖 Cas d'usage : Grâce au serveur MCP, un assistant IA peut directement publier les menus à partir d'un simple texte copié-collé du planning de la cuisine. Plus besoin de saisie manuelle !
📡 API REST
Le backend expose une API REST complète pour gérer toutes les ressources de l'application. Voici les principaux endpoints :
| Endpoint | Méthode | Description | Auth |
|---|---|---|---|
/api/auth/login |
POST | Connexion administrateur | ❌ |
/api/menus |
GET | Liste des menus de la semaine | ❌ |
/api/menus |
POST | Créer un menu | ✅ Admin |
/api/proverbes |
GET | Proverbe/blague de la semaine | ❌ |
/api/suggestions |
POST | Proposer un proverbe/blague | ❌ |
/api/suggestions |
GET | Liste des suggestions | ✅ Admin |
Nettoyage automatique : Un cron job supprime automatiquement les menus et proverbes tous les vendredis à 16h00 (Europe/Paris) pour préparer la semaine suivante.
📝 Bilan et impact
Miam DV est le projet dont je suis le plus fier, car il a un impact concret et positif sur le quotidien de personnes réelles. Ce n'est pas juste un exercice technique : c'est une solution qui répond à un vrai problème d'accessibilité.
🎯 Résultat : Les résidents de l'internat peuvent désormais consulter le menu de la semaine depuis leur smartphone, avec leurs propres réglages d'accessibilité. Plus besoin d'imprimer des dizaines de versions différentes, et tout le monde a accès à la même information.
Ce que j'ai appris
- Angular avancé : standalone components, interceptors, guards, services injectables
- NestJS : architecture modulaire, décorateurs, guards, pipes de validation
- Authentification JWT : tokens, refresh, invalidation, rôles
- TypeORM : entités, relations, migrations
- Accessibilité : WCAG, ARIA, tests avec lecteurs d'écran
- Docker multi-services : orchestration frontend + backend + base de données
🔗 Voir le projet
Le code source complet est disponible sur GitHub. Le projet inclut une documentation détaillée pour le déploiement et l'utilisation de l'API.