Refonte complète de la plateforme du club pour offrir des performances optimales, un design moderne et une gestion de contenu simplifiée.

CEB60

Lead Developer Fullstack & UI/UX Designer

1 semaine

Le Contexte

Comprendre le défi

Le site précédent souffrait d'une esthétique vieillissante, d'une arborescence complexe diluant l'information, et d'une absence totale d'optimisation mobile.

Le Client

Le Club d'Escalade du Beauvaisis (CEB 60) est une association sportive majeure nécessitant une plateforme en ligne pour présenter ses activités et faciliter les inscriptions.

Objectifs

Épurer l'architecture de l'information, garantir des performances de premier ordre sur mobile, et offrir un design moderne et immersif.

Problème

Le site précédent souffrait d'une esthétique vieillissante, d'une arborescence complexe diluant l'information, et d'une absence totale d'optimisation mobile.

Contraintes

Aucune contrainte technique majeure, l'objectif principal était la qualité de l'expérience utilisateur et l'autonomie des bénévoles via le CMS.

L'approche

Notre Solution

Création d'une plateforme hybride utilisant Astro pour le rendu statique et React pour les modules dynamiques (Planning, Formulaires), propulsée par Sanity.io pour la gestion de contenu.

Capacités Déployées

Framework & Core

AstroReactTailwind CSS v4

Content Management

Sanity.ioHeadless CMS

Motion

Framer MotionLenis (Smooth Scroll)

Logic & Validation

ZodReact Hook Form

Découvrez les modules spécifiques

Poursuivez la lecture ci-dessous pour l'exploration détaillée des fonctionnalités asymétriques et de l'architecture spécifique au projet.

Le saviez-vous ?

"98% du parcours utilisateur s'effectue sans charger un seul kilooctet de JavaScript grâce aux Astro Islands."

Interactive Island

Planning Dynamique

Débutant

Mar, Jeu

18:30 - 20:30

Expert

Lun, Mer, Ven

20:30 - 22:30

100

Lighthouse Score

Performance Absolue

Score parfait sur les 4 métriques Lighthouse grâce à une purge rigoureuse des scripts tiers.

Évènement

Open Ile-de-France 2026

Le Mag

Voir tous les articles >

Inside the Engine

Astro Islands & Partial Hydration

Stratégie '0 KB JS' via Astro (MPA) pour écraser les métriques LCP et INP. Seuls les îlots hautement interactifs (comme le CourseScheduler) sont hydratés tardivement via client:visible, évitant ainsi le blocage du Main Thread au chargement.

SERVER (Astro SSG)

CLIENT (React Island)

Source Module

// Island Architecture with Astro
---
import CourseScheduler from '../components/CourseScheduler';
---
<!-- Static HTML served from Edge CDN -->
<HeroSection />

<!-- React Island hydrated only when scrolling into view -->
<CourseScheduler client:visible />

Inside the Engine

Mega Menu & DOM Acceleration

L'orchestration du Mega Menu asymétrique by-passe les repaints du DOM. L'usage exclusif des propriétés transform et opacity accélérées au GPU (via Framer Motion) garantit 60 FPS constants sans provoquer de Layout Shifts (CLS).

Source Module

// Hardware-Accelerated Transforms
<AnimatePresence>
  {isOpen && (
    <motion.div
      initial={{ opacity: 0, scale: 0.95, y: -10 }}
      animate={{ opacity: 1, scale: 1, y: 0 }}
      exit={{ opacity: 0, scale: 0.95, y: -10 }}
      style={{ willChange: "transform, opacity" }}
    >
      <MegaMenu />
    </motion.div>
  )}
</AnimatePresence>

Bilan

Impact & Résultats

Lighthouse

100/100

Vitesse

x4 Rapide

Engagement

+40%

"
Le nouveau site est exactement ce dont nous avions besoin : clair, rapide, et magnifique sur téléphone. Nos adhérents trouvent les informations en quelques secondes.
C
Comité Directeur
CEB 60

Galerie