QuizParty : Réinvention d’un projet pour mesurer mes compétences

Dans le cadre de mon perfectionnement en JavaScript, j’ai choisi de revisiter un projet que j’avais réalisé il y a deux ans, lorsque j’étais en licence pro : « QuizzParty ». À l’époque, ce projet avait été développé en JavaScript natif, et mon objectif principal était de m’auto-évaluer sur cette stack.

Après avoir consacré deux années à travailler principalement des projets en PHP, ma soif d’apprentissage m’a poussé à me replonger dans le monde passionnant de JavaScript. Mais cette fois, j’ai décidé d’aller plus loin : fini le JavaScript natif et jQuery, place aux frameworks modernes.

Présentation du projet : Qu’est-ce que QuizParty ?

QuizParty est une application ludique et éducative qui permet de jouer à un quiz en mode solo. Voici les principales fonctionnalités que j’ai développées.

Page d’accueil : L’idée était de proposer une interface permettant de personnaliser sa propre session, l’utilisateur peut donc : Sélectionner le niveau de difficulté, choisir la catégorie des questions puis saisir un pseudo (dans le but de figurer dans le classement).

Quiz interactif :
Lorsque la session est lancée, une question s’affiche en fonction des paramètres sélectionnées : Quatre réponses sont proposées, dont une seule est correcte.

Puis quand l’utilisateur répond, la bonne réponse s’affiche immédiatement avec un bouton pour passer à la question suivante.

Fin de partie : À la fin, une note sur 10 s’affiche avec une option pour rejouer.

Classement : Enfin, cette page permet d’afficher le classement général. En l’état, l’API génère une requête SQL permettant d’additionner les points en regroupants les enregistrements par le pseudo. (Ce qui est en soit loin d’être l’idéal, mais suffisant pour un MVP à mon sens).

Stack technique utilisée

Front-end :
Pour la partie visible, j’ai choisi ReactJS. Ce framework m’a permis de structurer efficacement mon code et d’optimiser les performances. Pour le langage, j’ai opté pour le sur-ensemble JavaScript : TypeScript. Un choix évident pour garantir la robustesses et la maintenabilité du projet, en particulier lors de la manipulation des données.

Côté design, j’ai utilisé la framework TailwindCSS, où j’ai fait une extension du thème par default pour implémenter ma charte graphique.

Back-end :
L’application ne pourrait pas fonctionner sans un back-end solide. Voici comment j’ai procédé :

1 – Extraction et traduction des données :
Les questions du quiz proviennent de l’API open-source OpenTriviaDB, qui propose non loin de 4500 questions vérifiées. Cependant, ces questions sont en anglais.

J’ai donc développé un script en PHP pour extraire les données, puis les traduire via l’API Deepl. Avec l’offre gratuite de Deepl, j’ai pu automatiser la traduction des questions, un processus important pour adapter le contenu à un public francophone.

2 – Base de données :
Pour garantir la robustesse et la flexibilité du projet, j’ai conçu une base de données relationnelle en utilisant MariaDB. Mon objectif était de prévoir les évolutions possibles, notamment l’ajout de langues supplémentaires, tout en organisant les données de manière logique et modulaire.

Pourquoi un schéma multilingue ?
Bien que le projet cible principalement un public francophone, j’ai souhaité anticiper les besoins futurs. Ce choix de structure permettrait d’ajouter facilement des langues supplémentaires en cas d’évolution du projet vers un public international grâce à l’API Deepl.

Pour chaque traduction, j’ai préféré stocker séparément les données traduites au lieu d’écraser les données originales. Cette approche garantit :

• La conservation des données brutes pour référence ou modification.
• Une flexibilité accrue pour corriger ou enrichir les traductions sans compromettre l’intégrité des données originales.

3 – Extraction et traduction des données
Pour obtenir les question adaptées au public francophone, j’ai mis en place un processus automatisé en plusieurs étapes :

1. Extraction depuis OpenTriviaDB :
   Le script PHP interroge l’API pour récupérer les questions en anglais.
2. Traduction via l’API Deepl :
   Chaque question, réponse correcte et liste de réponses incorrectes est envoyée à Deepl pour traduire en français.
   
   Les résultats sont formatés et vérifiés avant l’insertion en base. La vérification s’effectue sur la donnée originale, dans le but d’économiser l’utilisation de l’API Deepl.
3. Insertion en base de données :
   Une fois les traductions validées, les données sont insérées dans les tables correspondantes (questions, catégories, difficultés).

4 – Environnements de développement et production :
En local, j’ai utilisé Docker pour configurer un environnement avec un serveur PHP et une base sous MariaDB.

Tandis qu’en production, j’ai déployé l’application sur un environnement NodeJS fourni par mon hébergeur o2switch.

Limites et axes d’amélioration

Actuellement, la table Users ne vérifie pas l’unicité des pseudos, l’objectif principal était de développer un MVP. Une évolution naturelle serait d’ajouter un système d’authentification avec email et mot de passe.

Bien que Deepl fournisse d’excellents résultats, des erreurs ponctuelles subsistent. Un outil de vérification manuelle ou une interface pour corriger les traductions directement pourrait être un ajout utile.

En l’état, j’ai développé un formulaire de rapport de bug que les joueurs peuvent utiliser pour faire remonter l’information.

Découvrez QuizParty

Ce projet m’a permis de constater l’évolution de mes compétences depuis mes débuts dans le développement. J’ai également appris à travailler de manière plus méthodique et évolutive, en anticipant les besoins futurs.

Bien qu’il reste des axes d’amélioration, je suis très fier du chemin parcouru et des compétences acquises en cours de route.