Application web
Meal Planner
Planificateur de repas hebdomadaire — conçu pour être utilisé par toutes et tous, sans exception.
Aperçu de l'interface
Description du projet
Meal Planner est une application web monopage (SPA) développée en JavaScript vanilla, sans framework ni dépendance externe. Elle permet de planifier ses repas sur 4 semaines, de gérer un livre de recettes personnalisé, de générer automatiquement une liste de courses et de synchroniser son planning avec Google Agenda.
Le projet a été conçu avec l'accessibilité comme contrainte principale, et non comme ajout a posteriori — chaque composant est navigable au clavier, conforme ARIA, et testé avec des lecteurs d'écran.
Stack technique
HTML5 sémantique
Structure ARIA complète, landmarks, headings
CSS3 natif
Variables custom, Grid, Flexbox, media queries
JavaScript ES6+
Vanilla, modules, LocalStorage, SPA routing
SEO
Balises meta, Open Graph, robots, sémantique
Responsive Design
Adaptatif dès 320px, mobile first
API Google Agenda
Export & synchronisation des repas planifiés
Fonctionnalités clés
-
Planning sur 4 semaines Grille visuelle par type de repas, navigable entièrement au clavier
-
Livre de recettes Création, édition et filtrage de recettes avec ingrédients & instructions
-
Liste de courses auto Génération automatique depuis le planning, regroupement par catégorie
-
Sync Google Agenda Export des repas dans l'agenda personnel, mise à jour en temps réel
-
Occasions spéciales Marquage des repas festifs ou d'événements avec couleur et icône
-
Gestion des convives Nombre de personnes par repas, adaptation des quantités d'ingrédients
Conformité accessibilité
Engagement WCAG 2.2 AAA & RGAA 4.1
- Navigation 100% clavier
- Rôles & propriétés ARIA
- Contrastes ≥ 7:1 (AAA)
- Lecteurs d'écran (NVDA, JAWS, VoiceOver)
- Lien d'évitement visible au focus
- Textes alternatifs & descriptions
- Gestion du focus dans les modales
- prefers-reduced-motion respecté
- Mode sombre automatique
- Langue HTML déclarée (lang="fr")