Association CapHumain
Un site institutionnel et un back-office de contenu complet pour une ONG de jeunesse malienne, pour que l'équipe publie elle-même ses actualités, projets et chiffres d'impact sans développeur.
Développeur full-stack et designer (solo)
L'Association CapHumain (ACH) est une ONG malienne portée par de jeunes bénévoles, active depuis 2017 autour de l'éducation, de la solidarité sociale, de la citoyenneté, du leadership et de l'environnement. Après huit ans d'actions de terrain visibles seulement via une page Facebook, l'association avait besoin d'une vraie présence en ligne qu'elle puisse tenir à jour elle-même. Le projet est un site public one-page adossé à un espace d'administration complet : chaque texte, chiffre, photo, actualité et rapport d'activité est modifiable par l'équipe ACH. Il embarque aussi un tableau de bord de fréquentation respectueux de la vie privée, développé en interne, sans service de suivi tiers. Le site est en production sur caphumain.org et maintenu au quotidien par une membre de l'association formée au back-office.
Le problème
Huit ans d'activités, plus de 2 000 personnes touchées, seize projets de terrain : tout cela n'existait que dans des rapports internes et sur une page Facebook. Les partenaires et les institutions n'avaient aucune page sérieuse à consulter, et l'association dépendait d'une aide extérieure pour la moindre modification de sa communication. Rien ne permettait à l'équipe de montrer son bilan ni de le tenir à jour sans contact technique.
L’approche
J'ai transformé le rapport d'activité 2017-2025 de l'association en un modèle de contenu clair (axes stratégiques, projets, actualités, chiffres d'impact, équipe) et construit le site comme une application Laravel rendue côté serveur, sans framework JavaScript. Chaque bloc de la page publique est relié à un espace d'administration pour que l'équipe modifie le contenu directement, et une membre a été formée pour le gérer. L'association n'ayant pas de serveur, le site tourne sur l'hébergement mutualisé que je leur prête pour l'instant, ce qui a orienté toute la stack vers quelque chose de volontairement léger.
Le résultat
- L'ACH dispose d'un site public qu'elle maîtrise entièrement : l'équipe publie actualités, projets et rapports sans intervention d'un développeur.
- Le bilan de huit ans (16 projets, chiffres d'impact, cinq axes d'intervention) est désormais présenté au même endroit, utilisable face aux partenaires et aux institutions.
- Les statistiques de fréquentation sont accessibles à l'association directement dans le back-office, sans Google Analytics ni service externe.
- En production sur caphumain.org, maintenu au quotidien par une membre formée de l'association.
Fonctionnalités clés
- Édition complète du contenu : chaque texte, chiffre et image de la page publique est modifiable depuis l'espace d'administration.
- Gestion des actualités et des projets avec galeries de photos et rapports d'activité PDF téléchargeables.
- Formulaires de contact et « s'impliquer » qui arrivent dans une boîte de réception intégrée au back-office, avec brouillons de réponse.
- Tableau de bord de fréquentation respectueux de la vie privée : visites, visiteurs uniques, tendances, pages les plus vues, sources de trafic et type d'appareil, sans traceur tiers.
- Comptage anonyme des visites : les adresses IP sont hachées, les robots sont filtrés, les données de plus d'un an sont supprimées automatiquement.
- Logo animé au chargement, avec repli statique pour les visiteurs en mode animations réduites ; l'association peut remplacer le logo elle-même.
- Plusieurs comptes administrateurs avec garde-fous : aucun compte ne peut se supprimer lui-même ni supprimer le dernier compte restant.
- Pages mentions légales et politique de confidentialité, plus les bases du référencement (sitemap, contenu meta éditable).
Ingénierie — Architecture, décisions et compromis
Architecture
L'application est un unique code Laravel 13 qui rend des gabarits Blade côté serveur, sans SPA ni couche API. Le site public est une page unique assemblée à partir d'un modèle de contenu (axes stratégiques, chiffres d'impact, projets, actualités, équipe, ressources, partenaires) et d'une table de paramètres clé/valeur. Une seule classe, SiteContent, fait référence pour chaque bloc de texte et d'image éditable et sa valeur par défaut : ajouter un bloc éditable tient en une déclaration plutôt qu'en une modification éparpillée dans les vues. Le back-office est un contrôleur CRUD par ressource sur un patron commun, derrière une authentification de session sous le préfixe /admin. Les statistiques de fréquentation sont calculées à partir d'une table visits alimentée par un middleware qui ne s'exécute qu'au chargement des pages publiques ; un contrôleur de stats l'agrège pour le tableau de bord. Les téléversements de fichiers (images, rapports PDF, logo personnalisé) passent par un trait partagé qui centralise les règles de validation et de stockage. Les assets front sont compilés avec Vite et Tailwind CSS v4. Les tests tournent sur SQLite en mémoire alors que la production utilise MySQL, et GitHub Actions exécute toute la suite PHPUnit à chaque push. Le déploiement vise l'hébergement mutualisé : SSH plus git pull, document root pointé sur public/, et un cron quotidien pour la rétention des données.
Défis d’ingénierie
- Hébergement mutualisé uniquement : pas de runtime Node, pas de workers de file d'attente, pas de VPS. La stack devait rester en Blade avec des assets pré-compilés, et les tâches de fond (rétention des visites) tournent en simple cron quotidien via le planificateur Laravel.
- Rendre toute la page publique éditable sans une prolifération de paramètres ingérable. Résolu avec
SiteContentcomme registre déclaratif unique : chaque bloc déclare clé, libellé, type et valeur par défaut, et les valeurs admin n'écrasent le défaut que si elles ne sont pas vides. - Construire des statistiques utiles sans service tiers et sans données personnelles stockées. Les visites sont enregistrées avec un hachage SHA-256 salé de l'IP, les robots sont filtrés par user-agent, la durée de consultation est envoyée au déchargement de la page via
sendBeacon, et les lignes de plus d'un an sont purgées automatiquement. - Risque de XSS stocké sur les téléversements d'images : un fichier SVG peut embarquer du script. Chaque champ d'upload partage un trait qui restreint les types aux formats matriciels (jpeg / png / webp), et les tests vérifient le rejet des SVG.
Décisions techniques
- Blade rendu côté serveur plutôt qu'une SPA JavaScript, parce que l'équipe cliente maintient le site sur un hébergement mutualisé sans étape de build en production, et qu'un simple déploiement Laravel est plus facile à transmettre.
- Compteur de visites maison plutôt que Google Analytics ou Plausible, pour le coût et la simplicité de déploiement : pas de compte externe, pas de script à intégrer, et les statistiques vivent dans la même base et le même admin que le reste du site.
- MySQL plutôt que le SQLite initial, parce que l'hébergement de production fournit un MySQL géré, ce qui évite les problèmes de permissions de fichiers et de verrouillage sur mutualisé.
- Modéliser le contenu en base et construire un éditeur complet plutôt que coder en dur le rapport 2017-2025 dans les gabarits, parce que l'association devait continuer à publier seule après la passation.
Stack
- Laravel 13
- PHP 8.3
- Blade
- Tailwind CSS v4
- Vite
- MySQL
- PHPUnit
- GitHub Actions
- Hébergement mutualisé (Apache)
Développeur full-stack et designer (solo) — Association CapHumain (ACH), ONG de jeunesse malienne (pro bono) (2026)