Guess The Product Price
Un jeu web inspiré du Juste Prix sur un catalogue de 1,4 million de produits Amazon, qui m'a un peu fait buzzer sur Reddit.
Parfois, je m'ennuie.
J'aime beaucoup jouer au Zip Game de linkedin, mais il est vrai que, j'aime bien me challenger en jouant à des jeux de devinettes. Comme je ne trouvais pas de version simple du juste prix sur le web, j'ai décidé de m'en créer une.
Comment récupérer les données ?
C'est là que le projet a commencé à devenir intéressant. J'ai trouvé un dump brut de 1,4 million de produits Amazon sur Kaggle, et je m'en suis servi pour créer le jeu. Le dataset donne vraiment tout: images, prix, catégories, descriptions, etc. Il est très complet et m'a permis d'avoir un catalogue très varié pour le jeu. (parfois même un peu trop varié, avec des produits très étranges...).
Comment j'ai hébergé le dataset sans payer 1 seul centime ?
Le catalogue utilisé regroupe 1,4 million de références sous la forme d'un fichier CSV brut de 300 Mo, et j'ai tout de suite à en créer une base que j'aurais pu interroger depuis le backend. Le problème, c'est que je ne voulais pas payer pour un hébergement de base de données, et que je voulais que l'application reste gratuite pour les joueurs (et pour moi). J'ai donc dû trouver une solution pour héberger le dataset sans payer.
Pour héberger l'application gratuitement sur Vercel sans monter de base de données dédiée, je me suis heurté à deux limites strictes. GitHub refuse les fichiers uniques trop volumineux (donc pas possible de push le fichier sur le repo) et les fonctions serverless de Vercel imposent une taille d'exécution maximale de 250 Mo. Charger l'intégralité du dataset en mémoire à chaque requête aurait fait exploser le temps de réponse et les quotas.
Pour contourner ce problème proprement, j'ai mis en place une stratégie en trois étapes:
-
Le fichier CSV principal a d'abord été découpé en 29 morceaux d'environ 12 Mo chacun, ce qui me permet de les stocker sur Github.
-
Lorsqu'une manche démarre, l'API fetch juste un chunk aléatoire du dataset, le parse en mémoire et sélectionne un produit au hasard. Cela permet de ne jamais charger plus de 12 Mo de données à la fois !
-
Le chunk est ensuite mis en cache côté serveur pour les prochaines requêtes, ce qui permet de ne pas recharger le même fichier à chaque fois.
Le design et l'UX
Je me suis amusé à reproduire l'interface d'amazon, tout en gardant un design simple et épuré pour que le joueur se concentre sur le jeu. On notera aussi le super logo que j'ai dessiné en 10 secondes sur paint, qui est au final plutôt réussi !
Deux modes de jeu
Pour donner envie de revenir, j'ai découpé le gameplay en deux expériences complémentaires.
Le mode classique laisse trois vies au joueur. À chaque produit présenté, on saisit une estimation et le score dépend de la précision de la réponse. Plus on se rapproche du prix réel, plus on accumule de points avant de perdre toutes ses vies.
Le défi quotidien propose quant à lui le même article pour tout le monde chaque jour. Les joueurs s'affrontent sur un classement public mis à jour en temps réel pour déterminer qui a eu le coup d'œil le plus affûté.
Le lancement sur Reddit
Une fois le prototype en ligne, j'ai partagé le projet et son fonctionnement technique sur Reddit, notamment sur le subreddit r/vibecoding ainsi que sur r/playmygame et r/WebGames.
Le retour a dépassé mes attentes avec plus de 1000 visites en quelques heures, une centaine d'upvotes sur le post de r/vibecoding et plus de 130k vues sur le post !
Les retours de la communauté ont été particulièrement instructifs. Les premiers joueurs sont tombés sur des articles inattendus issus du dump brut d'Amazon, ce qui m'a obligé à mettre rapidement en place un filtre de modération sur le vocabulaire et certaines catégories de produits. J'ai également profité des suggestions pour intégrer le leaderboard du défi quotidien et peaufiner les animations de résultat.
Pour conclure sur ma vision du vibe coding
Ce projet reste un très bon exercice, car il montre que même à l'ère de l'IA, architecturer un projet est tout aussi, voir plus important que de le coder. Si je n'avais pas trouver une solution pour héberger le dataset gratuitement, je n'aurais jamais pu lancer le jeu. Et si je n'avais pas pris le temps de réfléchir à l'UX et au design, je n'aurais jamais eu autant de retours positifs sur Reddit.