Clubs en Action est une initiative collaborative portée par les bénévoles élus du comité directeur de la FFCAM dans le cadre du programme "Engagement Club Alpin". Cette plateforme facilite le partage d'expériences et de bonnes pratiques entre clubs et comités via des webinaires participatifs trimestriels.
- 🤝 Créer un réseau d'entraide direct entre clubs et comités
- 💡 Partager des solutions concrètes issues du terrain
- 🔧 Mutualiser les outils et méthodes qui fonctionnent
- 🌱 Renforcer la communauté FFCAM par l'échange
- Framework : Next.js 15.3 avec App Router
- Langage : TypeScript
- Styles : Tailwind CSS avec design system FFCAM
- Composants : React 19 avec composants serveur
- Runtime : Edge Runtime (Cloudflare Workers)
- Hébergement : Cloudflare Pages
- Email : Resend pour les notifications
- CDN : Cloudflare avec cache automatique
- Package Manager : pnpm
- Tests : Jest + React Testing Library
- CI/CD : GitHub Actions
- Linting : ESLint + Next.js config
- Node.js : v18.17+ ou v20.3+ (LTS recommandé)
- pnpm : v9.x ou v10.x
- Git : Pour cloner le repository
# Cloner le dépôt
git clone https://github.com/ffcam/clubs-en-action.git
cd clubs-en-action
# Installer les dépendances
pnpm install
# Configurer les variables d'environnement
cp .env.example .env.local
# Éditer .env.local avec vos valeurs (voir section Variables d'environnement)# Démarrer le serveur de développement avec Turbopack (recommandé)
pnpm dev
# Ou avec Webpack si nécessaire
pnpm dev:webpack
# Le site sera disponible sur http://localhost:3000# Lancer les tests
pnpm test
# Lancer les tests en mode watch
pnpm test:watch
# Vérifier le linting
pnpm lint
# Build de production
pnpm build
# Preview de la build Cloudflare Pages en local
pnpm previewclubs-en-action/
├── public/ # Assets statiques (images, fonts, etc.)
│ └── images/ # Images du site
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── api/ # Routes API (Edge Runtime)
│ │ │ ├── contact/ # Endpoint formulaire de contact
│ │ │ └── csrf/ # Génération token CSRF
│ │ ├── globals.css # Styles globaux
│ │ ├── layout.tsx # Layout principal
│ │ └── page.tsx # Page d'accueil
│ ├── components/ # Composants React
│ │ ├── forms/ # Composants de formulaire
│ │ ├── home/ # Sections de la page d'accueil
│ │ ├── layout/ # Header, Footer, etc.
│ │ └── ui/ # Composants UI réutilisables
│ └── utils/ # Fonctions utilitaires
│ ├── csrf/ # Protection CSRF
│ └── email.ts # Envoi d'emails
├── __tests__/ # Tests unitaires
├── .github/workflows/ # CI/CD GitHub Actions
├── CLAUDE.md # Instructions pour l'assistant IA
└── next.config.ts # Configuration Next.js
Traite les soumissions du formulaire de contact avec protection CSRF.
Body (JSON):
{
"name": "string",
"clubName": "string",
"email": "string",
"theme": "string",
"message": "string",
"csrfToken": "string"
}Headers requis:
Content-Type: application/json- Cookie
csrf-token(généré automatiquement)
Génère un token CSRF pour la protection des formulaires.
Response:
{
"token": "string"
}Note : Le système actuel utilise l'email pour les notifications. Une évolution vers une base de données est prévue pour une meilleure gestion des données.
| Variable | Description | Exemple |
|---|---|---|
RESEND_API_KEY |
Clé API pour l'envoi d'emails via Resend | re_123abc... |
CONTACT_EMAIL |
Email destinataire des formulaires | contact@example.com |
- Créer un compte sur Resend
- Générer une clé API
- Copier
.env.examplevers.env.local - Remplir les valeurs dans
.env.local
# .env.local
RESEND_API_KEY=re_votre_cle_api
CONTACT_EMAIL=votre@email.com# Lancer tous les tests
pnpm test
# Tests en mode watch pour le développement
pnpm test:watch
# Tests avec coverage
pnpm test -- --coverage
# Tester un fichier spécifique
pnpm test -- __tests__/contact-form.test.tsx- Tests unitaires des composants dans
__tests__/ - Utilisation de React Testing Library
- Mocks pour les appels API et modules externes
Le projet utilise GitHub Actions pour le déploiement automatique :
- Pull Requests : Tests automatiques à chaque PR
- Branch
main: Déploiement automatique sur Cloudflare Pages
# Build pour Cloudflare Pages
pnpm pages:build
# Preview en local avec Wrangler
pnpm preview
# Déployer manuellement
pnpm deploy- Connecter le repository GitHub
- Configuration de build :
- Build command :
pnpm pages:build - Build output :
.vercel/output/static - Root directory :
/
- Build command :
- Variables d'environnement à configurer dans Cloudflare
Le site est accessible sur :
- Production :
clubs-en-action.ffcam.fr(à configurer) - Preview :
*.clubs-en-action.pages.dev
- Fork le repository
- Créer une branche descriptive :
git checkout -b feature/nom-de-la-fonctionnalite # ou git checkout -b fix/description-du-bug - Développer votre fonctionnalité avec des tests
- Vérifier le code :
pnpm test pnpm lint - Commiter avec un message clair :
git commit -m "feat: ajouter la fonctionnalité X"< 8000 /span> # Suivre la convention : feat|fix|docs|style|refactor|test|chore - Push et créer une Pull Request
- ✅ Écrire des tests pour les nouvelles fonctionnalités
- ✅ Maintenir la couverture de tests
- ✅ Suivre les conventions de code existantes
- ✅ Documenter les changements significatifs
- ✅ Mettre à jour le README si nécessaire
- Ajouter plus de webinaires programmés
- Améliorer l'accessibilité (WCAG 2.1 AA)
- Optimiser les performances (Core Web Vitals)
- Ajouter des animations subtiles
- Système de gestion des inscriptions aux webinaires
- Interface d'administration pour gérer le contenu
- Notifications par email pour les rappels
- Intégration calendrier (Google Calendar, Outlook)
- Base de données pour stocker les soumissions
- Espace membre avec historique des webinaires
- Plateforme de partage de ressources entre clubs
- Forum de discussion intégré
Pour signaler un bug ou suggérer une amélioration :
- Vérifier les issues existantes
- Créer une nouvelle issue avec un titre descriptif
- Utiliser les templates fournis
- Questions techniques : n.ritouet@ffcam.fr
- Questions sur l'initiative : Via le formulaire de contact du site
- Urgences : Créer une issue sur GitHub
Ce projet est sous licence MIT. Voir le fichier LICENSE pour plus de détails.