Formation : Fullstack React + Symfony : application web complète

• Développeurs maîtrisant React et Symfony souhaitant assembler leurs compétences pour créer une application web complète et découplée.
• Personnes ayant suivi les formations React : développer des interfaces modernes et Symfony 7 : initiation au framework PHP professionnel ou disposant d'une expérience équivalente.
• Développeurs front-end ou back-end souhaitant élargir leur profil vers le fullstack en conditions réelles.
• Personnes visant un poste de développeur fullstack JavaScript/PHP en entreprise ou en freelance.

• Concevoir et architecturer une application découplée avec React en frontend et Symfony en backend
• Créer une API REST avec API Platform : ressources, filtres, pagination et sérialisation
• Implémenter une authentification JWT de bout en bout avec LexikJWTBundle
• Développer le frontend React consommant l'API : routing, state management et gestion des tokens
• Gérer les rôles et les permissions côté API et côté client React
• Gérer l'upload de fichiers entre le frontend et l'API Symfony
• Déployer l'application complète sur un VPS avec Nginx et Docker Compose

• Maîtrise de React : composants, hooks, React Router, appels API. Maîtrise de Symfony : routing, Doctrine ORM, formulaires, Security Bundle. 
• Les formations React : développer des interfaces modernes et Symfony 7 : initiation au framework PHP professionnel sont requises ou une expérience équivalente. 
• Notions de base sur HTTP, REST et les tokens JWT.

• Monorepo vs multi-repo : avantages, inconvénients, choix pour ce projet
• Le flux de communication frontend/backend : requêtes HTTP, JSON, CORS
• Configurer CORS dans Symfony pour autoriser les requêtes depuis React
• Structure du projet : dossier backend/ Symfony et dossier frontend/ React
• Les outils du développeur fullstack : Postman, React DevTools, Symfony Profiler

• Initialiser le projet Symfony avec les dépendances API Platform
• Initialiser le projet React avec Vite et configurer le proxy vers l'API
• Configurer la base de données PostgreSQL et les variables d'environnement
• Cas pratique : monorepo opérationnel avec les deux projets qui communiquent

• Ce qu'API Platform apporte par rapport à Symfony seul : génération automatique, documentation
• Créer une ressource API avec l'attribut #[ApiResource]
• Les opérations : GetCollection, Get, Post, Put, Patch, Delete
• La documentation Swagger UI générée automatiquement
• Tester les endpoints depuis Swagger UI et Postman
• Cas pratique : ressource Article avec CRUD complet documenté

• Les groupes de sérialisation : contrôler les champs exposés par opération
• normalization_context et denormalization_context
• Exposer des champs calculés avec des getters
• Gérer les relations imbriquées : IRI vs objet embarqué
• Cas pratique : ressource Article avec groupes de lecture et d'écriture distincts

• SearchFilter : filtrer par valeur exacte ou partielle
• RangeFilter et DateFilter : filtrer par intervalle
• OrderFilter : trier les résultats depuis l'URL
• La pagination API Platform : configurer le nombre d'éléments par page
• Cas pratique : endpoint de recherche d'articles avec filtres et pagination

• Installer et configurer LexikJWTAuthenticationBundle
• Générer les clés RSA pour signer les tokens
• Configurer le Security Bundle : firewall API stateless avec JWT
• L'endpoint /api/login : recevoir les identifiants et retourner un JWT
• Structure d'un JWT : header, payload, signature
• Cas pratique : obtenir un token JWT depuis Postman

• Restreindre les opérations API Platform selon l'authentification
• Les Security Voters dans API Platform : contrôle d'accès par objet
• Exposer l'utilisateur courant via un endpoint /api/me
• Rafraîchir un token expiré avec gesdinet/jwt-refresh-token-bundle
• Cas pratique : endpoint CRUD articles réservé aux utilisateurs authentifiés

• Stocker le JWT : localStorage vs httpOnly cookie — sécurité et compromis
• Créer un contexte AuthContext pour partager l'état d'authentification
• Le hook useAuth : accéder à l'utilisateur et aux méthodes login/logout
• Intercepteur Axios : injecter automatiquement le token dans les requêtes
• Gérer l'expiration du token : intercepter les 401 et rediriger vers la connexion
• Cas pratique : connexion avec persistance du token et déconnexion

• Composant PrivateRoute : rediriger si non authentifié
• Décoder le JWT côté client pour lire les rôles sans appel API
• Affichage conditionnel selon le rôle : masquer les actions non autorisées
• Synchroniser l'état d'authentification entre les onglets du navigateur
• Cas pratique : interface avec sections publiques et sections réservées aux admins

• Organisation des dossiers : pages/, components/, hooks/, services/, contexts/
• La couche service : encapsuler les appels API dans des fonctions dédiées
• Typer les réponses API avec PropTypes ou TypeScript
• Variables d'environnement Vite : VITE_API_URL pour pointer vers le backend

• Quand useState suffit et quand passer à un state global
• Context API pour les données partagées : utilisateur, panier, notifications
• Le pattern optimistic update : mettre à jour l'UI avant la confirmation API
• Gestion des états asynchrones : loading, error, data dans les hooks personnalisés
• Cas pratique : hook useArticles avec pagination, filtres et gestion des erreurs

• Lister les ressources avec pagination côté API
• Formulaire de création avec validation côté client et gestion des erreurs 422 de l'API
• Formulaire d'édition avec pré-remplissage des données existantes
• Suppression avec confirmation et mise à jour optimiste de la liste
• Cas pratique : interface de gestion d'articles complète

• Configurer VichUploaderBundle côté Symfony pour gérer les fichiers
• Créer un endpoint d'upload dédié dans API Platform
• Envoyer un fichier depuis React avec FormData et Axios
• Afficher un aperçu du fichier avant l'envoi
• Cas pratique : upload d'image de couverture pour un article

• Mapper les erreurs de validation Symfony (RFC 7807) vers les champs du formulaire React
• Notifications globales : système de toast pour les succès et les erreurs
• Error boundaries React : capturer les erreurs de rendu
• Page 404 et redirections côté React Router

• Skeleton loaders : afficher des squelettes pendant le chargement
• Infinite scroll vs pagination classique : implémentation avec l'API Platform
• Mémoïsation des appels API : éviter les requêtes redondantes
• Cas pratique : liste d'articles avec skeleton loader et pagination infinie

• Tester les endpoints API Platform avec WebTestCase
• Authentifier un utilisateur dans les tests avec un JWT de test
• Vérifier les codes HTTP, la structure JSON et les permissions
• Cas pratique : suite de tests pour les endpoints critiques de l'API

• Tester un composant qui consomme une API avec Mock Service Worker
• Tester le flux d'authentification : connexion, redirection, déconnexion
• Cas pratique : tests du formulaire de connexion et d'une page protégée

• Cahier des charges : plateforme de gestion de contenu avec espace public et back-office
• Mise en place de l'architecture monorepo et des deux projets
• Modélisation des entités Symfony et configuration API Platform
• Authentification JWT fonctionnelle des deux côtés
• Premières pages React connectées à l'API

• Variables d'environnement de production : .env.local, secrets Symfony
• Build de production React : vite build et optimisation des assets
• Configuration Nginx : servir le frontend React et proxyer l'API Symfony
• HTTPS avec Let's Encrypt et Certbot

• Dockerfile pour Symfony : PHP-FPM, extensions, Composer
• Dockerfile pour React : build multi-stage avec Nginx
• docker-compose.yml : orchestrer Symfony, React, PostgreSQL et Nginx
• Déployer sur un VPS : cloner, configurer, lancer
• Migrations en production : doctrine:migrations:migrate sans interruption
• Cas pratique : déploiement complet de l'application sur un VPS

• Compléter les fonctionnalités : CRUD complet, upload de fichiers, gestion des rôles
• Déployer l'application sur le VPS ou Docker Compose en local
• Revue de code collective : architecture, sécurité, cohérence API/frontend
• Présentation individuelle du projet : choix techniques, difficultés rencontrées, axes d'amélioration
• Retour formateur individualisé sur le projet rendu

• Concevoir l'architecture d'une application fullstack découplée frontend/backend
• Développer et documenter une API REST avec API Platform
• Implémenter une authentification JWT sécurisée de A à Z
• Consommer une API REST depuis React avec gestion des états et des erreurs
• Gérer les permissions côté serveur et côté client de manière cohérente
• Déployer et maintenir une application fullstack en production sur un VPS

• En cours de formation : exercices pratiques corrigés à chaque module
• En fin de formation : réalisation et présentation d'une application fullstack complète déployée
• Questionnaire d'auto-évaluation des acquis en fin de parcours

• Architecture découplée fonctionnelle : frontend React et backend Symfony communiquant via l'API
• Authentification JWT opérationnelle de bout en bout avec gestion des rôles
• API Platform correctement configurée avec groupes de sérialisation et filtres
• Gestion cohérente des erreurs API côté React avec feedback utilisateur explicite
• Application déployée et accessible avec HTTPS sur un VPS ou via Docker Compose

Cette formation a été créée en 2026. Les indicateurs de résultats (taux de satisfaction, taux d’atteinte des objectifs, taux d’assiduité) seront publiés sur cette page à l’issue des premières sessions réalisées.

• Support de cours numérique mis à disposition des apprenants
• Dépôt GitHub de démonstration avec le projet fil rouge versionné par étape
• Environnement de développement : VS Code + Symfony CLI + Vite + Docker Desktop
• Pour le distanciel : visioconférence (Zoom ou équivalent), partage d'écran, chat en direct
• Accès à la plateforme pédagogique LaPolaris (supports, ressources, émargement)

• Feuilles d'émargement signées par demi-journée (présentiel) ou émargement numérique (distanciel)
• Traçabilité des activités pédagogiques réalisées
• Attestation d'assiduité délivrée en fin de formation
• Suivi individuel via les exercices corrigés et le projet de synthèse