Duck Hunter HQ

Il existe cette tendance bien réelle et un peu attendrissante où les passagers de croisière cachent de petits canards en caoutchouc décorés partout sur le navire, pour que des inconnus les trouvent. Ça a commencé en 2018 sur le Carnival Breeze et c'est devenu une communauté Facebook de près de 300 000 personnes, quelque chose de physique avec une grande communauté mais aucun foyer numérique. Alors j'en ai construit un. Vous trouvez un canard, scannez son QR, voyez le profil créé par celui qui l'a caché, et signez le registre. À partir de cette seule boucle, j'ai ajouté des collections, une montée en niveau façon RPG, des classements navire contre navire, un globe 3D qui tourne, et un mini-jeu d'arcade. Un pur plaisir à construire.

• Boucle centrale scanner-et-signer : trouver un canard, scanner son QR, voir le profil, enregistrer la prise, en quelques taps
• Connexion anonyme sans friction, pour qu'un joueur enregistre une prise instantanément et ajoute son e-mail plus tard sans perdre son historique
• Progression façon RPG avec XP, niveaux automatiques, paliers de rareté, badges, et statistiques de puissance sur chaque canard
• Classements de flotte navire contre navire, pour que des croisières entières s'affrontent
• Un créateur de canard et un flux de génération où ceux qui cachent personnalisent et impriment la carte QR de leur propre canard
• Un mode croisière hors ligne, parce que le wifi des navires est mauvais. Tout continue de fonctionner en mer et se synchronise à la reconnexion

• Construit à la pointe : Next.js 16 App Router avec React 19, en utilisant la nouvelle convention proxy.ts plutôt que le middleware
• Architecture hors ligne par défaut avec des files IndexedDB. Les découvertes et l'activation des canards sont capturées hors ligne et vidées au retour du wifi, entièrement testées en unitaire avec fake-indexeddb
• Une configuration client Supabase à trois niveaux (navigateur, serveur lié aux cookies avec RLS, admin secret) avec une authentification via getClaims plutôt que getSession
• Postgres fait le gros du travail : colonnes générées pour les niveaux, une vue matérialisée fleet_leaderboard rafraîchie sur un calendrier, et du RLS qui impose des écritures limitées au propriétaire
• Une couche d'intégrité anti-triche : des codes de canard opaques et non énumérables, une limitation de débit, une détection de rafales, et une pondération réduite des découvertes anonymes jamais converties

• Un vrai produit où le physique rencontre le numérique. Le QR code sur un canard en caoutchouc est le cœur battant de toute l'appli
• Un globe 3D interactif (react-three-fiber et r3f-globe) qui affiche en temps réel où les canards sont trouvés dans le monde
• Un système de design pixel néo-brutaliste audacieux, baptisé Chromatic Quest : coins nets, ombres décalées dures, pas de blanc, énergie arcade rétro
• Génération de PDF et d'impression côté serveur pour les cartes physiques des canards (pdf-lib et resvg), qui referme la boucle vers le monde réel

Environ une semaine de construction très intense.

1 semaine · 289 commits

Le plus gros défi a été le wifi des paquebots. Il est peu fiable, donc je ne pouvais pas compter sur une connexion pour l'expérience centrale. Ça m'a poussé vers une vraie architecture hors ligne par défaut, avec des files IndexedDB qui capturent les découvertes hors ligne et se synchronisent proprement à la reconnexion. L'autre point délicat était l'intégrité : comme n'importe qui peut scanner et que l'appli est anonyme par défaut pour rester sans friction, j'ai dû concevoir contre la triche sans ajouter de friction, avec des codes de canard opaques et non énumérables, une limitation de débit, une détection de rafales, et une pondération réduite des découvertes d'utilisateurs anonymes qui ne convertissent jamais.

• Next.js 16 (App Router, proxy.ts)
• React 19
• TypeScript
• Tailwind CSS v4
• Supabase (Postgres, Auth, RLS)
• Three.js via react-three-fiber + drei + r3f-globe
• TopoJSON / world-atlas
• Stripe
• @yudiel/react-qr-scanner + qrcode
• IndexedDB (offline sync)
• pdf-lib + resvg (print generation)
• PostHog
• Nodemailer
• Vitest + Testing Library (fake-indexeddb)
• Vercel (cron)