Mission Dahu : Une Plateforme d'Éducation Environnementale pour les Alpes Suisses

Un voyage de zéro à une mise en production

Qu'est-ce que Mission Dahu ?

Mission Dahu est une application web d'éducation à l'environnement conçue spécifiquement pour le milieu alpin. Nommée d'après le légendaire Dahu — une créature mythique des montagnes du folklore français et suisse — cette plateforme innovante permet aux moniteurs de ski et aux éducateurs d'enseigner aux enfants de 10 à 12 ans les impacts environnementaux des sports de montagne et des loisirs en plein air.

Le Parcours Technique : De l'Idée à la Production

Ce qui a commencé comme une simple initialisation de monorepo s'est transformé en une plateforme éducative complète avec des composants interactifs riches, un support multilingue. Voici les phases clés du développement.

Phase 1 : Fondations et Design System

Le projet a débuté par l'établissement de bases solides :

• Initialisation de la structure monorepo avec PNPM Workspaces

• Création d'un design system avec Storybook

• Construction des composants de base (Bouton, Timer, Icônes Lucide)

• Développement d'un éditeur visuel avec React et Vite

Phase 2 : Architecture Backend avec AdonisJS

L'architecture backend repose sur des choix techniques solides :

Décision	Bénéfice
AdonisJS	Framework Node.js TypeScript-first
Architecture SCREAM	Organisation de code propre et modulaire
Templating Edge	Rendu côté serveur performant
MySQL + Docker Compose	Environnement de développement reproductible
AdminLTE	Interface d'administration professionnelle

La structure modulaire organise le code en domaines distincts :

• app/admin — Contrôleurs administratifs
• app/auth — Authentification et autorisation
• app/course — Modèles et repositories de cours
• app/attachment — Gestion des médias
• app/core — Utilitaires partagés

Phase 3 : Système de Gestion de Contenu

Le cœur de Mission Dahu est son CMS (Content Management System) intuitif :

• Prévisualisation en temps réel pour l'édition de contenu
• Blocs visuels modulaires : hero, image, carrousel, section
• Interface WYSIWYG accessible aux non-développeurs
• Gestion des médias par glisser-déposer

Phase 4 : Composants d'Apprentissage Interactifs

Cette phase a apporté les fonctionnalités pédagogiques essentielles :

Composant	Fonctionnalité Pédagogique
Quiz Carrousel	Identification d'animaux alpins avec empreintes, habitat et altitude
Quiz Vrai/Faux	Questions avec scoring et suivi de progression
Quiz à Choix Multiples	Feedback instantané et apprentissage adaptatif
Chronomètre	Activités chronométrées avec tours
Roue de la Fortune	Sélection aléatoire ludique pour groupes

Tous les composants sont développés comme des Custom Elements JavaScript pour garantir :

• Compatibilité universelle avec tout système de templating
• Amélioration progressive sans dépendance JavaScript
• Performance optimale avec encapsulation native

Phase 5 : Support Multilingue (Français et Allemand)

Pour la Suisse multilingue, le système i18n offre :

• Détection automatique de la langue du navigateur
• Persistance des préférences via session
• Modèles de données traduisibles
• Interface complète en français et allemand

Phase 6 : Déploiement

Le pipeline CI/CD automatise le déploiement :

• Builds Docker multi-étapes optimisés
• GitHub Actions pour l'intégration continue
• Validation automatique avec ESLint et Prettier

Stack Technique Complète

Couche	Technologie	Version
Runtime	Node.js	22 (via Volta)
Package Manager	PNPM	10.x
Framework Backend	AdonisJS	6.x
Templating	Edge	-
Base de Données	MySQL	8.x
Éditeur Visuel	React + Vite	18.x / 6.x
Style	SCSS	-
Conteneurisation	Docker	Multi-stage
CI/CD	GitHub Actions	-

Conclusion

Mission Dahu prouve que la technologie éducative peut être à la fois techniquement sophistiquée et pédagogiquement efficace. En combinant les technologies web modernes avec un design UX réfléchi, la plateforme délivre une éducation environnementale dans un format engageant et accessible.

Que vous soyez un moniteur de ski souhaitant sensibiliser les enfants à l'écologie alpine, ou un développeur cherchant l'inspiration pour votre prochaine plateforme éducative, Mission Dahu démontre ce qui est possible quand la technologie sert un objectif significatif.