Stras'N Swing : refonte d'un site associatif.

Le client

Stras'N Swing est une association de danse inscrite au droit local d'Alsace-Moselle, créée en février 2025. Elle fédère à Strasbourg la communauté Rock et West Coast Swing autour d'une pratique hebdomadaire, le dimanche de 15 h à 17 h, et d'ateliers techniques ponctuels.

Sa particularité : la vie de l'association ne se joue pas sur son site. Elle se joue sur WhatsApp (plus de 300 membres), où circulent les dates, les lieux et les changements de dernière minute. Le site n'avait donc pas à devenir un outil de gestion : il devait être une porte d'entrée crédible qui convertit un curieux en membre du groupe.

Le point de départ

Le site tournait sous WordPress. Le contenu était là, mais la vitrine ne racontait plus ce qu'était devenue l'association : maintenance de plugins à suivre, mises à jour à surveiller, et une charte graphique en décalage avec l'identité or et rubis du logo.

Nous avons repris le projet à zéro. Une première version a été amorcée en .NET Blazor en janvier 2026, puis abandonnée en avril : pour un site public de quelques sections, un rendu statique React tenait la promesse de performance et de SEO avec beaucoup moins de machinerie. Le projet a été réécrit en Next.js 16 avec une refonte UX complète.

Le site aujourd'hui

Une page unique qui déroule le parcours d'un visiteur, de la découverte à l'adhésion, plus les pages légales. Le tout dans une charte tirée du logo : or (#e8c85c) et rubis (#9b1b30) sur fond noir, titres en Montserrat, corps en Open Sans.

La stack technique

Next.js 16 et React 19

App Router, composants serveur par défaut, build standalone. Les sections animées sont les seules à basculer côté client. Le résultat est un site rendu côté serveur, rapide au premier affichage et lisible par les moteurs de recherche.

Tailwind CSS v4 et Motion

Le thème est déclaré une fois (palette, typographies, animations) et réutilisé partout, ce qui évite la dérive graphique. Les apparitions au défilement et les compteurs animés sont gérés par Motion, sans bibliothèque d'effets supplémentaire.

Typographies auto-hébergées

Montserrat et Open Sans sont téléchargées à la compilation et servies depuis le domaine. Aucune requête vers Google Fonts à l'exécution : un point de conformité RGPD réglé à la source, et une police de moins à charger depuis un tiers.

Formulaire de contact

Le message part par une route API Next.js vers Postmark, avec un e-mail HTML aux couleurs de l'association et une adresse de réponse pointant directement sur l'expéditeur : le bureau répond sans copier-coller d'adresse.

Anti-spam : trois barrages, zéro friction

Un formulaire public non protégé se fait moissonner en quelques semaines. Plutôt qu'un captcha qui fait fuir les visiteurs, trois protections se cumulent :

• Cloudflare Turnstile : validation systématiquement revérifiée côté serveur. Dans la quasi-totalité des cas, le visiteur n'a rien à cliquer.
• Champ piège (honeypot) : invisible pour un humain, rempli par les robots. Le message est accepté en apparence puis jeté, ce qui évite de renseigner l'attaquant.
• Limitation de débit : cinq messages par heure et par adresse IP, en plus d'une validation stricte de chaque champ côté serveur.

Mesure d'audience sans cookie

L'audience est mesurée avec Matomo Tag Manager sur notre propre instance, en configuration sans cookie. Concrètement : pas de bandeau de consentement à afficher, aucune donnée envoyée à une régie publicitaire, et des statistiques qui restent la propriété de l'association.

Le traceur n'est injecté qu'en production : la préproduction ne pollue pas les chiffres.

Industrialisation : Docker et CI/CD

Le site est empaqueté dans une image Docker construite en plusieurs étapes, exécutée par un utilisateur non privilégié et dotée d'une sonde de santé : si le conteneur cesse de répondre, il est redémarré sans intervention.

La chaîne de livraison tourne sur Forgejo Actions, notre forge auto-hébergée :

• Deux environnements : la branche develop déploie en préproduction, main en production. Le client valide avant mise en ligne.
• Chaque image est étiquetée par son commit : on sait exactement quel code tourne, et un retour arrière est immédiat.
• Déploiement sans accès direct au serveur : la pipeline passe par un bastion qui déclenche la mise à jour ; aucune clé d'administration ne circule dans la CI.
• Secrets centralisés : clés SMTP et Turnstile gérées hors du dépôt, jamais écrites dans le code.

Hébergement en France

Le site est hébergé par Sanfytech sur une infrastructure située en France, à Roubaix, chez SoYouStart (groupe OVH). Le routage est assuré par Traefik, qui redirige le domaine nu vers www et gère le certificat TLS.

• Données hébergées en France : aucun transfert hors Union européenne dans la chaîne de diffusion.
• HTTPS de bout en bout : certificat renouvelé automatiquement.
• Redémarrage automatique : sonde de santé sur le conteneur et politique de relance permanente.
• Pas de dépendance à un éditeur : le code appartient à l'association, l'image est reconstructible à l'identique.

Ce que nous avons retiré

Un projet honnête, c'est aussi ce qu'on décide de ne pas garder. Deux fonctionnalités ont été construites ou envisagées puis sorties du périmètre :

• Un bot Discord de gestion d'événements : développé en .NET 10, il créait les salons, tenait les listes d'inscription et lisait les messages avec un modèle de langage pour repérer les inscriptions. Fonctionnel, mais surdimensionné : l'association s'organise sur WhatsApp. Il a été retiré en juin 2026, avec le back-end et sa base de données. Moins de code à maintenir, moins de données personnelles à héberger.
• Une page « Ateliers » : les inscriptions et les tarifs vivent déjà sur HelloAsso, tenus à jour par le bureau. La page a été supprimée et son adresse redirigée de façon permanente, pour ne pas maintenir deux sources d'information contradictoires.

Le déroulé

• Janvier 2026 : démarrage du projet, première piste en .NET Blazor
• Avril 2026 : bascule en Next.js 16 et refonte UX complète
• Mai 2026 : pages légales, e-mails transactionnels, mesure d'audience sans cookie
• Juin 2026 : retrait du bot et du back-end, passage de la CI/CD sur notre forge
• Juillet 2026 : 26 demandes de modification du bureau traitées en deux itérations, ajout de la section presse

Résultat

• Un site à maintenance quasi nulle : plus de plugins à mettre à jour, plus de back-office exposé.
• Une vitrine alignée sur la réalité : chiffres réels de l'association, article de presse, canaux d'adhésion accessibles en un scan.
• Conforme sans bandeau : ni cookie de mesure, ni police tierce, ni traceur publicitaire.
• Un client autonome sur le fond : les informations qui bougent souvent (dates, tarifs, événements) vivent sur WhatsApp et HelloAsso, que le bureau gère seul.

Conclusion

Une association n'a pas besoin d'un site qui fait tout. Elle a besoin d'un site qui tient tout seul et qui envoie les visiteurs là où la communauté vit déjà. Stras'N Swing illustre cette approche : un site statique, rapide, conforme, industrialisé de bout en bout, et un périmètre volontairement resserré, quitte à retirer du code qui fonctionnait déjà.

C'est la même méthode que nous appliquons aux projets plus lourds : identifier ce qui doit réellement être développé, et ne pas construire le reste.