Construire 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 administratifsapp/auth— Authentification et autorisationapp/course— Modèles et repositories de coursapp/attachment— Gestion des médiasapp/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.