QRBase
Plateforme Web3 gamifiée
- Rôle
- Développeur Frontend / Full-Stack senior
- Contexte
- Dexaura
- Période
- 2025 — 2026
- En ligne
- qrbase.xyz/puzzle ↗
01 — Vue d'ensemble
Une plateforme numérique gamifiée sur Base : puzzles QR, prix, classements et statistiques communautaires en direct. 2e prix au hackathon Base sur Devfolio (2025).
Le défi
Garder une interface de jeu instantanée et cohérente alors que l'état serveur, les statistiques en direct et les paiements onchain changent en permanence.
Stack
- Next.js
- TypeScript
- TanStack Query
- WebSockets
- Durable Objects
- Solidity
- wagmi
- viem
- Jest
02 — Architecture
Ce que j'ai construit, couche par couche.
- ■ Interface
- ■ API & logique
- ■ Données
- ■ Cloud & livraison
- ■ Qualité & sécurité
- InterfaceNext.js UIAPI & logiqueWebSockets
- API & logiqueWebSocketsCloud & livraisonDurable Objects
- InterfaceNext.js UIInterfaceTanStack Query
- InterfaceTanStack QueryInterfacePrivy · OnchainKit
- InterfacePrivy · OnchainKitDonnéesSolidity on Base
- Cloud & livraisonCron TriggersCloud & livraisonDurable Objects
- InterfaceTanStack QueryCloud & livraisonR2
- Interface
- Frontend Next.js + TypeScript, 50+ composants réutilisables, parcours wallet.
- API & logique
- Stats en direct via WebSockets ; appels API via un cache TanStack Query centralisé (45 % de requêtes serveur en moins).
- Données
- Smart contracts Solidity pour les paiements onchain sur Base.
- Cloud & livraison
- Durable Objects pour les dashboards temps réel, Cron Triggers, images R2.
- Qualité & sécurité
- Chaque changement généré par IA relu ; tests Jest automatisés.
03 — Ce que j'ai fait
- 01
Architecture du frontend Next.js (App Router) et TypeScript avec plus de 50 composants réutilisables pour une UI cohérente.
- 02
Gestion centralisée de l'état serveur et du cache avec TanStack Query : 45 % de requêtes API serveur en moins et mises à jour optimistes.
- 03
Dashboards analytiques temps réel sur Cloudflare Durable Objects et WebSockets, Cron Triggers pour les notifications et R2 pour les images.
- 04
Smart contracts Solidity et parcours de paiement onchain (achat de tentatives de jeu et de packs de publication) avec Privy, Coinbase CDP / OnchainKit, wagmi, viem et ethers.js.
- 05
Workflow assisté par IA (Claude Code, Cursor, GitHub Copilot), avec revue de chaque changement généré et tests Jest automatisés.
04 — Résultats
45 % de requêtes API serveur en moins
Plus de 50 composants réutilisables
2e prix, hackathon Base sur Devfolio (2025)
Sur mobile · même build, site en ligne
