Informations générales

Modalités du rendu​

• Projet à rendre sur moodle
• À rendre pour le vendredi 17/03
• Pas de vanilla. Tout doit être fait avec React et typescript
• Commentez votre code avec la norme JSDoc

Notation :​

• Respect du cahier des charges (5 points)
• Fonctionnalité libre (3 points)
• Qualité du code (12 points) :
  • Qualité globale du code (appels à l'API, déstructuration, programmation fonctionnelle, jsx, découpage en fichiers, JSDoc, ...) : 5 points
  • Gestion des hook : 3 points
  • Qualité de vos composants : 2 points
  • Qualité du TS : 2 points

Projet votator

Description​

L'objectif de ce projet est de créer un site web (avec REACT + TS) permettant de voter chaque semaine entre étudiants du département informatique de l'IUT de Bordeaux afin de déterminer quelles sont vos musiques, films, mangas, etc préférés.

Les votes s'effectuent en deux phases.

Phase 1 : voter pour une catégorie​

La phase 1 se déroule le samedi, dimanche et lundi. Chaque étudiant peut voter pour une catégorie de tournoi parmi : films, manga, pâtisseries, peintures, musiques. Il y aura donc 5 semaines de tournois.

Chaque utilisateur peut voter pour une catégorie et une seule. Il peut changer son vote autant de fois qu'il le souhaite pendant la période où le vote des catégories est ouvert.

Phase 2 : voter pour un des participants du tournoi​

Du mardi au vendredi, chaque étudiant pourra voter chaque jour une et une seule fois pour un participant. Le mardi se dérouleront les 8èmes de finale, le mercredi les quarts, le jeudi les demies et enfin la finale sera le vendredi. Lors de la phase 2 on ne peut voter qu'une fois. Impossible de changer de vote. On ne peut voter que pour un participant.

Profil utilisateur​

Un identifiant sera distribué en début de projet à chaque étudiant. Certaines routes de l'API nécessitent de fournir cet UID pour pouvoir récupérer des données ou mettre à jour des données. Entre autres, chaque utilisateur peut choisir d'associer un avatar à son profil.

Attendus de la partie front​

Template du site​

Vous êtes libres de choisir le template de votre choix. Vous pouvez même en prendre un libre de droits sur internet. En S4 vous n'êtes pas notés sur vos compétences HTML/CSS. Faites quand même un petit effort pour que votre site soit un minimum ergonomique. Pensez aussi à faire passer l'outil d'audit de votre navigateur pour vérifier qu'il respecte les standards du web. Le site doit contenir un menu permettant d'accéder aux différentes pages décrites ci-dessous.

Page d'accueil​

La racine du site doit contenir

• un titre et un contenu textuel pour expliquer l'objectif du site.
• la possibilité de renseigner son id (pour effectuer les futurs appels d'API)
• afficher l'avatar de l'utilisateur et pouvoir le changer

Page permettant de voter pour une des catégories​

Cette page doit permettre à utilisateur de

• visualiser si les votes pour les catégories sont possibles (samedi/dimanche/lundi) ou non
• visualiser les catégories de tournois encore ouvertes et celles dont les votes sont déjà cloturées
• voter pour une des catégories
• retirer son vote pour une catégorie
• afficher des messages en provenance du serveur (vote validé ou non, erreurs ...)
• afficher le compte des votes en cours (nombre de votes pour chaque catégorie)

Page affichant le tournoi en cours​

Du mardi au vendredi, on peut voter pour un participant du tournoi. Cette page doit permettre :

• de visualiser l'arbre de la compétition (des 16e de finale à la demi-finale)
• de voter pour un participant (et un seul)
• afficher des messages en provenance du serveur (vote validé ou non, erreurs ...)

Page pour afficher les vainqueurs des tournois clôturés​

Tous les tournois terminés doivent apparaitre sur cette page. À minima il faut afficher le vainqueur.

Fonctionalités supplémentaires​

Voici quelques pistes possibles. Vous pouvez aussi proposer vos propres idées.

• (simple) En explorant l'API vous verrez qu'elle propose des données qui ne sont pas nécessaires à la réalisation des pages précédemment décrites. À vous d'explorer ces données et de trouver un bonne idée pour afficher plus d'informations.

• (un peu plus compliqué) Si vous souhaitez afficher des arbres de compétitions, vous pouvez utiliser react-brackets.

#Installer react-brackets
#Attention avec mon installation (npm 10), il y a une dépendance requise par un package qui n'est pas compatible avec mes #versions déjà installées. npm génère une erreur et bloque l'installation.
#J'ai donc ajouté l'option --legacy-peer-deps 
npm install react-brackets --legacy-peer-deps

• (un peu plus compliqué) Utiliser une API externe (par exemple celle de wikipedia) pour obtenir des informations complémentaires à celles données par l'API Votator. Voici un exemple de l'utilisation de l'API Wikipedia sur le mot-clef IUT

curl "https://fr.wikipedia.org/w/api.php?action=query&format=json&list=search&srsearch=IUT&origin=*"

• (assez compliqué) Transformer votre site en Progressive Web App (attention ce n'est pas simple à faire si vous avez déjà codé votre applicaiton) documentation

API Votator​

Un swagger a été déployé sur cette url. Il vous permet de tester certaines routes de l'API et surtout d'avoir accès à la documentation.

Ci-dessous je vous décris les 8 routes de l'API dont vous aurez besoin pour réaliser le projet.

1- Récupérer les informations sur les catégorie de tournois​

curl -X 'GET' \
  'https://api.votator.codenestedu.fr/categorie-tous-les-tournois' \
  -H 'accept: application/json'

Retourne 5 entrées. J'en détaille une :

{
    "idTournois": "1", //ID du tournoi à fournir dans d'autres routes
    "nom": "Tournoi de Mangas", //titre du tournoi
    "categorie": "mangas", //catégorie du tournoi
    "image": "/images/categories/mangas.jpeg", //image du tournoi
    "votes": { // vote par groupe. il faut donc faire la somme pour obtenir le total
      "A": 0,
      "B": 0,
      "C": 0,
      "D": 0
    },
    "tournoisEligible": true, //vaut true si ce tournoi n'a jamais été élu
    "voteOuvert": true // vaut true si le vote est ouvert (samedi/dimanche/lundi)
}

2- Voter pour une catégorie​

curl -X 'PUT' \
  'https://api.votator.codenestedu.fr/categorie-tournois-voter' \
  -H 'accept: application/json' \
  -H 'Content-Type: application/json' \
  -d '{
  "idTournois": "1", //L'ID de la catégorie de tournoi pour laquelle vous souhaitez voter
  "uid": "4h29m2ld" //Votre uid
}'

Si le vote a fonctionné le serveur vous répond :

{"message":"Vote pour l'équipe A mis à jour avec succès.","votesGroupes":{"A":1,"B":0,"C":0,"D":0}}

et vous ne pouvez plus voter pour une catégorie.

3- Retirer un vote pour une catégorie​

curl -X 'PUT' \
  'https://api.votator.codenestedu.fr/categorie-tournois-retirer-vote' \
  -H 'accept: application/json' \
  -H 'Content-Type: application/json' \
  -d '{
  "idTournois": "1",
  "uid": "4h29m2ld"
}'

Si la requête a fonctionné le serveur vous répond :

{"message":"Vote pour l'équipe A retiré avec succès.","votesGroupes":{"A":0,"B":0,"C":0,"D":0}}

et vous pouvez de nouveau voter.

4- Liste d'avatars disponibles​

curl -X 'GET' \
  'https://api.votator.codenestedu.fr/avatars' \
  -H 'accept: application/json'

Le serveur vous retourne 10 urls d'avatars autorisés. Le serveur vous indique aussi qu'il y a un avatar par défaut si l'utilsateur n'en a pas choisi.

{
  "avatars": {
    "tabAvatar": [
      "https://robohash.org/avatar1?size=100x100",
      "https://robohash.org/avatar2?size=100x100",
      "https://robohash.org/avatar3?size=100x100",
      "https://robohash.org/avatar4?size=100x100",
      "https://robohash.org/avatar5?size=100x100",
      "https://robohash.org/avatar6?size=100x100",
      "https://robohash.org/avatar7?size=100x100",
      "https://robohash.org/avatar8?size=100x100",
      "https://robohash.org/avatar9?size=100x100",
      "https://robohash.org/avatar10?size=100x100"
    ],
    "DEFAULT_AVATAR_PATH": "/images/avatars/default.jpeg"
  }
}

5- Mise à jour de son avatar​

Le serveur n'accepte une mise à jour de l'avatar que s'il vient du domaine robohash

curl -X 'PUT' \
  'https://api.votator.codenestedu.fr/utilisateur-update-avatar?uid=8f22o1rp&urlAvatar=https%3A%2F%2Frobohash.org%2Fhttps%3A%2F%2Frobohash.org%2Favatar11' \
  -H 'accept: application/json'

Si la mise à jour se passe bien, alors le serveur vous donne les information de l'utilisateur mises à jour. Ce JSON contient des données "privées" mais elles sont accessibles uniquement si vous avez donné votre UID.

{
  "userInformation": {
    "name": "compte de test1", //Nom du compte
    "team": "A",  //équipe
    "avatar": "https://robohash.org/avatar11", //URL de l'avatar
    "banned": false, //Utilisateur actuellement banni
    "requestCount": 0, // Combre de requêtes effectuées vers le serveur
    "lastRequest": 1734941621264, //date de la dernière requête
    "dateLastVote": null, // date du dernier vote
    "voteCategorie": null, // Dernier vote pour une catégorie
    "aVotePourParticipant": false, // a déjà voté pour un tournoi
    "nbVotes": 0 // nombre de votes effectués depuis le début
  }
}

6- Informations sur les utilisateurs​

Cette route récupère les informations publiques de tous les utilisateurs dans l'application, incluant leur nom, équipe, avatar, état de bannissement, et nombre de votes.

curl -X 'GET' \
  'https://api.votator.codenestedu.fr/utilisateurs-informations' \
  -H 'accept: application/json'

Voici le début de la réponse :

{
  "allUsers": [
    {
      "name": "compte de test1",
      "team": "A",
      "avatar": "https://robohash.org/avatar11",
      "banned": false,
      "nbVotes": 0
    },
    {
      "name": "compte de test2",
      "team": "A",
      "avatar": "/images/avatars/default.jpeg",
      "banned": false,
      "nbVotes": 0
    },
....

7- Route pour récupérer les informations d'un tournoi pour un tour (round) particulier​

curl -X 'GET' \
  'https://api.votator.codenestedu.fr/tournoi-tour?idTournoi=1&tour=16' \
  -H 'accept: application/json'

Le serveur répond :

{
  "roundName": "16", //tour du tournois 1
  "roundTermine": false, // Ce tour est-il terminé ou les résultats sont ils déjà connus ?
  "matches": [
    {
      "matchId": 1, // ID du match parmi les 16
      "participant1": { //informations sur le premier participant
        "id": 1,
        "nom": "Naruto",
        "image": "images/tournois/mangas/naruto.jpeg",
        "information": "Masashi Kishimoto"
      },
      "participant2": {
        "id": 2,
        "nom": "One Piece",
        "image": "images/tournois/mangas/one_piece.jpeg",
        "information": "Eiichirō Oda"
      },
      "votes": {
        "1": 0,
        "2": 0
      },
      "winner": null // Le vote n'est pas cloturé. S'il l'était il y aurait l'id du vainqueur
    },
    {
      "matchId": 2,
      "participant1": {
        "id": 3,
        "nom": "Dragon Ball",
        "image": "images/tournois/mangas/dragon_ball.jpeg",
        "information": "Akira Toriyama"
      },
      "participant2": {
        "id": 4,
        "nom": "Attack on Titan",
        "image": "images/tournois/mangas/attack_on_titan.jpeg",
        "information": "Hajime Isayama"
      },
      "votes": {
        "3": 0,
        "4": 0
      },
      "winner": null
    },
    ////16 matchs en tout 
  ]
}

8- Voter pour un participant d'un tournoi​

Vote pour l'attaque des titans dans le tournoi de mangas. Si le vote est valide, alors il n'est plus possible de voter pour ce tournoi.

curl -X 'PUT' \
  'https://api.votator.codenestedu.fr/tournoi-voter' \
  -H 'accept: application/json' \
  -H 'Content-Type: application/json' \
  -d '{
  "idTournoi": "1", 
  "tour": "16",
  "matchId": "2",
  "vote": "4",
  "uid": "8f22o1rp"
}'

La réponse du serveur est :

{
  "message": "Vote pour le participant Attack on Titan pris en compte."
}

REACT_APP_SERVEUR=https://api.votator.codenestedu.fr/