Le besoin de départ
Un projet né d’un besoin concret
À l’internat, les menus étaient principalement communiqués sur papier. Des adaptations pouvaient être proposées, notamment avec des caractères agrandis, mais ce format n’était pas toujours pratique à consulter ou disponible au moment où l’on en avait besoin.
J’ai donc imaginé une application permettant de retrouver les menus de la semaine depuis n’importe quel appareil. Mon objectif n’était pas uniquement de reproduire le document papier à l’écran, mais d’organiser les informations de manière plus claire : un jour, un repas et une catégorie de plat à la fois.
Miam DV reste un projet personnel. Il s’inspire directement de situations que je connais en tant que personne malvoyante et de mes échanges avec d’autres personnes déficientes visuelles.
Fonctionnement
Consulter et gérer les menus
L’interface publique présente les menus du lundi au vendredi. Pour chaque journée, les repas du midi et du soir sont séparés, avec les différentes parties du menu : entrée, plat, fromage et dessert.
L’affichage s’adapte à la taille de l’écran. Sur mobile, les journées peuvent être parcourues sous forme de cartes. Sur un écran plus large, plusieurs jours sont visibles simultanément.
L’application propose également une blague ou un proverbe de la semaine. Les utilisateurs peuvent envoyer leurs propres suggestions depuis un formulaire public. Ces propositions ne sont pas publiées immédiatement : elles doivent d’abord être examinées et acceptées depuis l’espace d’administration.
Consultation des menus
Les menus sont classés par jour et par période afin de retrouver rapidement le repas recherché.
Suggestions des utilisateurs
Un formulaire permet de proposer une blague ou un proverbe, qui sera ensuite soumis à modération.
Administration
Une interface protégée permet d’ajouter, de modifier ou de supprimer les menus, de traiter les suggestions et de gérer les comptes administrateurs.
Mise à jour hebdomadaire
Les anciennes données sont automatiquement supprimées chaque vendredi à 16 heures afin de préparer la publication de la semaine suivante.
Préférences d’affichage
L’utilisateur peut choisir le thème de l’interface. Sa préférence est conservée dans le navigateur.
Accessibilité
Une accessibilité intégrée au développement
L’accessibilité a été prise en compte dès la conception du projet. L’objectif est de proposer une interface dont la structure et les retours restent compréhensibles avec différents moyens de navigation.
Ce travail améliore l’utilisation de l’application avec un lecteur d’écran ou sans souris. Il ne remplace toutefois pas un audit RGAA complet : je présente donc Miam DV comme une application conçue en tenant compte de l’accessibilité, et non comme une application certifiée ou « 100 % accessible ».
- Séparation claire des jours et des repas
- Champs associés à leurs intitulés
- Erreurs et confirmations annoncées par des zones de statut
- Intitulés descriptifs pour les actions
- États de chargement et messages d’erreur
- Utilisation au clavier des formulaires et de l’administration
- Adaptation aux petits écrans et aux préférences visuelles
Architecture
Une application répartie en plusieurs services
Le front-end est développé avec Angular, TypeScript, Angular Material et Tailwind CSS. Il récupère les menus, les proverbes et les suggestions auprès d’une API REST réalisée avec NestJS.
L’API utilise TypeORM pour communiquer avec une base de données MySQL. Elle gère les menus, les suggestions, les contenus publiés et les comptes administrateurs.
L’espace d’administration est protégé par une authentification JWT. Le rôle de l’utilisateur et une version du jeton sont vérifiés par le backend. Lorsqu’un compte administrateur est modifié ou supprimé, ses anciens jetons peuvent être invalidés.
L’ensemble est réparti dans plusieurs services Docker. Caddy sert de reverse proxy et achemine les requêtes vers le front-end Angular, l’API NestJS, la base de données MySQL et le serveur MCP.
Administration
Une interface protégée pour gérer les contenus
L’administration permet d’ajouter, de modifier et de supprimer les menus, de modérer les suggestions reçues et de gérer les comptes administrateurs.
La séparation entre l’interface publique et cet espace plus dense m’a amené à concevoir deux parcours différents, tout en conservant des retours clairs pour les chargements, les erreurs et les confirmations.
Model Context Protocol
Faciliter la publication avec MCP
La saisie manuelle de tous les repas d’une semaine peut être répétitive. J’ai donc ajouté un serveur MCP afin d’automatiser une partie de la publication.
- Publier ou remplacer le menu d’une semaine
- Publier le proverbe ou la blague de la semaine
- Transformer un menu textuel en données structurées
- Supprimer les données d’une semaine déterminée
Le serveur transmet les informations à l’API NestJS avec des permissions limitées et une limitation du nombre de requêtes. Cette partie m’a permis de travailler sur la transformation de données textuelles, leur validation et la communication entre plusieurs services.
Défis techniques
Principales difficultés
Structurer les menus
Il fallait représenter plusieurs journées, deux périodes par jour et différentes catégories de plats, tout en conservant un affichage simple à parcourir.
Concevoir deux interfaces différentes
L’interface publique doit rester très simple, tandis que l’administration rassemble davantage d’actions, de formulaires et d’états.
Gérer les retours dynamiques
Les chargements, les erreurs, les confirmations et les résultats d’une modération doivent être visibles sans perturber la navigation, y compris avec une technologie d’assistance.
Protéger l’administration
J’ai mis en place l’authentification, les rôles et l’invalidation des anciens jetons lorsqu’un compte administrateur est modifié.
Déployer plusieurs services
Docker m’a permis de séparer le front-end, l’API, la base de données et le serveur MCP tout en facilitant leur déploiement.
Enseignements
Ce que ce projet m’a appris
Miam DV m’a permis d’approfondir Angular sur une application répondant à un besoin réel. J’ai travaillé sur les composants standalone, les formulaires, les appels vers une API, la gestion des états et la création d’interfaces adaptées à différents écrans.
J’ai également progressé avec NestJS, TypeORM et l’authentification JWT. Même si mon orientation reste le développement front-end, comprendre le fonctionnement du backend m’aide à mieux structurer les échanges de données et à concevoir des interfaces plus cohérentes avec l’API.
Enfin, le projet m’a appris qu’une interface accessible ne repose pas sur une seule fonctionnalité. Elle demande de vérifier la structure des pages, les intitulés, les messages dynamiques, la navigation et les différents parcours utilisateur tout au long du développement.
Découvrir Miam DV
Le code du front-end, du backend et du serveur MCP est disponible sur GitHub.