MyCampusQuest, chasse au trésor en PWA Next.js

MyCampusQuest est une chasse au trésor en PWA qui propose de découvrir un campus en jouant : des quêtes sont associées à des lieux, et l’étudiant les valide en scannant le QR code posé sur place. Le projet a été réalisé pendant un module consacré aux Progressive Web Apps.

L’application devait donc se comporter comme une application mobile installée, tout en restant un site Next.js déployé sur Vercel.

Une chasse au trésor se joue en se déplaçant, souvent dans des couloirs ou des bâtiments où le réseau passe mal. Valider une quête ne devait pas dépendre de la connexion.

Il fallait aussi éviter la triche : une quête ne se valide que si l’on est réellement à proximité du lieu, et une même quête ne peut pas être comptée deux fois.

J’ai configuré l’application en PWA et branché le scan de QR code sur la caméra arrière du téléphone. À chaque scan, la position de l’utilisateur est comparée à celle de la quête avec geolib, dans un rayon d’un kilomètre, puis la progression est enregistrée dans MongoDB. L’authentification repose sur Clerk.

Hors ligne, les validations sont mises en cache avec localForage et synchronisées dès que la connexion revient ; la vérification de position est alors suspendue. J’ai ajouté les notifications push (y compris sous Safari), un mode sombre et un formulaire de contact.