project screenshot 1
project screenshot 2
project screenshot 3

TicTacToe on World

Play verified-human Tic-Tac-Toe inside World App—powered by World ID in under a minute!

TicTacToe on World

Created At

ETHGlobal Prague

Project Description

World Tic-Tac-Toe is a mini application that runs entirely inside World App. It lets two users who have verified themselves with World ID play a fast game of tic-tac-toe against each other. By putting World ID’s proof-of-personhood step in front of the board, the game guarantees that every opponent is a unique human and not a bot, which is essential for fair play and for any future prize or wagering features.

The project is built with World’s official Mini Kit on top of Next.js 15 and React 18. The user interface is a simple nine-square board rendered with Tailwind CSS. When a visitor taps “Play”, the client calls the Mini Kit verify command; the World App pops up its familiar Orb-level verification flow, and on success the app receives a cryptographic proof. The proof is sent to a serverless API route that calls verifyCloudProof; only if the proof is valid does the frontend render the board. This pattern follows the recommended architecture in the Mini Kit documentation and keeps private user data on the device.

Gameplay is managed completely on the client for this hackathon version: state hooks track the board, whose turn it is, and whether there is a winner or a draw. The logic is contained in fewer than sixty lines of TypeScript. After a game ends, players can reset with a single button. Because verification prevents multi-accounting, we can safely extend the project after the hackathon with remote multiplayer, bets paid in WLD or USDC via the Mini Kit pay command, and on-chain scorekeeping if desired.

The codebase is intentionally small and transparent: one layout wrapper that injects Mini KitProvider, two pages (home and game), a single API endpoint, and three lightweight components. Environment variables for app_id and action_id are the only configuration steps. Developers can clone, install, add their World developer portal IDs, and deploy to Vercel in minutes.

In summary, World Tic-Tac-Toe demonstrates how World ID can secure even the simplest casual game, showcases clean Mini Kit integration, and leaves ample room for hackathon judges to imagine richer social and economic layers on top of a universally understood pastime.

How it's Made

We started with the official World Mini Kit “Next.js + TypeScript” template, which gave us a bare-bones Next 15 project already wired for Mini Kit. Everything lives in a single monorepo folder so Vercel can deploy it with zero config.

The front end runs React 18 inside the new app router. A global MiniKitProvider in app/layout.tsx injects the World App bridge, so any component can call Mini Kit commands. We styled all UI with Tailwind CSS utility classes to avoid a component library overhead; that kept the bundle extremely small and let us prototype screens in minutes. Game state is managed with vanilla React hooks—an array of nine slots, a boolean for whose turn it is, and a helper that checks the eight winning line permutations.

When a user presses “Play” we invoke MiniKit.commandsAsync.verify with VerificationLevel.Orb and our action_id. On success the proof object drops into the client. We POST that payload to /api/verify, a serverless route that calls verifyCloudProof with the app_id and action_id. Because verifyCloudProof talks to World’s cloud verifier, we never expose our API key or touch blockchain RPCs directly; the helper abstracts it away. The endpoint answers true or false, and only a true result unlocks the board component on the client.

Build tooling is the default Next compiler (SWC) plus pnpm for package management. We use TypeScript strict mode everywhere so mistakes are caught before deploy. Environment secrets (APP_ID, ACTION_ID, ALCHEMY_KEY) live in Vercel’s dashboard and are referenced at build time. Hot reloading works inside World App because Mini Kit auto-reconnects to localhost through its dev tunnel.

For hacky tricks: we added a tiny hook called useMiniKit that runs MiniKit.isInstalled() on mount. If false, we know the page is being opened in a normal browser preview; we then render a dummy board so web judges can still click around without the mobile app. Another shortcut is that we piggy-back on the World App QR dev tunnel for multiplayer demos—both phones point to the same local URL and pass their proofs, so we can test peer logic without a public host.

Partner technology wins: World Mini Kit removed all the heavy lifting around wallets, proof generation, and UI chrome. Next.js gave us an edge-optimized API route free of charge, so total infra cost is zero. Tailwind made the design consistent with fewer than fifty classes. Altogether the stack let us go from ‘npm create’ to a working, verified tic-tac-toe game in under five hours.

background image mobile

Join the mailing list

Get the latest news and updates