← WorkSC.02 / 09

QRBase

Gamified Web3 platform

Role
Senior Frontend / Full-Stack Developer
Context
Dexaura
Period
2025 — 2026
QRBase puzzle screen with a timer, a prize counter, level indicator and a 'Connect to Play' panel
Live puzzle page, captured Nov 2026 (signed-out view).Fig. 02

01 — Overview

A gamified digital platform on Base: QR puzzles, prizes, ranks and live community stats. Won 2nd Prize at the Base hackathon on Devfolio (2025).

The challenge

Keep a game-like interface instant and consistent while server state, live stats and onchain payments all change underneath it.

Stack

  • Next.js
  • TypeScript
  • TanStack Query
  • WebSockets
  • Durable Objects
  • Solidity
  • wagmi
  • viem
  • Jest

02 — Architecture

What I built, layer by layer.

  • ■ Interface
  • ■ API & logic
  • ■ Data
  • ■ Cloud & delivery
  • ■ Quality & security
  1. InterfaceNext.js UIAPI & logicWebSockets
  2. API & logicWebSocketsCloud & deliveryDurable Objects
  3. InterfaceNext.js UIInterfaceTanStack Query
  4. InterfaceTanStack QueryInterfacePrivy · OnchainKit
  5. InterfacePrivy · OnchainKitDataSolidity on Base
  6. Cloud & deliveryCron TriggersCloud & deliveryDurable Objects
  7. InterfaceTanStack QueryCloud & deliveryR2
Interface
Next.js + TypeScript frontend, 50+ reusable components, wallet flows.
API & logic
Live stats over WebSockets; API calls through a centralised TanStack Query cache (45% fewer server requests).
Data
Solidity smart contracts for onchain payments on Base.
Cloud & delivery
Durable Objects for real-time dashboards, Cron Triggers, R2 images.
Quality & security
Every AI-generated change reviewed; Jest tests automated.

03 — What I did

  1. 01

    Architected the Next.js (App Router) and TypeScript frontend with 50+ reusable components for a consistent UI.

  2. 02

    Centralised server state and caching with TanStack Query: 45% fewer server API requests and optimistic UI updates.

  3. 03

    Real-time analytics dashboards on Cloudflare Durable Objects and WebSockets, Cron Triggers for notifications and R2 for images.

  4. 04

    Solidity smart contracts and onchain payment flows (buying play attempts and post-publishing packages) with Privy, Coinbase CDP / OnchainKit, wagmi, viem and ethers.js.

  5. 05

    AI-assisted workflow (Claude Code, Cursor, GitHub Copilot), with every generated change reviewed and Jest tests automated.

04 — Results

  • 45% fewer server API requests

  • 50+ reusable components

  • 2nd Prize, Base hackathon on Devfolio (2025)

On a phone · same build, live site

QRBase, mobile
Next project · SC.03VideoKit →