(03) Étude de cas · Plateforme de formation
Artimezia
Une plateforme bilingue anglais / arabe pour une école d’art : catalogue de formations, demandes d’inscription et back-office où l’équipe gère tous les contenus.
En ligne
Voir artimezia.com
01 Le besoin
Présenter les formations et les événements d’une école d’art en anglais et en arabe, et recueillir des demandes d’inscription que l’équipe finalise par contact direct.
02 L’approche
Next.js et Payload CMS dans un même projet : contenus bilingues avec mise en page de droite à gauche pour l’arabe, panier conservé dans le navigateur, demandes enregistrées côté serveur.
03 Ce qui a été livré
Un site en ligne sur artimezia.com et un back-office où l’équipe gère formations, événements, promotions et demandes.
Contexte
Artimezia est une école d’art basée à Casablanca. Elle propose des formations en dessin, peinture, anatomie ou character design, mais aussi des formations business pour artistes, en ligne, en présentiel ou en cours particulier.
L’école organise aussi des ateliers et des événements, et s’adresse à un public anglophone et arabophone.
Le défi
Le catalogue mélange plusieurs formats et niveaux de prix : il devait rester simple à explorer, avec des filtres et un tri clairs.
L’école ne voulait pas de paiement en ligne : l’inscription se finalise par contact direct. Il fallait donc un parcours de demande fiable, et un outil pour suivre chaque demande.
Enfin, l’équipe devait gérer elle-même tous les contenus, dans les deux langues.
Ma contribution
- Rédaction du cahier des charges initial, puis conception et développement du site, sans autre développeur.
- Modèle de contenu Payload CMS : formations, catégories, événements, articles, formateurs, témoignages, pages légales, demandes d’inscription et newsletter.
- Site bilingue anglais / arabe avec mise en page de droite à gauche, contenus traduits champ par champ dans le CMS.
- Catalogue filtrable et triable, panier par formation et par format, demandes d’inscription enregistrées côté serveur avec un numéro de demande.
- Notification e-mail à l’équipe pour chaque demande, promotions temporaires pilotées depuis le back-office, bouton WhatsApp dont le message s’adapte à la page.
- SEO technique et chaîne de déploiement GitHub Actions vers Hostinger.
Solutions techniques
- 01
Construire en dehors de l’hébergeur
La machine de build de l’hébergement manquait de mémoire. Le build complet se fait donc sur GitHub Actions, puis le projet déjà compilé est publié sur une branche de déploiement que Hostinger récupère.
- 02
Des médias qui survivent aux déploiements
L’hébergeur ne conserve pas les fichiers locaux d’un déploiement à l’autre : en production, les images sont stockées sur un service de stockage objet compatible S3.
- 03
Une demande jamais perdue
La demande est d’abord enregistrée en base, puis l’e-mail de notification part. Si l’envoi échoue, l’erreur est journalisée sans faire échouer la demande, ce qui évite les doublons.
- 04
Des demandes créées uniquement côté serveur
L’API publique du CMS ne permet pas de créer une demande : seule une action serveur le fait, en enregistrant les titres et les prix du panier au moment de la demande.
- 05
Rapide et toujours à jour
Les lectures du CMS sont mises en cache, et le cache est purgé à chaque modification dans le back-office.
Fonctionnalités clés
- Site bilingue anglais / arabe (RTL)
- Catalogue filtrable : format, catégorie, thème, note, prix
- Tri par popularité, note ou prix
- Panier par formation et par format
- Demandes d’inscription avec numéro de demande
- Notification e-mail à l’équipe
- Promotions avec compte à rebours
- Événements et ateliers
- Journal (blog) et inscription à la newsletter
- Bouton WhatsApp contextuel
- SEO : hreflang, sitemap, données structurées
- Back-office avec aperçu en direct
Technologies
Accueil
Fiche formation
Version arabe
