Plateforme de quiz dynamique et personnalisable avec NestJS 10
et NextJS 14
, intégrant l'API OpenAI pour une expérience de jeu interactive et enrichissante.
Ce projet est une plateforme de quiz qui offre aux utilisateurs une expérience de jeu personnalisée et dynamique. Sélectionnez vos sujets de quiz préférés, ajustez le niveau de difficulté, et plongez dans l'excitation de l'action multijoueur en temps réel. Avec des performances optimales et une sécurité avancée, nous offrons une expérience de quiz sans latence et sans temps d'arrêt.
- Choix de Plusieurs Sujets : Choisissez parmi une variété de sujets.
- Niveaux de Difficulté Sélectifs : Ajustez le niveau de défi selon vos préférences.
- Option de Mix de Sujets Aléatoires : Vivez une expérience de quiz variée avec des sujets sélectionnés aléatoirement.
- Génération de Questions en Temps Réel : Questions uniques générées à chaque tour.
- Indices et Explications Contextuels : Fournit des aides et des explications basées sur l'intelligence d'OpenAI.
- Salles de Jeu Privées/Publiques : Choix entre rejoindre des salles publiques ou créer des salles privées.
- Rejoindre un Joueur Instantanément : Processus de participation fluide et rapide.
- Points Basés sur la Précision : Encourage la précision des réponses.
- Points Bonus pour la Vitesse : Récompense les joueurs qui répondent rapidement.
- Nombre de Questions Configurable : Choix du nombre de questions par quiz.
- Option de Limiter le Nombre de Tours : Flexibilité pour s'adapter à différentes durées de jeu.
- Authentification JWT : Gestion sécurisée des sessions utilisateurs.
- Mise en Cache : Réduit la latence et améliore l'expérience utilisateur.
- Scalabilité Horizontale avec Redis : Gère les sessions dans un environnement serveur distribué.
Le Défi Quiz à Thème Personnalisé Dynamique combine ces fonctionnalités clés avec des bonus techniques pour fournir une expérience de jeu immersive tout en assurant performance, sécurité, et scalabilité.
Pour mettre en place et exécuter ce projet, suivez ces étapes :
- Node.js (version recommandée : 20.x)
- Gestionnaire de paquets
NPM
- Base de données (MySQL)
- Redis pour la gestion des sessions et la scalabilité
- Cloner le dépôt : Utilisez
git clone https://github.com/242darkman/DynamicQuizChallenge.git
pour cloner le projet sur votre machine locale. - Installation des Dépendances :
- Accédez à chaque sous-dossier (
core-dynamic-quizz
etoffice-dynamic-quizz
) et exécuteznpm install
pour installer les dépendances.
- Accédez à chaque sous-dossier (
- Fichiers
.env
: Créez des fichiers.env
dans les sous-dossiers pour configurer les variables d'environnement nécessaires (par exemple, les détails de la base de données, les clés API).
- Backend (NestJS) : Dans le dossier
core-dynamic-quizz
, exécuteznpm run start:dev
pour démarrer le serveur backend. - Frontend (NextJS) : Dans le dossier
office-dynamic-quizz
, exécuteznpm run dev
pour lancer le serveur de développement frontend.
Assurez-vous que le port 3306 est libre pour que le container puisse être lancé. Il faudra donc stopper le XAMPP, WAMP, LAMP ou MAMP
Ensuite se mettre à la racine du dossier
DynamicQuizChallenge
et lancer les commandes suivantes : Pensez à ajouter dans le fichier.env
du dossiercore-dynamic-quizz
le variable d'environnementOPENAI_API_KEY
correspondant à votre clé API OpenAI.
npm install && npm run start:all # pour les systèmes Linux MacOS
# pour les systèmes windows
npm install
npm run start:all
> Pour consulter les logs du container
docker-compose logs
Créer manuellement une base de données au même nom que la variale d'environnement
DB_DATABASE
.
Pour les bases de données MySQL
ayant ou pas de mot de passe il faudra l'indiquer dans la mettre d'environnement DB_PASSWORD
.
Pour une compréhension détaillée des composants individuels et de leur fonctionnement, veuillez consulter la documentation dans les dossiers respectifs.
-
Backend (NestJS) : Documentation disponible dans
core-dynamic-quizz/README.md
. -
Frontend (NextJS) : Documentation disponible dans
office-dynamic-quizz/README.md
.
docker-compose stop
docker-compose down
Pour une vérification pratique, vous pouvez essayer d'accéder à vos applications via un navigateur ou un client API :
- Pour le frontend Next.js 🌐, ouvrez un navigateur et accédez à
http://localhost:3000
. - Pour le backend NestJS 🔧, utilisez un client API comme Postman ou effectuez une requête curl à
http://localhost:5000
. - Pour l'interface PHPMyAdmin ouvrez un navigateur et accédez à
http://localhost:5050
Image by Freepik
- Laura FAUVET
- Erica Grace NFONO NDONG
- Lansana KEITA
- Brandon VOUVOU
- Création des différents composants et pages de l'application
- Page d'accueil
- Page de création d'un salon ou pour y rejoindre
- Page d'attente avant de lancer une partie
- Page de jeu
- Page de fin de partie
- Page d'affichage du classement
- Page de connexion
- Page de cration d'un compte
- Mise en place de l'authentification
- Gestion de routes
- Création des modèles de données
- Création des services pour effectuer des actions avec la base de données
- Mise en place du service OpenAI
- Mise en place de la gateway et des différents events avec Socket.io
- Gestion du cache avec Redis