MontoMaster
Plateforme pédagogique cross-plateforme.
À PROPOS DU PROJET
Inspirée de Seira, plateforme éducative interactive. Web en Angular, mobile en Expo/React Native, backend Laravel pour API et auth. Démonstration de la capacité à orchestrer plusieurs écosystèmes sur un même produit.
Un monorepo, trois applications
Le dépôt regroupe une API Laravel 12 avec API Platform et Sanctum, un front web Angular 21 et une application mobile Expo. Les deux clients consomment la même API. En développement, Docker Compose fait tourner nginx, php-fpm, MariaDB et Redis.
Le domaine métier
Une école contient des classes et des utilisateurs aux rôles administrateur, formateur ou élève. Une matière a un formateur principal et peut être partagée entre plusieurs classes. Un chapitre regroupe des vidéos, dont la progression de chaque élève est suivie : statut, secondes validées, pourcentage. Les entités principales utilisent la suppression logique.
Espaces et usages
Le front Angular propose des espaces administrateur, formateur et élève : gestion des écoles, classes, étudiants, matières et articles, lecture de vidéos avec suivi de progression et lecteur PDF intégré. Le front est déployé sur Vercel, l'application mobile cible Android, iOS et le web avec un routage par fichiers.
L'équipe
- Nicolas Rouillé (LinkedIn) (nouvel onglet)Dev backend
- Baptiste Dechamp (LinkedIn) (nouvel onglet)Dev frontend, app Angular et Expo React
Problématique
Proposer une expérience éducative cohérente web + mobile avec un back solide.
Solution
Stack multi-plateforme : Angular (web), Expo/RN (mobile), Laravel (API et auth).
Résultat
Architecture validée, API opérationnelle - développement stoppé.
Ce que j'ai appris
Construire une API REST Laravel 12 avec API Platform et authentification Sanctum.
Consommer la même API depuis un front Angular et une app mobile Expo / React Native.
Tester chaque couche : PHPUnit côté API, Jest et Testing Library côté mobile.
Modéliser un domaine scolaire avec rôles, partage de matières entre classes et suivi de progression.
Garder un schéma de base de données comme source de vérité des migrations.
Galerie
Description
Démonstration de l'app mobile, sans son. Connexion avec un compte élève, lecture du cours « Structurer une page en HTML5 » avec synthèse vocale, vidéo YouTube intégrée, sommaire des chapitres (Flexbox, Grid, responsive), fiche du parcours « Intégration HTML & CSS » avec progression et durée, tableau de bord élève puis réglages du compte et du thème clair ou sombre.
Description
Démonstration de l'app web Angular, sans son. Tableau de bord administrateur, lecture de cours (vidéo « Les variables » en JavaScript, exercice sur les modules), création d'un utilisateur dans une fenêtre modale, déconnexion puis connexion et catalogue des parcours « Votre trajectoire d'apprentissage ».