L'As des dés!

Votre passion pour les jeux de société vous pousse à créer une application Vue pour visualiser et gérer votre collection de jeux de société.

L'application Vue devra permettre d'effectuer différentes actions en lien avec la gestion de votre collection.

Vous devrez également utiliser l'API suivante pour la gestion des données. Vous devez être connecté au VPN ou être sur le réseau du cégep pour utiliser l'API.

• Swagger/documentation de l'API
• http://10.10.0.5:8581/ -> URL de base de l'API

Pondération

Le Projet Vue vaut pour 35% de la note finale du cours.

Lors de la quatorzième semaine, il y aura la remise d'avancement qui se fera en classe. Je passerais voir chaque personne/équipe afin de voir l'avancement du projet et de vous donner une note sur 5% (voir plan de cour).

Structure du projet

Vous devrez obligatoirement utiliser le template de projet Vue suivant : Template vue - 2W1

Composition des équipes

Le projet peut se faire seul ou en équipe de 2 personnes. Les gens en équipe devront effectuer des fonctionnalités supplémentaires.

L'utilisation de git est fortement recommandée si vous êtes en équipe. Vous devez me confirmer la composition de votre équipe avant de commencer le projet, et ce le plus tôt possible.

Fonctionnement du projet

Si vous êtes seul :

• Vous devez implémenter les fonctionnalités obligatoires de bases.
• Vous devez implémenter 2 fonctionnalités supplémentaires.

Si vous êtes en équipe de 2 personnes :

• Vous devez implémenter les fonctionnalités obligatoires de bases et avancées.
• Vous devez implémenter les 3 fonctionnalités supplémentaires.

Fonctionnalités obligatoires

Application de base

• Navbar
  • Les différents liens de navigation devront être présents.
  • Une icône représentant le logo de l'application devra être présente dans la navbar. Cette image ne doit pas excéder la taille de la navbar. Ajuster le scss au besoin.
• Footer
  • Il devra contenir le nom de l'application, votre nom ou celui de votre équipe et l'année en cours (de manière dynamique).
• Page d'Accueil
  • Bouton consultation de la collection
• Page de consultation de la collection
  • Affichage de tous les jeux de société dans la collection avec tous leurs détails (nom, description, nombre de joueurs, etc.). Seuls les champs id, createdAt et updatedAt ne sont pas obligatoires à afficher.
  • Pour chaque jeu, un bouton "Supprimer" pour supprimer le jeu de la collection. Un modal devra être affiché avec les tous les détails du jeu et un bouton pour confirmer la suppression du jeu. Le modal devra se fermer automatiquement après la suppression du jeu et un toast devra être affiché pour confirmer que le jeu a été supprimé de la collection. Le nom du jeu et la date/heure de suppression doivent se trouver dans le toast.
  • Pour chaque jeu, un bouton "Modifier" pour modifier les détails du jeu. Ce bouton devra nous amener vers la page de modification de jeu.
  • Pour chaque jeu, un bouton 'Extensions' pour voir les extensions du jeu. Ce bouton devra nous amener vers la page d'affichage des extensions du jeu.
• Page de modification de jeu
  • Un formulaire prérempli avec les détails du jeu sélectionné, permettant à l'utilisateur de modifier les informations du jeu (toutes les informations, sauf les champs id, createdAt).
  • À l'aide de vee-validate, des validations devront être effectuées afin de respecter la documentation de l'api quant aux valeurs des champs.
  • Un toast devra être affiché pour confirmer que le jeu a été modifié avec succès. Le nom et la date/heure doivent se trouver dans le toast.
  • Ajouter un bouton "Retour à la collection" pour retourner à la page de consultation de la collection.
• Page d'ajout de jeu
  • Un formulaire pour ajouter un nouveau jeu à la collection. Le formulaire devra avoir 2 sections distinctes : Les champs obligatoires et les champs optionnels. Se référer a l'API pour les champs obligatoires et optionnels.
  • À l'aide de vee-validate, des validations devront être effectuées afin de respecter la documentation de l'api quant aux valeurs des champs.
  • Un toast devra être affiché pour confirmer que le jeu a été créé avec succès. Le nom et la date/heure doivent se trouver dans le toast.
  • Ajouter un bouton "Retour à la collection" pour retourner à la page de consultation de la collection.
• Page d'affichage des extensions du jeu
  • Affichage de toutes les extensions du jeu sélectionné avec tous leurs détails (nom, description, nombre de joueurs, etc.). Seuls les champs id, createdAt et updatedAt ne sont pas obligatoires à afficher.
  • Ajouter un bouton "Retour à la collection" pour retourner à la page de consultation de la collection.

Application avancée (équipe)

Si vous êtes en équipe, vous devez en plus des fonctionnalités de base, vous devez implémenter la fonctionnalité de favoris (whislist).

• Page d'Accueil
  • Ajouter un bouton pour accéder à la page de favoris.
• Page de favoris
  • Affichage des jeux de société marqués comme favoris (whislist). Il devra y avoir pour chaque jeu dans la liste des favoris, un formulaire permettant de modifier la note et la priorité du jeu. Je vous conseille d'utiliser une table.
  • Bouton pour supprimer un jeu de la liste des favoris. Un modal devra être affiché avec les tous les détails du jeu et un bouton pour confirmer la suppression du jeu de la liste des favoris. Le modal devra se fermer automatiquement après la suppression du jeu et un toast devra être affiché pour confirmer que le jeu a été supprimé de la liste des favoris. Le nom du jeu et la date/heure de suppression doivent se trouver dans le toast.
• Page de consultation de la collection
  • Ajouter un bouton "Ajouter aux favoris" pour chaque jeu, permettant à l'utilisateur de marquer un jeu comme favori. Un modal s'ouvrira avec 2 champs pour pouvoir spécifier la note et la priorité. Assurez-vous de faire les validations avec vee-valdiate pour que les champs soient dans les valeurs acceptables selon la documentation de l'API.
  • Le modal devra se fermer automatiquement après l'ajout du jeu aux favoris et un toast devra être affiché pour confirmer que le jeu a été ajouté à la liste des favoris. Le nom du jeu et la date/heure d'ajout doivent se trouver dans le toast.

Fonctionnalités supplémentaires au choix

Choix 1 : Ajout de catégories de jeu

Ajouter la fonctionnalité de gestion des catégories de jeu. Les éléments à implémenter sont les suivants :

• Page d'accueil
  • Ajouter un bouton pour accéder à la page de gestion des catégories de jeu.
• Page de gestion des catégories de jeu
  • Affichage de toutes les catégories de jeu existantes.
  • Ajouter un bouton pour créer une nouvelle catégorie de jeu. Ce bouton devra nous amener vers la page de création de catégories de jeu.
• Page de création de catégories de jeu
  • Un formulaire pour créer une nouvelle catégorie de jeu (ex.: Deck-building, enchère, etc.) avec un champ pour le nom de la catégorie.
  • À l'aide de vee-validate, des validations devront être effectuées afin de respecter la documentation de l'api quant a la valeur du champ.
  • Un toast devra être affiché pour confirmer que la catégorie a été créée avec succès. Le nom et la date/heure doivent se trouver dans le toast.
  • Vous devrez rediriger l'utilisateur vers la page de gestion des catégories de jeu après la création de la catégorie.

Choix 2 : Tri par note BGG, durée maximum du jeu et nombre minimum de joueurs

Ajouter une fonctionnalité de tri des jeux de société. Les éléments sur lesquels trier seront les suivantes :

• Note BGG
• Durée maximum du jeu
• Nombre minimum de joueurs
• Les tris devront pouvoir se faire en ordre croissant et décroissant.

Vous devez ajouter une liste déroulante pour sélectionner le critère de tri ainsi qu'un bouton de tri dans la page de consultation. Selon la valeur de la liste déroulante, la liste de jeu de société devra être triée en conséquence.

Choix 3 : Barre de recherche

Implémenter la fonctionnalité de recherche pour permettre à l'utilisateur de rechercher des jeux de société dans la collection en fonction d'un critère de recherche. Vous devrez ajouter à la liste de jeux :

• Un champ de recherche pour permettre à l'utilisateur de saisir un critère de recherche.
• Un champ permettant de saisir une valeur de recherche (ex.: "Catan" pour le nom du jeu, "jeu de stratégie" pour la catégorie, etc.)
• Un bouton de recherche pour lancer la recherche.
• Selon le critère de recherche sélectionné, la liste de jeux de société devra être filtrée pour n'afficher que les jeux correspondant au critère de recherche.

Style

Le site devra être responsive et être utilisable sur les appareils suivants :

• Ordinateur de bureau
• Tablette
• Téléphone mobile

Vous devrez utiliser une palette de couleurs contenant au moins 3 couleurs différentes pour le style de votre site. Assurez-vous que le choix de vos couleurs soit harmonieux et que le contraste soit suffisant pour assurer une bonne lisibilité du site.

Vous devrez modifier les variables de bootstrap avec le SCSS afin que vos couleurs soient prises en compte.

Également, je vous demande d'utiliser un minimum de 5 classes scss afin de personnaliser le style de votre site et d'éviter la répétition de code.

Truc 💡

Au besoin, utiliser l'outil WAVE (Web Accessibility Evaluation Tool) pour vous aider avec le contraste de couleur.

Documentation

Toutes les fonctions de vos services devront être documentées comme vu en classe. Il devra être de même pour vos différents modèles de données (classe dans @typings) et toutes les fonctions créé dans les composants.

ESLint

Assurez-vous d'effectuer régulièrement des vérifications avec ESLint afin de corriger les erreurs de linting. Tout est déjà configuré dans le template, prêt à l'emploi.

Appropriation du code

Je tiens à vous rappeler que vous devez faire le projet par vous-même. En aucun temps, vous ne devriez jamais copier tel quel le code d'internet ou d'une autre personne.

Pour ceux qui sont en équipe, il est de votre devoir de vous assurer que vous comprenez ce qui a été fait par vous, mais aussi par votre coéquipier.

Remise

Vous devrez me remettre sur LÉA votre projet sous forme d'un fichier zip contenant tous les fichiers de votre projet.

Si vous désirez me remettre le projet via git, vous devrez m'inviter sur votre repos git. Le cas échéant, aucune remise ne sera à faire sur LÉA, je vais prendre le dernier push avant la date de remise comme étant la version finale du projet. Assurez-vous de me donner accès à votre repo git avant la date de remise.

Date de remise

La remise d'avancement doit se faire en présence en classe lors de la 14e semaine du cours (8 mai 2026).

La remise finale doit être remise au plus tard avant 23h55 le 20 mai 2026. Tout projet remis après cette date sera considéré comme en retard et une pénalité s'appliquera.

Critère de correction - Remise d'avancement (5%)

La remise d'avancement se fait en classe et sera évaluée de la manière suivante :

• Qualité du travail réalisé à la mi-projet.

Critère de correction Projet final (35%)

• Qualité générale (20%)
  • Respect des consignes.
  • Qualité générale du code.
  • Une pénalité de 0.25% par faute sera appliquée pour l'interface utilisateur et les commentaires, jusqu'à concurrence de 10% de la note finale du travail.
• Fonctionnalité (40%)
  • Respect des éléments demandés.
  • Qualité de l'intégration des fonctionnalités.
• Choix de fonctionnalités (20%)
  • Respect des éléments demandés.
  • Qualité de l'intégration des fonctionnalités.
• Style et aspect responsive (10%)
  • Respect des éléments demandés.
  • Qualité de l'interface visuelle.
• Documentation (10%)
  • Qualité et pertinence de la documentation produite.