Rapport_Gestion_Rendez_Vous

1.

Gestion des
Rendez-vous
Application Web Full-Stac
Spring Boot 4 · React 19 · MySQL · Bootstr
Projet Universitaire — Master Génie Logiciel

2.

Sommaire
1. Contexte et objectifs du projet2. Architecture générale3. Stack technique — Frontend4. Stack technique —
Frontend6. Structure du Backend7. Composants réutilisables8. Pages et fonctionnalités CRUD9. API REST —
endpoints10. Modèle de données et validation11. Internationalisation (i18n)12. Gestion des erreurs13. Tests e
et configuration15. Conclusion et perspectives

3.

Contexte et objectifs du projet

4.

Présentation du projet
Objectifs
Développer une application web complète de gestion de rendez-vous
Mettre en œuvre une architecture Full-Stack moderne : React 19 + Spring Boot 4
Assurer un CRUD complet avec validation, recherche, filtrage et pagination
Offrir une expérience multilingue (Français, Anglais, Arabe avec support RTL)
Garantir la qualité via des tests E2E automatisés (Playwright)

5.

Fonctionnalités principales
Fonctionnalités
Tableau de bord avec 5 cartes statistiques (Total, En attente, Confirmé, Terminé, Annulé)
Création, consultation, modification et suppression de rendez-vous
Recherche par nom de client et filtrage par statut
Pagination des résultats (10 éléments par page)
Saisie de numéros de téléphone internationaux avec sélecteur de 27 pays
Support multilingue complet : FR / EN / AR avec adaptation RTL pour l'arabe
Interface responsive avec Bootstrap 5 (mobile-first)
Documentation API avec Swagger UI

6.

Architecture générale

7.

Architecture globale — Frontend + Backend
Frontend (React 19)
Backend (Spring Boot 4)
React 19 — Bibliothèque UI (JSX, hooks)
Java 17 — Langage de programm
Vite 8 — Bundler avec HMR (rolldown)
Spring WebMVC — REST API
Bootstrap 5.3.8 — Framework CSS responsive
Spring Data JPA + Hibernate 7 —
Axios 1.18 — Client HTTP
Jakarta Validation — Validation de
React Router DOM v7 — Routing SPA
SpringDoc OpenAPI 2.8.5 — Docu
i18next 26 — Internationalisation
Lombok — Réduction du code boi
Port : 5173
Port : 8080

8.

Flux de communication
Étape 1
L'utilisateur interagit avec l'interface React (localhost:5173)Étape 2
React envoie des requêtes HTTP via Axios vers l'API RESTÉtape 3
Le Controller Spring Boot reçoit la requête et valide les entréesÉtape 4
Le Service traite la logique métier (@Transactional)Étape 5
Le Repository interagit avec MySQL via JPA/HibernateÉtape 6
La réponse est sérialisée en JSON et retournée au FrontendÉtape 7
React met à jour l'interface utilisateur

9.

Schéma architectural détaillé