Balls

Gotta catch them balls. A world coin mini app collection game

Balls

Created At

ETHGlobal Taipei

Project Description

This is a social collection app built around Worldcoin's identity verification system. The core concept is similar to collecting trading cards or Pokémon, but instead of fictional characters, users collect verified Worldcoin users. The playful name "Gotta Catch Them Balls!" is a reference to Worldcoin's iris scanning technology (the "balls" being the eyes).

How it's Made

  1. Worldcoin Verification Users must first verify their humanity using Worldcoin's iris scanning technology This ensures each user is a unique human (no bots or duplicates) Verification is done through the Worldcoin Mini App SDK Once verified, users receive a verification token stored in localStorage
  2. User Collection System Verified users can "collect" other Worldcoin users Each user can only be collected once (preventing duplicates) Collections are stored locally in the browser Each collected user is represented with: A unique ID Their Worldcoin address (partially masked for privacy) The collection timestamp
  3. User Interface The app has three main pages: Home Page (/) Features the main tagline "Gotta Catch Them Balls! 🎯" Shows verification status Provides access to verification and collection features Displays a grid of feature cards explaining the app's functionality Shows a notification when a new user is collected Verification Page (/verify) Handles the Worldcoin verification process Uses the WorldIDWidget component for verification Shows success message and redirects to collection page Stores verification status in localStorage Collection Page (/collection) Displays all collected Worldcoin users Shows collection statistics Each collected user is displayed in a card with: An eye icon (representing the iris scan) The collection date A partially masked Worldcoin address Empty state message when no users are collected Technical Implementation Frontend Architecture Built with Next.js 14 and TypeScript Uses React hooks for state management Implements client-side routing Responsive design using Tailwind CSS Modern UI with animations and transitions Data Storage Uses localStorage for persistence Stores two main pieces of data: Verification status (worldcoin_verified) Collection data (collected_users) Worldcoin Integration Uses the Worldcoin Mini App SDK Implements verification through the WorldIDWidget Requires a Worldcoin App ID for authentication Handles verification success/failure states Security Features Verification required before accessing collection One-time collection per user Address masking for privacy Client-side verification checks User Flow User visits the app If not verified: Clicks "Verify Yourself" Completes Worldcoin verification Gets redirected to collection page If verified: Can view their collection Can collect other users Each collection attempt verifies the target user Success notifications appear for new collections
background image mobile

Join the mailing list

Get the latest news and updates