Site web
IFME
Site public et CMS sur mesure de l'Institut Français des Mondes Eurasiatiques, un institut de recherche installé à Paris. Sept langues, un back-office complet pour les articles, les événements et la newsletter, la gestion des adhérents branchée sur HelloAsso, et l'infrastructure qui va avec, jusqu'au serveur.
- Client
- IFME, Institut Français des Mondes Eurasiatiques (Paris)
- Rôle
- Développement full-stack : CMS sur mesure, gestion des adhérents, infrastructure de production
- Stack
- Next.js 16, React 19, MongoDB, Docker, Nginx
- En ligne
- ifmeurasia.org
Le contexte
L'IFME est un institut de recherche indépendant installé à Paris, porté par une association et des bénévoles. Ses chercheurs publient des analyses sur l'espace eurasiatique, de l'Europe à l'Asie, et l'institut organise des conférences et des rencontres.
Un site vitrine ne suffisait pas. L'équipe voulait publier elle-même des articles longs, avec notes, citations et PDF, dans sept langues, sans passer par un développeur. Elle voulait aussi savoir en un coup d'œil qui est adhérent, qui doit renouveler, et combien l'association a encaissé, sans ressaisir ce que HelloAsso sait déjà.
J'ai donc construit un CMS complet, pensé pour eux : les contenus, les événements, la newsletter, l'équipe, les candidatures, et un espace association relié à HelloAsso qui tient le fichier des membres à jour tout seul. Le site tourne sur un serveur dédié, et j'en assure la maintenance et les mises en production.
Ce qui a été livré
- CMS sur mesure avec rôles et permissions. Depuis un seul back-office, l'équipe gère articles, infographies, événements, bandeau d'accueil, newsletter, équipe, partenaires, offres bénévoles et candidatures, tickets et journal des modifications.
- Liaison HelloAsso : chaque adhésion payée arrive par webhook, est vérifiée via l'API HelloAsso (OAuth2) et crée ou met à jour le membre. Les doublons, les commandes rejouées et les remboursements sont gérés. Une resynchronisation complète reste possible d'un clic.
- Gestion des adhérents : fichier des membres avec recherche tolérante aux fautes, filtres par saison et type d'adhésion, fiche détaillée, export CSV et Excel. Questionnaires d'adhésion rattachés automatiquement au bon membre.
- Cycle de vie automatique : email de bienvenue, relance avant la fin d'adhésion, email de fin avec un lien de retour, et tableau des renouvellements (à relancer, relancés, refusés, expirés). Tableau de bord avec adhérents actifs, nouveaux, à renouveler et montant encaissé.
- Éditeur d'articles visuel et bilingue : import de manuscrits DOCX et ODT, images, mise en forme, aperçu du brouillon, PDF joint. Mots-clés SEO proposés à la publication via l'API DeepSeek.
- Newsletter complète : inscription publique, éditeur de campagne par glisser-déposer, aperçu desktop et mobile, envoi programmé, désinscription en un clic, version web de chaque campagne.
- Site public en sept langues (français, anglais, allemand, russe, albanais, turc, chinois), avec métadonnées, hreflang, sitemap et JSON-LD sur chaque page. Trois rubriques, recherche plein texte avec suggestions, lecture d'article avec notes en marge et PDF généré côté serveur.
- Centre de contrôle réservé aux développeurs : sécurité, sauvegardes, métriques, inventaire des fichiers.
Choix techniques
- Next.js 16 (App Router) et React 19, composants serveur par défaut. Pages publiques en ISR, revalidées dès qu'un contenu change dans le back-office.
- MongoDB avec Mongoose : recherche plein texte native, fichiers stockés en base avec un miroir sur disque, réconciliation chaque nuit.
- Intégration HelloAsso : client OAuth2 avec jeton partagé, webhook idempotent (une commande reçue deux fois donne une seule adhésion, zéro email en double), planificateur interne démarré au boot pour les relances et les fins d'adhésion.
- Authentification maison : sessions JWT (jose), mots de passe bcrypt, ALTCHA sur les formulaires publics, limitation par IP, verrouillage du compte après plusieurs échecs.
- Content Security Policy stricte, en-têtes séparés pour l'admin, secrets comparés en temps constant, HTML nettoyé avant stockage.
- Images servies en WebP avec srcset par l'optimiseur Next.js et sharp. PDF rendus par Puppeteer côté serveur.
- Production sur un VPS Ubuntu : Docker Compose, Nginx en reverse proxy, déploiement automatique chaque nuit avec test de santé et retour arrière si ça échoue.
- Centre de sécurité dans l'admin : collecte des logs Nginx, SSH, fail2ban et UFW, bannissement automatique des scanners synchronisé dans nftables.
- Sauvegardes quotidiennes de la base, bundles hebdomadaires complets chiffrés hors site. Tests node --test sur l'auth, les uploads, la newsletter et les traductions.