Sauvez le savoir de l'humanité, une page à la fois.
Projet de fin de Coding Sprint - Création du nouveau service d'apprentissage de Wikipédia.
🎓 Étudiants : Ramy Nebili, Noé Chauvin, Amina Imadjene, Juliana Neto, Douglas Quintero
🏫 Formation : Bachelor Développement Web 1ère Année - HETIC (Sprint B1)
🔗 Repository : https://github.com/ramynbl/wiki-learn.git
Notre site WikiLearn plonge l’utilisateur dans un univers narratif précis : tout le savoir de Wikipédia a été dérobé par un mystérieux voleur, dispersant les livres aux quatre coins du monde. Les étagères de la grande bibliothèque de l'humanité sont vides.
L'objectif du joueur ? Restaurer cette bibliothèque. Pour cela, il doit accomplir des leçons pour retrouver des Pages (qui agissent comme des points d'XP). Ces pages permettent de reformer des Livres (qui agissent comme des Niveaux). Chaque livre débloqué est rangé dans la galerie du joueur et lui octroie des récompenses (skins, icônes) pour personnaliser son avatar !
Le jeu a été pensé pour récompenser la curiosité tout en évitant la frustration.
Le joueur choisit une catégorie thématique. La leçon se divise en 5 cartes interactives pensées pour le mobile :
- Card 1 : Présentation du sujet.
- Card 2 : "En bref" (Des chiffres clés et statistiques).
- Cards 3, 4 et 5 : Des anecdotes surprenantes et marquantes.
Une fois les cartes lues, place au Quiz : un QCM de 3 questions pour tester les connaissances. 🏆 Récompense : La réussite de la mission octroie 5 pages.
La collection de livres est le moteur de satisfaction du jeu. Pour que le joueur ne se sente pas bloqué, la progression est finement calibrée :
- Une courbe linéaire (et non exponentielle) : Le nombre de pages retombe à 0 après avoir obtenu un livre. Les premiers s'obtiennent vite : Livre 1 = 5 pages ➔ Livre 2 = 10 pages ➔ Livre 3 = 20 pages ➔ Livre 4 = 40 pages...
- Des jauges indépendantes par catégorie : C'est le cœur de notre système. Si un joueur s'est spécialisé en "Histoire" et a besoin de 500 pages pour son prochain livre, il peut se sentir découragé. S'il lance sa toute première leçon de "Géographie", il n'aura besoin que de 5 pages pour obtenir un nouveau livre ! Cela pousse le joueur à explorer de nouveaux thèmes.
- Classement (Leaderboard) : Un tableau des scores met en avant les contributeurs ayant ramené le plus de pages à la bibliothèque mondiale.
- Galeries partagées : Possibilité de visiter les profils de ses amis pour comparer ses collections de livres et ses skins d'avatar.
Pour maintenir l'engagement des joueurs sur le long terme, voici les features prévues :
- 🎁 Leçon "Surprise" du jour : Un thème généré aléatoirement (toutes catégories confondues) pour une récompense quotidienne.
- 🔍 Moteur de recherche IA : Une barre de recherche reliée à l'API Wikipédia et à un LLM pour générer une leçon jouable sur n'importe quel sujet précis demandé par le joueur.
- ⚔️ Défis Multijoueurs : Des "battles" de culture générale entre joueurs ayant un nombre de pages similaire.
- 🌍 Événements Communautaires (Raids) : Des événements à durée limitée où toute la communauté s'unit. Exemple : Pour la journée des droits des femmes, un module spécial nécessite de récolter 10 000 pages en commun sur des figures historiques féminines pour débloquer un livre légendaire très rare.
- ✨ Feedbacks Visuels & Sonores : - Une cinématique 2D d'intro rétro présentant le lore.
- Une animation gratifiante au moment du "craft" d'un livre.
- Une ambiance sonore dynamique (musique de fond, SFX d'UI).
- ⚙️ Page Paramètres & Profil : Personnalisation de l'avatar, gestion de la langue, du volume, et galerie des livres.
Ce projet a été construit dans une optique de scalabilité, performance et maintenabilité, en appliquant les standards de l'industrie Front-End.
- Next.js (App Router v14+) : Choisi pour le SSR (Server-Side Rendering) sur les futures fiches, optimisant le SEO et les performances. Le routing par dossier simplifie l'architecture.
- React (v19) : Utilisation exclusive de composants fonctionnels et des Web Hooks modernes (
useState,useEffect). - JavaScript Standard : Développement en JS Vanilla.
Pour éviter un code monolithique, le projet suit de manière stricte le pattern Atomic Design (Brad Frost) :
components/atoms/: Éléments de base (ex:Button.jsx,Typography.jsx). Zéro dépendance métier.components/molecules/: Assemblage d'atomes (ex:TopicCard.jsxcombine Image, Titre et Bouton).components/organisms/: Sections autonomes et interactives (ex:TopicCarousel.jsx,HeaderLogo.jsx).
- Zustand : On l'a choisi parce que c'est beaucoup plus léger que Redux. Ça nous permet de garder le score (XP) et les pages récoltées au même endroit. Comme ça, tout le site est au courant de la progression du joueur sans galérer avec des props dans tous les sens.
- Persistance : On utilise le middleware
persistpour que la session soit sauvegardée dans lelocalStorage. Pratique pour pas que le joueur perde ses livres s'il ferme l'onglet par erreur !
- CSS Modules (
*.module.css) : Garantit un scoping local (aucune collision de classes). - Variables Globales (
globals.css) : Utilisation intensive des Custom Properties (var(--color-...)) pour centraliser le Design System (prêt pour le theming/Dark Mode). - CSS Moderne : Utilisation de
scroll-snap-typepour le carousel (sans surcharge JS) et deborder-radiusirréguliers pour un style "cartoon/jeu vidéo".
- Framer Motion : C'est notre moteur principal pour que l'app soit fluide. On a mis des petits rebonds (
type: "spring") et des apparitions en liste pour que ça fasse vraiment "application mobile". - GSAP : On le garde sous le coude pour les animations plus complexes, comme les timelines ou des effets de décompte qu'on rajoutera bientôt.
- use-sound : Super pratique pour gérer la musique de fond et les bruitages (clics, succès) sans se prendre la tête avec l'API Web Audio native.
- Axios : On l'utilise pour les futurs appels à l'API Wikipédia. C'est plus simple que
fetchpour gérer les erreurs et transformer les résultats. - Données Mocks (
topicsMock.json) : En attendant que l'API soit totalement prête, on utilise un fichier JSON pour simuler les catégories. Ça permet de bosser sur l'UI sans dépendre du serveur. - Transition Asynchrone : On a créé une page de chargement exprès (
/loading/page.jsx) pour simuler un petit temps de réseau et pas avoir une transition trop brutale.
/src
├── app/ # Routes Next.js
│ ├── globals.css # Variables globales
│ ├── layout.jsx # Enveloppe HTML
│ ├── page.jsx # Redirection vers /learn
│ ├── learn/ # Page d'accueil (Choix du Thème)
│ └── loading/ # Page transitoire (Loader asynchrone)
│
├── components/ # ATOMIC DESIGN
│ ├── atoms/ # Boutons, Typos
│ ├── molecules/ # Cartes, UI composées
│ └── organisms/ # Header, Carousel
│
├── data/ # Base de Données "Mockée" (topicsMock.json)
└── store/ # Logique Métier / XP (useAppStore.js)