Étude de cas

Le Crash de Yandel

Escape game éducatif web pour collégiens en Seine-et-Marne : 5 missions scénarisées, jouable sans installation ni compte — porté par le Conseil Départemental des Jeunes.

Développement de A à Z de la digitalisation : architecture, logique de jeu, mini-jeux, accessibilité et déploiement. Concept narratif et assets créés par le client.

5 missions · ~15 étapesSans compte · sans installationPorté par le CDJ 77
Jouer →
Le Crash de Yandel

En bref

  • Jeu d'escape game web pour un territoire local (77), jouable sur desktop et mobile sans installer d'application.
  • 5 missions scénarisées (~15 étapes) couvrant Français, Maths, Histoire-Géo, Physique-Chimie et SVT.
  • Full front : zéro infra backend lourde, déploiement simple, contenu facilement extensible.

Contexte

Le Crash de Yandel est un escape game éducatif pour les collégiens de 6ᵉ à 3ᵉ en Seine-et-Marne. Né du Conseil Départemental des Jeunes — commission « qualité de vie au collège » — il vise la réussite scolaire par le jeu, avec diffusion prévue sur l'ENT77. Le joueur incarne Yandel, survivant d'un crash sur une île, et progresse mission par mission (QCM, énigmes, drag & drop…) pour collecter les pièces d'un radeau et quitter l'île. L'objectif : un parcours ludique, non frustrant (pas de score ni de chrono), accessible aux profils peu techniques et facilement maintenable pour ajouter de nouvelles missions.

Ils en parlent

Conseil Départemental des Jeunes — Département de Seine-et-Marne

Un escape game numérique pour réviser

Conçu pour couvrir les quatre niveaux du collège (6e, 5e, 4e et 3e), ce jeu ludique et collaboratif permettra aux élèves de réviser les notions essentielles de l'année précédente. L'escape game sera disponible depuis l'ENT77 et vise à favoriser la réussite scolaire, améliorer le bien-être des collégiens et renforcer le plaisir d'apprendre.

L'avion de notre héros s'est écrasé sur une île déserte. Pour en repartir, il devra franchir 5 étapes pour collecter des objets et construire un radeau — en répondant à des questions de Français, Mathématiques, Histoire-Géographie, Physique-Chimie et SVT.

Le défi

  • Orchestrer des missions composées de plusieurs étapes, avec un état de jeu cohérent — sans compte utilisateur ni serveur.
  • Garder le code lisible malgré une logique métier propre au jeu (verrouillage, conditions, feedback) pour faire évoluer le contenu facilement.
  • Garantir une expérience fluide sur tablettes et mobiles, avec des assets parfois lourds, sans dégrader les performances.
  • Proposer une expérience inclusive : audiodescription et aide à la lecture pour les élèves AD/DYS.

Ce qu'on a construit

  • Application web 100 % frontend : le joueur avance mission par mission et reprend sa progression — sans créer de compte ni installer quoi que ce soit.
  • Moteur de jeu modulaire : mini-jeux variés (QCM, drag & drop, énigmes) pilotés par des données — ajouter une mission = ajouter du contenu, pas refaire l'architecture.
  • Progression sécurisée : impossible de « casser » le scénario en accédant à une étape non débloquée.
  • Accessibilité intégrée dès l'accueil : audiodescription, mode DYS, zones tactiles adaptées et PWA installable.

Points clés

Progression de jeu maintenable

Un store centralisé avec des identifiants typés et des fonctions explicites pour éviter les effets de bord quand le contenu s'enrichit.

Ajouter de nouvelles missions ou étapes reste principalement déclaratif — le cœur du moteur ne bouge pas.

Enchaînement des étapes sans faille

La navigation est pilotée par l'état global du jeu, pas par l'URL seule — avec garde-fous pour empêcher l'accès prématuré.

Le scénario narratif reste intact, même si un joueur tente de tricher via l'URL.

Performance malgré des assets lourds

Lazy loading des images, formats optimisés (WebP) et préchargement conditionnel pour garder une expérience fluide sur mobile.

Le jeu reste jouable sur tablettes d'établissement, pas seulement sur des machines récentes.

Impact

  • Projet porté par le Conseil Départemental des Jeunes (77), présenté à l'Hôtel du Département en mai 2026.
  • Expérience de jeu fluide : avancer mission par mission, reprendre sa progression, sans friction d'inscription.
  • Code maintenable : l'état et la logique de progression centralisés permettent d'ajouter facilement de nouvelles missions.
  • Base réutilisable pour d'autres jeux narratifs, parcours pédagogiques ou expériences territoriales.

Un produit interactif complexe peut rester full front si la logique métier est isolée du rendu et le contenu entièrement data-driven — ce qui réduit drastiquement les coûts d'infra et de maintenance.

Ce projet vous parle si…

  • Vous voulez un parcours interactif (jeu, formation, escape game) sans investir dans une infra backend lourde.
  • Votre contenu va évoluer régulièrement (nouvelles missions, étapes, modules) et vous avez besoin d'une base facile à enrichir.
  • Vous ciblez un public grand public ou scolaire sur mobile et desktop, avec des contraintes d'accessibilité.

Stack technique

Les technologies utilisées, au service du produit — pas l'inverse.

Next.jsReactTypeScriptZustandTailwind@dnd-kit

Un parcours interactif ou un jeu web pour votre territoire ?

On conçoit une expérience engageante, maintenable et déployable rapidement — sans sur-engineering. 30 minutes pour explorer votre idée.