World of Coloring

Problem Statement

AI Coloring Pages is a World App Mini App that transforms children's imagination into printable coloring pages using artificial intelligence. Parents simply describe what their child wants to color — whether it's "a friendly dragon having a tea party" or "an astronaut dinosaur on the moon" — and within seconds, the app generates a custom, print-ready coloring page with bold, child-friendly line art optimized for A4 paper. How It Works: The application leverages OpenAI's DALL-E 3 to generate unique coloring pages based on text descriptions. For creative inspiration, users can tap "Generate random idea" which uses GPT-4o to suggest fun, imaginative concepts. The generated images feature thick black outlines on white backgrounds, specifically designed for children ages 4-10 to color easily. World App Integration: Built as a native Mini App using the MiniKit SDK, the application seamlessly integrates with World App's ecosystem. Inside World App, users pay $0.10 USDC per generation through MiniKit's native payment flow — a simple, frictionless cryptocurrency microtransaction. The app also utilizes World App's native share functionality, allowing parents to instantly save or share the generated coloring pages. Technical Stack:Next.js 16 with React 19 and TypeScriptOpenAI API (DALL-E 3 for image generation, GPT-4o for idea suggestions)Worldcoin MiniKit SDK for World App integration and USDC paymentsTailwind CSS with shadcn/ui components The Problem It Solves: Parents often struggle to find engaging, personalized activities for their children. Generic coloring books don't capture kids' unique interests. AI Coloring Pages solves this by letting children's wildest ideas become real coloring pages instantly — giving parents those precious minutes of peaceful, creative playtime while their child colors something truly personal to them.

Solution

How It's Made (Technical Description)Core Architecture: The project is built on Next.js 16 with the App Router, using React 19 and TypeScript for type safety. The frontend uses Tailwind CSS v4 with shadcn/ui components (built on Radix UI primitives) for a clean, accessible interface with a vibrant purple/pink color scheme. AI Integration: Two OpenAI APIs power the core functionality:DALL-E 3 (/api/generate-coloring) — Generates coloring page images from text descriptions. The prompt is carefully engineered to produce child-friendly output: thick bold black lines, minimal details, large open areas for easy coloring, pure white backgrounds, and A4-optimized dimensions. This prompt engineering was crucial — early iterations produced images too detailed for young children to color.GPT-4o (/api/generate-idea) — Powers the "random idea" feature with a tightly constrained system prompt that outputs exactly one creative, kid-friendly sentence. This gives parents inspiration when they're stuck.World App / MiniKit Integration: The app wraps the entire React tree with a custom MiniKitProvider component that calls MiniKit.install() on mount. We detect World App context using MiniKit.isInstalled() with a 100ms delay to ensure the SDK initializes properly. Payment Flow (the hacky part): The payment system uses a 4-step flow:/api/initiate-payment generates a UUID referenceFrontend calls MiniKit.commandsAsync.pay() with USDC token amount (using tokenToDecimals() helper)User confirms in World App's native payment UI/api/confirm-payment validates the transaction Currently using optimistic confirmation — we trust the MiniAppPaymentSuccessPayload status without calling the Developer Portal verification API. This is a hackathon shortcut; production would verify via developer.worldcoin.org/api/v2/minikit/transaction/{id}. MiniKit Features Used:MiniKit.commandsAsync.pay() — USDC micropayments ($0.10 per generation)MiniKit.commandsAsync.share() — Native World App sharing for generated images Tokens.USDC and tokenToDecimals() — Token amount handlingNotable Technical Decisions:Conditional payments: Free in browser, paid only inside World App (detected via isInstalled())Progress simulation: 30-second progress bar during generation to set user expectations for DALL-E 3's response timeDirect OpenAI fetch: Using raw fetch() to OpenAI endpoints rather than the Vercel AI SDK's streaming for simpler image URL handlingBase64 fallback: Images are returned as URLs from DALL-E, but the share functionality handles both URL and base64 formatsDependencies pieced together: Next.js handles routing and API endpoints → OpenAI APIs handle AI generation → MiniKit SDK bridges World App for payments and sharing → Tailwind + shadcn provide the UI layer → All connected through React state management in a single page component.