Citabic
Un site web entièrement sur mesure avec CMS pour une entreprise BTP de Tanger - un panneau d'administration Livewire, un éditeur de contenu par blocs, une gestion bilingue, un blog avec des outils SEO complets et une couche de livraison de contenu en cache.
Aperçu
Un CMS sur mesure, pas juste un site web
Citabic est une entreprise BTP de Tanger (génie civil, bâtiment, immobilier) qui avait besoin de plus qu'un site statique - ils voulaient pouvoir gérer leur contenu de manière autonome, publier des articles de blog, mettre à jour leurs références de projets et contrôler chaque texte en français et en anglais sans faire appel à un développeur à chaque fois.
Le résultat est une application complète Laravel 12 + Livewire avec un panneau d'administration sur mesure, un système de gestion de contenu bilingue, une plateforme de blog avec des outils SEO complets, un portfolio de références avec des pages de détail, et une couche de livraison de contenu en cache qui maintient le site public rapide.
Objectif
Donner au client un contrôle total - chaque section, chaque texte, chaque image gérable depuis un panneau d'administration sans toucher au code
Offrir une expérience bilingue complète : les administrateurs saisissent le contenu en FR et EN, le contenu est servi par locale automatiquement
Permettre un marketing de contenu professionnel grâce à une plateforme de blog complète avec édition par blocs et un kit SEO complet
Maintenir le site public rapide grâce à une couche de cache par locale avec un TTL de 6 heures - pour amortir les requêtes en base de données sur des milliers de visites
Mon rôle
Conception & développement complet du frontend au CMS
Design & Frontend
Conçu et développé le site public complet en Laravel Blade + Tailwind CSS v4 - héros vidéo, services, carrousel de valeurs, références, blog et contact - tout responsive.
Panneau d'administration Livewire
Développé un panneau CMS d'administration complet avec Livewire v4 - 15+ sections de gestion couvrant chaque contenu éditable du site.
Système de contenu bilingue
Architecturé un modèle de contenu par section/clé/langue (SectionContent) permettant aux administrateurs de gérer les versions FR et EN de chaque bloc de texte indépendamment.
Plateforme de blog & SEO
Développé un blog complet avec un éditeur par blocs (blocs héros, texte, image), des métadonnées SEO complètes (OG, Twitter cards, schema, robots, canonical), catégories, tags, commentaires et temps de lecture.
Cache & Performance
Implémenté un service GuestPageCache avec cache de 6 heures par locale via Laravel Cache - les données de la page sont calculées une fois et servies depuis le cache pour toutes les requêtes suivantes.
Notifications & Formulaires
Développé un formulaire de contact catégorisé avec notification par email à la soumission, et des notifications de commentaires de blog - tous via Laravel Notifications.
Stack technique
Fonctionnalités principales
Une plateforme complète, pas un template
CMS d'administration Livewire
- 15+ sections d'administration, zéro rechargement de page
- CRUD complet pour toutes les entités de contenu
- Tri par glisser-déposer pour les domaines, valeurs et processus
- Upload d'images Dropzone.js sur tous les champs médias
- Boîte de réception des soumissions de contact avec état lu/non lu
- Store de paramètres clé/valeur pour la configuration globale
Contenu bilingue (FR/EN)
- Table SectionContent : modèle section + clé + langue
- Champ JSON de traductions sur toutes les entités principales
- Livraison de contenu sensible au locale via app()->getLocale()
- Les administrateurs gèrent les textes FR et EN indépendamment par section
- Articles de blog et références entièrement traduisibles
- Sélecteur de langue sur le site public
Plateforme blog & SEO
- Éditeur d'articles par blocs (blocs héros, texte, image)
- SEO complet : meta titre/desc, mot-clé focus, OG, Twitter cards
- Balisage schema, URLs canoniques, robots index/follow
- Catégories, tags, temps de lecture, articles mis en avant
- Système de commentaires avec notification email à la soumission
- Workflow de publication : brouillon → publié avec date programmée
Portfolio de références
- Listing paginé des références (9 par page) avec pages de détail
- Par référence : client, surface, budget, résumé, blocs
- Contenu de détail par blocs (même éditeur que le blog)
- Titres et descriptions traduisibles par référence
- Gestion de l'ordre d'affichage dans l'administration
- URLs basées sur des slugs avec routage SEO-friendly
Panneau d'administration
15+ sections de gestion
Chaque contenu du site public est gérable depuis le panneau d'administration - le client peut tout mettre à jour sans développeur.
Captures d'écran
Le CMS en action
Admin Dashboard
Block Editor
Public Site (FR)
Architecture
CMS d'abord, en cache pour la vitesse
Chaque page publique est alimentée par un CitabicContentService qui assemble toutes les données nécessaires - profil, domaines, sections, missions, certifications - et met le résultat en cache par locale pendant 6 heures. Le panneau d'administration est entièrement construit avec Livewire v4, rendant l'UI réactive sans JavaScript personnalisé.
- Modèle SectionContent : section + clé + langue - plat, interrogeable, efficace en cache
- CitabicContentService assemble des payloads de données de page complets et les met en cache par locale
- Le service GuestPageCache gère les clés de cache avec invalidation lors des mises à jour de contenu
- Admin Livewire v4 - UI réactive avec CRUD complet, sans complexité SPA
- Contenu par blocs : les articles et références stockent le contenu structuré en tableaux JSON
- Laravel Notifications pour les alertes email de contact et de commentaires
Points clés
Le CMS est le produit
Pour un site d'entreprise axé sur le contenu, l'expérience d'administration est aussi importante que la façade publique. Un client qui peut mettre à jour son propre contenu est un client qui reste engagé avec son site.
Mettre en cache au niveau de la couche de service, pas de la vue
Mettre en cache les payloads de données de page complets dans CitabicContentService est plus puissant que le cache au niveau de la vue - cela fonctionne quelle que soit la façon dont la vue est rendue.
Le bilinguisme est une décision d'architecture
Ajouter la langue comme champ de premier plan dans chaque modèle de contenu dès le début - plutôt que de le rajouter après coup - rend la gestion bilingue propre et performante.
Les éditeurs par blocs valent l'investissement initial
Un modèle de contenu par blocs en JSON donne au client la flexibilité de construire des articles et des pages de références riches sans avoir besoin d'un développeur pour chaque modification de contenu.
Travaillez avec moi
Besoin d'un site que votre équipe peut vraiment gérer ?
Un bon CMS n'est pas qu'un panneau d'administration - c'est le bon modèle de contenu pour votre activité. Je vous aide à définir ce qui doit être éditable, comment le structurer, et je le construis pour que votre équipe en soit propriétaire.