Mocou.

Vue d'ensemble

Mocou est une application web éducative et gamifiée pour apprendre le coréen par l'image — construite en solo en une semaine.

Mini-jeu à choix multiples : l'utilisateur choisit une catégorie (animaux, objets du quotidien, nourriture), voit une illustration et doit sélectionner la bonne réponse parmi quatre options. Feedback immédiat, système de score et progression visuelle. Univers néo-brutaliste avec couleurs vives et illustrations cartoon.

Projet personnel réalisé en 7 jours — MVP fonctionnel explorant Next.js App Router, Prisma, TanStack Query et Zustand dans un contexte éducatif.

Défi & Problématique

Créer une petite application d’apprentissage du coréen en une semaine, capable de motiver une personne débutante grâce à une approche visuelle et ludique.
L’objectif n’était pas de reproduire une plateforme complète, mais de concevoir un MVP fonctionnel permettant :

• d’apprendre du vocabulaire à partir d’images mignonnes et mémorables,
• de proposer des catégories simples et progressives,
• d’intégrer un système de score pour encourager la répétition,
• d’explorer des technologies modernes comme Next.js, Prisma, TanStack Query, Zustand et TypeScript.

Le défi principal était donc de combiner pédagogie, design attirant et architecture technique solide, tout en gardant un rythme de développement très rapide.

Solution

Pour répondre à l’objectif d’un apprentissage simple et visuel, j’ai construit Mocou autour d’un parcours très court : choisir une catégorie, afficher une image, proposer quatre réponses possibles, puis donner un retour immédiat. Cette logique permet d’éviter la surcharge cognitive et de maintenir un rythme d’apprentissage fluide.

J’ai structuré le contenu en catégories (animaux, objets, aliments) afin de rendre la progression plus claire et d’éviter la dispersion. Le système de génération des questions sélectionne une bonne réponse et trois distracteurs cohérents, ce qui crée un exercice à la fois simple et efficace.

Côté interface, j’ai appliqué un style néobrutaliste pour renforcer l’aspect ludique : couleurs vives, blocs contrastés, illustrations mignonnes. Cette direction visuelle aide à rendre l’expérience plus engageante, en particulier pour un public très sensible au visuel.

Enfin, j’ai conçu l’architecture technique pour qu’elle reste légère et évolutive. Le découpage en composants, la gestion de l’état avec Zustand et l’utilisation de Prisma/TanStack Query permettent d’ajouter facilement de nouvelles catégories, de nouveaux mots ou d’autres mécaniques de jeu à l’avenir.

Développement

Architecture

Application Next.js full-stack — API Routes pour le backend, Prisma pour la persistance, TanStack Query pour le cache côté client.

Frontend — Next.js + TypeScript

• Next.js 14 + TypeScript — App Router, Server et Client Components
• Zustand — état global du jeu (score, progression, catégorie active)
• TanStack Query — fetching et cache des catégories et questions
• Tailwind CSS — styling utilitaire, thème néo-brutaliste avec couleurs vives

Backend — API Routes + Prisma

• Next.js API Routes — endpoints pour les catégories et les questions
• Prisma ORM — modèles Question, Category, UserScore
• Base de données seedée avec les données coréennes (mots + traductions)

Décisions techniques notables

• Zustand pour l'état du jeu : état de session (score, réponses, étape courante) géré en mémoire — pas besoin de persistance pour un MVP gamifié.
• Contenu en base plutôt qu'en dur : les questions et réponses sont dans PostgreSQL via Prisma — ajout de nouvelles catégories sans toucher au code.
• Feedback immédiat : l'animation de réponse (correct/incorrect) est déclenchée côté client pour une latence zéro — pas d'aller-retour serveur.

Résultats

MVP livré en 7 jours

Application fonctionnelle : sélection de catégorie, jeu en choix multiples, score, feedback visuel. Expérience fluide et motivante dès la première session.

Ce que j'ai appris

• Gamification et UX éducative : le feedback immédiat et le score sont des leviers puissants — petites décisions de design qui changent complètement l'engagement.
• Zustand vs Context : pour un état de session complexe (score, étapes, réponses), Zustand est nettement plus lisible et prévisible que le Context API.
• Scope sous contrainte : construire un MVP en une semaine oblige à prioriser. Chaque fonctionnalité doit justifier sa présence — une discipline que je réutilise sur chaque projet.

Apprentissages

Ce projet m’a permis d’approfondir ma compréhension du développement front-end dans un contexte concret. J’ai découvert comment structurer un mini-produit autour d’un flux simple, tout en gérant une logique métier (questions, réponses, distracteurs, scoring) avec un state manager léger comme Zustand.

L’intégration de Prisma et Neon m’a également aidé à mieux comprendre la modélisation des données et la mise en place d’un CRUD complet dans un MVP. L’utilisation de TanStack Query m’a montré l’importance du caching et d’un data-fetching bien organisé pour garder l’interface fluide.

Sur le plan UX/UI, j’ai confirmé l’intérêt d’une approche visuelle pour l’apprentissage, en particulier pour les utilisateurs débutants. Le choix du néobrutalisme et d’un univers mignon m’a permis d’explorer une direction artistique différente et plus expressive, tout en rendant l’expérience plus engageante.

Ce projet m’a également rappelé l’importance de réduire le périmètre pour tenir un délai court. En me concentrant uniquement sur les fonctionnalités essentielles, j’ai pu livrer un MVP cohérent, simple et efficace — tout en posant des bases solides pour une éventuelle version plus complète.

Galerie