Arceaux FC — Projet | Yannis El Hajaoui

Présentation

Qu'est-ce qu'Arceaux FC ?

Arceaux FC est une association loi 1901 basée à Montpellier, regroupant 54 licenciés répartis sur 5 équipes (U11 à Seniors). La gestion du club reposait entièrement sur du papier et des tableurs Excel. J'ai conçu et développé de A à Z une solution numérique complète pour moderniser leur fonctionnement.

Le projet se compose d'une application web Symfony 8 avec 4 espaces distincts selon le profil utilisateur, et d'une application mobile Flutter consommant la même API REST. Chaque espace est pensé pour les besoins spécifiques de ses utilisateurs : administration, entraîneurs, joueurs et le grand public.

Architecture

4 espaces utilisateurs

Une seule application, quatre interfaces — chacune adaptée aux besoins de son profil.

Site public

Vitrine du club accessible sans connexion.

Actualités paginées
Présentation des équipes et entraîneurs
Résultats filtrables par équipe
Partenaires groupés par niveau
Formulaire de contact avec email automatique

Back-office Admin

Tableau de bord complet pour la direction du club.

Dashboard avec indicateurs clés & graphique Chart.js
CRUD joueurs, numéro licence FFF auto, export CSV/PDF
Calendrier FullCalendar avec drag & drop
Gestion des convocations avec envoi batch d'emails
Suivi des cotisations et conformité RGPD

Espace Coach

Interface dédiée aux 5 entraîneurs du club.

Effectif de l'équipe et présences aux entraînements
Suivi des blessures avec journal d'évolution
Notes tactiques et techniques par joueur
Gestion des compositions d'équipe
Convocations aux matchs

Espace Joueur

Interface mobile-first pour les 54 licenciés et leurs parents.

Convocations et présences
Résultats et calendrier
Suivi de la cotisation
Modification du profil avec upload de photo

Aperçu

Dashboard Administration

Le tableau de bord centralise les indicateurs clés du club : joueurs actifs, cotisations, prochains matchs et graphique Chart.js des présences.

Back-office Admin

Aperçu

Espace Coach

L'interface coach permet de gérer l'effectif de son équipe, saisir les présences, suivre les blessures et rédiger des notes tactiques par joueur.

Espace Entraîneur

Aperçu

Espace Joueur

Interface mobile-first dédiée aux 54 licenciés : convocations, résultats, cotisation et gestion du profil. Accessible aussi nativement via l'application Flutter.

Espace Joueur

Application Mobile

L'app Flutter

L'application mobile offre un accès natif Android et iOS à l'espace joueur, connectée à la même API REST que l'application web.

Notifications push

Envoi de notifications Firebase (FCM) lors des convocations aux matchs et entraînements.

Mode hors-ligne

Cache local via Hive pour consulter les convocations et résultats sans connexion internet.

État réactif

Gestion d'état avec Riverpod, routing avec GoRouter, appels API asynchrones avec Dio.

En chiffres

L'ampleur du projet

Un projet de grande envergure construit de A à Z en solo.

19

entités Doctrine

7

rôles utilisateurs

30+

routes controller coach

54

joueurs licenciés

55

matchs en fixtures

770+

convocations générées

7

méthodes d'envoi d'email

RGPD

consentement parental & droit à l'oubli

Stack technique

Technologies utilisées

Une stack moderne full-stack — Symfony 8 côté web, Flutter côté mobile, tout connecté via API Platform.

PHP 8.4 Symfony 8 Doctrine ORM API Platform MySQL 8 Twig Bootstrap 5 · SCSS Stimulus · Turbo Chart.js FullCalendar DataTables JWT LexikJWT Symfony Mailer · Resend Flutter 3 Dart GoRouter Firebase FCM Docker Compose GitHub Actions

Épreuve E6

Documents de l'épreuve E6 BTS SIO

Les deux situations professionnelles présentées lors de l'épreuve E6 sont disponibles en téléchargement.

Situation 1 — Application Web Situation 2 — Application Mobile

Situation 1 / 2 — Application Web

Arceaux FC — Application Symfony

Développement d'une application web complète pour l'Arceaux FC Montpellier, association loi 1901 comptant plus de 300 licenciés répartis en 13 catégories (U6 à Sénior Féminine). L'objectif : remplacer la gestion papier et les tableurs Excel par une solution numérique centralisée.

Contexte client

Club amateur basé à Montpellier (34)
300+ licenciés — 13 catégories (U6 à Sénior Féminine)
Gestion 100% papier et Excel avant le projet
Besoin : numériser convocations, cotisations, résultats

Infrastructure

VPS Linux Ubuntu 24.04 — Nginx reverse proxy
PHP 8.4, Symfony 8, MySQL 8, Docker
Emails : Mailtrap (dev) / Resend 3 000/mois (prod)
19 entités Doctrine — design DM Sans, vert #2E7D32

Démarche projet (6 phases)

1. Analyse des besoins avec le bureau du club
2. Conception architecture & modélisation UML
3. Design, maquettes et expérience utilisateur
4. Développement itératif (Symfony, Bootstrap 5)
5. Tests — 87 cas de test PHPUnit
6. Suivi, maintenance et formation

Fonctionnalités clés

Authentification

4 espaces : Public, Joueur/Parent (ROLE_PLAYER), Entraîneur (ROLE_COACH), Back-office Admin (ROLE_ADMIN + ROLE_TREASURER). Hiérarchie : ROLE_PRESIDENT → ROLE_ADMIN → [ROLE_COACH, ROLE_TREASURER]. Invitations par token unique.

Conformité RGPD

Consentement parental obligatoire pour les mineurs. Droit à l'oubli (suppression ou anonymisation des données). Journal des consentements horodaté.

Convocations

Génération automatique de convocations par match. Envoi batch d'emails avec confirmation de lecture. 770+ convocations générées en fixtures.

FullCalendar

Calendrier interactif avec drag & drop pour reprogrammer les matchs. Vue mensuelle/hebdomadaire. Synchronisation temps réel avec la base de données.

Versioning des données

Historique complet des modifications sur les entités critiques (joueurs, cotisations). Traçabilité des actions admin avec horodatage.

Exports & rapports

Export CSV et PDF de la liste des joueurs. Dashboard avec graphique Chart.js des présences aux entraînements par équipe.

Axes d'amélioration identifiés

Gestion des tournois et compétitions inter-clubs
Statistiques individuelles des joueurs (Chart.js)
Notifications push FCM via Firebase Cloud Messaging
Messagerie interne temps réel (Symfony Mercure / WebSockets)
Module de gestion des blessures et suivi médical

Situation 2 / 2 — Application Mobile

Arceaux FC — Application Flutter

Extension mobile native développée en Flutter/Dart pour Android et iOS. L'application consomme l'API REST Symfony 8 via authentification JWT et Firebase Cloud Messaging pour les notifications push, offrant aux licenciés un accès natif à leur espace depuis leur smartphone.

Contexte mobile

Application Flutter/Dart — Android et iOS
API REST Symfony 8 + JWT (décodage base64url côté client)
2 espaces : Joueur (ROLE_PLAYER/ROLE_PARENT) et Entraîneur (ROLE_COACH)
Firebase Cloud Messaging (FCM) pour les notifications push

Architecture Flutter

Navigation : GoRouter (ShellRoute + GoRoute)
Auth : api_service → login(email, password) → JWT → saveToken()
Décodage JWT base64url → JSON → extraction des rôles (sans appel réseau)
Fonctionnalités communes : messagerie, actualités, événements, blessures

Démarche projet

1. Analyse des besoins utilisateurs (joueurs/entraîneurs)
2. Conception architecture & modélisation UML mobile
3. Design, maquettes et expérience utilisateur mobile
4. Développement itératif par fonctionnalité
5. Tests sur émulateurs Android/iOS
6. Suivi, maintenance et mise à jour

Fonctionnalités mobiles

Notifications push

Firebase Cloud Messaging (FCM) pour les alertes en temps réel : nouvelles convocations, événements du club, messages et mises à jour importantes.

Messagerie interne

Messagerie interne entre licenciés du club. Communication directe entre joueurs, parents et entraîneurs au sein de l'application.

Actualités & Événements

Actualités du club, calendrier des événements et suivi des blessures. Centralisation de l'information sportive pour joueurs et entraîneurs.

Axes d'amélioration identifiés

Gestion des compétitions et tournois inter-clubs
Statistiques sportives avancées (graphiques Flutter natifs)
Notifications FCM complètes (tous les événements du club)
Messagerie temps réel via Symfony Mercure
Module de gestion des blessures enrichi

Documentation technique

Technologies documentées

Les technologies clés utilisées dans ce projet, expliquées dans le contexte d'Arceaux FC.

Symfony 8

Framework PHP — Back-end & MVC

v8.x

Symfony est un framework PHP open-source qui suit le pattern MVC (Modèle-Vue-Contrôleur). Il structure le code en couches séparées, accélère le développement grâce à ses composants réutilisables et impose de bonnes pratiques (injection de dépendances, services, événements).

Doctrine ORM — Mapping objet-relationnel : chaque entité PHP (Player, Match, Team…) correspond à une table MariaDB. Les migrations gèrent l'évolution du schéma sans SQL manuel.

Security Component — Gestion des 7 rôles (ROLE_ADMIN, ROLE_COACH, ROLE_PLAYER…). Le Voter pattern autorise des règles fines (ex : un coach ne peut modifier que son équipe).

Twig — Moteur de templates avec héritage de layouts. Chaque espace (public, admin, coach, joueur) étend son propre base.html.twig.

Symfony Mailer — Envoi d'emails transactionnels via Resend. Templates Twig pour les emails de convocation, de bienvenue et de reset de mot de passe.

API Platform — Génération automatique d'une API REST + OpenAPI à partir des annotations Doctrine. Consommée par l'application Flutter.

Bootstrap 5

Framework CSS — Interface utilisateur

v5.3

Bootstrap est un framework CSS/JS qui fournit un système de grille responsive et des composants UI pré-stylisés (boutons, modals, tableaux, alertes…). Il accélère le développement frontend en évitant d'écrire du CSS répétitif.

Grille 12 colonnes — Mise en page responsive du back-office admin et de l'espace coach avec les breakpoints Bootstrap (sm, md, lg, xl).

Composants — Modals de confirmation (suppression joueur, action RGPD), Toast notifications pour le feedback utilisateur, DataTables intégré avec Bootstrap theme.

SCSS personnalisé — Variables Bootstrap surchargées pour les couleurs du club (bleu Arceaux). Fichier custom.scss importé avant le framework pour une personnalisation propre.

Stimulus + Turbo — Combinés avec Bootstrap pour des interactions dynamiques sans rechargement de page (validation de formulaires, mise à jour partielle des listes).

Docker

Conteneurisation — Environnement reproductible

Compose v2

Docker permet d'empaqueter une application et toutes ses dépendances dans un conteneur isolé, garantissant un comportement identique en développement, en test et en production. Le fichier docker-compose.yml orchestre plusieurs services ensemble.

Services docker-compose — php (PHP 8.4-FPM), nginx (serveur web), mariadb (base de données), mailcatcher (emails en dev).

Dockerfile — Image PHP personnalisée avec extensions requises (pdo_mysql, intl, zip…), Composer installé, configuration OPcache pour la production.

Déploiement Railway — Railway détecte le Dockerfile et construit l'image automatiquement. Variables d'environnement injectées via le dashboard Railway (DATABASE_URL, MAILER_DSN…).

GitHub Actions — Pipeline CI/CD : tests PHPUnit automatiques à chaque push, puis déploiement sur Railway si les tests passent.

RGPD

Règlement Général sur la Protection des Données

CNIL.fr

Le RGPD encadre le traitement des données personnelles dans l'Union Européenne depuis mai 2018. Pour Arceaux FC, gérant des données de mineurs (joueurs U11-U15), la conformité était une exigence non négociable du projet.

Consentement parental — Pour tout joueur mineur, un email est envoyé au parent/tuteur légal avec un lien de consentement tokenisé. L'accès au profil est restreint jusqu'à validation.

Droit à l'oubli — L'admin peut déclencher la suppression ou l'anonymisation d'un joueur. Les données sont remplacées par des valeurs neutres (prénom→"Anonyme", email→hash SHA256).

Journal des consentements — Chaque action de consentement (acceptation, retrait) est enregistrée avec horodatage, IP et user-agent dans une table dédiée.

Minimisation des données — Seules les données strictement nécessaires sont collectées. Pas de tracking, pas de cookies tiers. Politique de confidentialité accessible depuis toutes les pages.

API REST

API Platform — Architecture orientée ressources

API Platform 3

Une API REST (Representational State Transfer) expose les ressources de l'application via des endpoints HTTP standardisés. L'application Flutter consomme cette API pour accéder aux mêmes données que l'app web, sans dupliquer la logique métier.

Endpoints principaux — GET /api/players, GET /api/matches, GET /api/convocations/me, PATCH /api/players/{id}. Chaque ressource est paginée et filtrée.

Méthodes HTTP — GET (lecture), POST (création), PATCH (mise à jour partielle), DELETE (suppression). Les méthodes autorisées varient selon le rôle (voter Symfony).

Sérialisation JSON-LD — API Platform sérialise automatiquement les entités Doctrine en JSON-LD avec groupes de sérialisation pour contrôler les champs exposés.

Documentation Swagger — Interface Swagger/OpenAPI auto-générée sur /api/docs, permettant de tester tous les endpoints directement dans le navigateur.

Authentification JWT

JSON Web Token — LexikJWTAuthenticationBundle

LexikJWT

JWT (JSON Web Token) est un standard d'authentification stateless : le serveur génère un token signé contenant les informations de l'utilisateur, que le client envoie à chaque requête API. Contrairement aux sessions, le serveur n'a pas besoin de stocker l'état de connexion.

Structure du token — Un JWT est composé de 3 parties encodées en Base64 : Header (algorithme RS256), Payload (sub, roles, exp…), Signature (clé RSA privée du serveur).

Flux d'authentification — 1. Flutter envoie POST /api/login_check avec email+password. 2. Symfony valide et retourne {"token": "eyJ..."}. 3. Flutter stocke le token (flutter_secure_storage). 4. Chaque requête inclut Authorization: Bearer {token}.

Expiration & refresh — Les tokens expirent après 1 heure. Le bundle LexikJWT + RefreshToken Bundle génère un refresh token (durée 30j) pour obtenir un nouveau JWT sans re-saisir les identifiants.

Sécurité — La clé RSA privée est stockée hors du dépôt Git (variable d'environnement). Les routes API sont protégées dans security.yaml avec les firewalls et access_control.

Retour aux projets