(01) Étude de cas · Site institutionnel & CMS
MLI
Un site institutionnel bilingue que l’équipe gère seule, avec un configurateur de programmes assisté par IA.
En ligne
Voir mli.ma
01 Le besoin
Présenter un catalogue de formation riche, en français et en anglais, que l’équipe met à jour sans développeur, et transformer les visites en demandes de brochure.
02 L’approche
Un site Next.js avec Payload CMS intégré : pages composées par blocs, contenus bilingues, SEO technique, et les contraintes de l’hébergement prises en compte dès la conception.
03 Ce qui a été livré
Un site en ligne sur mli.ma, un back-office en français avec aperçu en direct, un catalogue 2026 filtrable et un Program Builder qui recommande des programmes grâce à l’IA.
Contexte
Le Moroccan Leadership Institute, basé à Casablanca, forme des dirigeants, des managers et de jeunes talents : ateliers de leadership répartis en trois parcours, programmes par public, parcours de six mois, teambuilding et événements.
L’institut s’adresse à des organisations privées et publiques. Son site doit inspirer confiance, rendre lisible une offre dense et générer des demandes qualifiées.
Le défi
Le catalogue est important et évolue souvent : ateliers, programmes, événements, articles, revue de presse. L’équipe devait pouvoir tout modifier elle-même, en français et en anglais.
Contrainte technique forte : un hébergement Hostinger en « Node.js Web App », sans accès SSH, avec un dossier d’application remplacé à chaque déploiement et des ressources limitées au moment du build.
Ma contribution
- Développement complet du site, seul, à partir du modèle de démarrage officiel de Payload CMS : Next.js 16 (App Router) avec le CMS intégré au même projet.
- Modélisation de tout le contenu : formations, programmes, catalogue 2026, événements, blog, presse, équipe, témoignages, partenaires et demandes.
- Pages composées par blocs, brouillons, historique des versions et aperçu en direct (mobile, tablette, ordinateur) dans un back-office en français.
- Version anglaise sous /en, avec repli automatique sur le français pour les contenus pas encore traduits.
- Program Builder : composition d’un parcours et assistant IA (LLM via l’API Groq) qui présélectionne et recommande des formations du catalogue, avec notification e-mail à l’équipe.
- SEO technique, formulaires enregistrés dans le CMS, déploiement sur Hostinger et documentation d’exploitation remise au client.
Solutions techniques
- 01
Des données qui survivent aux déploiements
Hostinger remplace le dossier de l’application à chaque mise en ligne. Au démarrage, l’application détecte son environnement et place la base SQLite, les médias et la clé secrète dans un dossier persistant, hors du code.
- 02
Des migrations sans accès SSH
Le script de build applique les migrations Payload puis charge le contenu initial si nécessaire, et s’arrête proprement en cas d’échec. Le schéma n’est jamais modifié automatiquement.
- 03
Un build fiable sur un serveur limité
Le build Turbopack échouait sur l’hébergement : il passe par webpack, plus lent mais stable.
- 04
Publier sans reconstruire
Pages pré-rendues avec revalidation périodique, et purge ciblée du cache à chaque modification dans le back-office.
- 05
Une IA qui ne bloque jamais le site
Le Program Builder s’active par variable d’environnement. Si l’API ne répond pas, l’assistant affiche un état « indisponible » au lieu de planter, et les formations proposées par le modèle sont recoupées avec le catalogue.
- 06
Une police conforme à sa licence
La police fournie n’était autorisée qu’en usage personnel : elle a été remplacée par une alternative libre d’usage commercial, auto-hébergée.
Fonctionnalités clés
- Site bilingue français / anglais
- Pages composées par blocs
- Aperçu en direct, brouillons et versions
- Catalogue 2026 filtrable par catégorie
- Program Builder avec assistant IA
- Demandes de brochure suivies dans le CMS
- SEO : balises, hreflang, sitemap, données structurées
- Bandeau cookies et pages légales (loi 09-08)
- Bouton « Demander la brochure » fixe sur mobile
- Archivage automatique des événements passés
Technologies
Accueil
Catalogue des formations
