EXAMEN
Semestre : 1 2
Session : Principale Rattrapage
Module : Application Côté Client 2
Enseignants : UP Web
Classes : 4TWIN
Documents autorisés : OUI NON Nombre de pages : 4
Calculatrice autorisée : OUI NON Internet autorisée : OUI NON
Date : 13/06/2023 Heure : 11h:00 Durée : 01h30
NB : seul le code exécutable sera pris en considération lors
de la correction
Toute carte wifi active est une tentative de fraude.
Étude de cas : (20 pts)
Un club de sport envisage de créer un site web CompetitionWorld qui permettra
aux utilisateurs de consulter les compétitions programmées par le président du club.
L'application permettra également aux utilisateurs de consulter les détails des compétitions
et de participer. Pour réaliser ce projet, vous utiliserez la bibliothèque React JS 18. Afin de
développer cette application, vous devrez respecter les consignes ci-dessous :
● L’utilisation de react-bootstrap et bootstrap est facultative.
● Respecter l’arborescence des composants suivante :
Figure 1: Arborescence des composants
Sachant que :
- Tous les composants sont des composants fonctionnels sauf le composant Home est un
composant de Classe.
1
Travail à faire :
Partie A (10 pts ):
Soit le fichier competitions.json à créer sous le dossier src contenant le code suivant :
[
{
"id": "1",
"name": "Hackathon",
"fees": "100",
"date": "01/04/2023",
"participants": 10,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae consectetur earum
distinctio culpa voluptatum eum ad laboriosam qui, dolore repudiandae cupiditate rerum optio eius.
Doloribus numquam velit veritatis quisquam magnam."
},
{
"id": "2",
"name": "Meet & Greet",
"fees": "30",
"date": "01/04/2023",
"participants": 0,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae consectetur earum
distinctio culpa voluptatum eum ad laboriosam qui, dolore repudiandae cupiditate rerum optio eius.
Doloribus numquam velit veritatis quisquam magnam."
},
]
Figure 2: Contenu du fichier competitions.json
1) Créer les composants Competitions et Competition afin d’afficher les informations des
compétitions en intégrant le contenu du fichier json. (3 pts)
Figure 3: Affichage des compétitions
2) Créer le composant de classe Home en respectant les consignes suivantes : (1 pt)
Un message sera affiché « Welcome to Our Competition World ».
Le message va disparaître après 3 secondes.
3) Créer le composant NavigationBar comme le montre la figure 4 en configurant les routes
nécessaires : (1.5 pts)
La route active dans la NavigationBar doit être soulignée.
2
Figure 4: Barre de navigation
4) Créer le composant NotFound qui sera affiché si l’utilisateur accède à une route qui n’existe pas.
Un message d’erreur « This page does not exist » doit être affiché. Ce message disparaît après 3
secondes. (1.5 pts)
5) Créer la nouvelle interface du composant CompetitionDetails qui affiche les détails d'une
compétition. Cette interface sera affichée en cliquant sur le lien « Details » dans la liste des
compétitions. Si le nombre de participants est égal à 0, le bouton « Participate » sera désactivé.
(3 pts)
Figure 5: Contenu de l'interface du détail d'une compétition
3
Partie B (10 pts):
Dans cette partie, nous souhaitons intégrer la fonctionnalité de participer à une compétition bien
déterminée en utilisant Redux Toolkit. Ajouter cette fonctionnalité en respectant les consignes suivantes :
1) Lorsqu'un utilisateur clique sur le bouton « Participate », un formulaire sera affiché
comme le montre la figure suivante. Ce dernier sera développé dans un nouveau
composant appelé AddPlayer. (3 pts)
Figure 6: Formulaire d'ajout d'un participant
2) L’utilisateur remplit le formulaire, si le nom d’utilisateur « username » existe déjà dans
la liste des participants, il ne sera pas ajouté à nouveau. (2.5 pts)
3) Si le participant a été ajouté, le nombre de participants sera décrémenté. (1.5 pts)
4) La liste des participants sera affichée sous les détails de la compétition dans le composant
CompetitionDetails et le composant AddPlayer disparaît. (3 pts)
NB : Si la liste des participants est vide, elle ne sera pas affichée.
Figure 7: Affichage liste des participants
Bon courage
4
