This is a submission for Weekend Challenge: Dog Days Edition
What I Built
PawPrint is a web application that lets dog owners transform their real-life furry companions into fully playable, custom RPG character cards!
By up a photo of their pup and taking a quick personality quiz (covering habits like where they sleep, how they react to the doorbell, or their behavior on walks), users can forge high-fidelity RPG cards. The app generates:
RPG Class: Including archetypes like Bark Mage, Treat Paladin, Nap Rogue, and Chaos Ranger.
Rarity: Grading from Common, Uncommon, Rare, Epic, up to Legendary.
Stats: HP, Attack, Defense, and Speed based on the quiz questions and card rarity.
Unique Abilities: Fun, class-specific active, passive, and ultimate abilities with comedic lore descriptions.
Weaknesses & Backstories: Tailored backstory bios explaining their origin and a hilarious weakness (like "The Dreaded Vacuum Cleaner" or "Baths").
Beyond card generation, the app features:
Persistent Deck Roster: Keep track of all generated dogs, stored offline in the browser's localStorage.
Deck Management: Full search and sorting controls (by name, breed, date, and stats), and filters by RPG Class or Rarity.
Interactive Battle Arena: A turn-based combat simulator where you can duel two dogs, or test your dog's mettle against built-in legendary AI bosses like Sir Mailman (Letter Knight) or The Dreaded Vacuum (Chaos Devourer).
Instant Card Sharing: Share individual dogs using encoded query-string URLs (?card=...) that allow other users to view and import the card with a single click.
Theme Support: Seamless toggle between sleek dark and clean light modes.
Demo
You can try the live app here: PawPrint Live Site (Replace this with your actual deployed URL!)
(To see it in action without configuring an API key, the app runs in local Demo Mode with a deterministic rule-based generator!)
Code
The project is fully open-source and hosted on GitHub:
PawPrint is an AI-powered tabletop RPG character card generator for dog owners. By up a photo of their dog and answering a short personality quiz, users can forge a high-fidelity RPG card complete with customized stats, unique abilities, comedic weaknesses, and a custom lore backstory.
The project features a client-side implementation of the Google Gemini API, a persistent roster of saved cards, and an interactive Battle Arena where dogs can face off against each other or challenge legendary AI opponents.
How I Built It
🛠️ The Tech Stack
Framework: React 19 + TypeScript + Vite (for lightning-fast HMR and type-safety) Styling: Tailwind CSS v4 + Vanilla CSS Custom Tokens (enabling easy light/dark mode configuration)
AI Core: Google Generative AI SDK (@google/generative-ai) Icons: Lucide React
Exporting: html-to-image (allowing users to download their cards as PNG images) Testing: Vitest (for core game logic and storage helper tests)
🧠 Google Gemini Integration
PawPrint relies on the Google Generative AI SDK, querying the Gemini 2.5 Flash model directly from the client. When a user submits their pup's photo and quiz answers, we build a multimodal prompt:
Multimodal Inputs: We pass the compressed image base64 data and the options chosen during the quiz.
Structured JSON Output: To make the generation reliable, we utilize the SDK's responseMimeType: 'application/json' configuration, forcing Gemini to respond with a JSON payload that perfectly fits our TypeScript DogCharacter interface. This eliminates the need for messy string parsing or regex matching.
Local Mock Fallback: In the absence of an API key, we wrote an offline character engine (src/services/gemini.ts) that uses the quiz options' mathematical modifiers to calculate stats, choose classes, and assign preset abilities—providing a seamless demo mode experience.
💾 Canvas Image Compression
Because we want cards to persist in browser storage, we had to solve a major limitation: localStorage is capped at roughly 5MB. Standard mobile phone photos are often 3MB–10MB, which would immediately crash the storage. To solve this, the ImageUp component loads uploaded images into an HTML5 element, downscales them to a maximum boundary of 500px (preserving aspect ratio), and encodes them as a JPEG with a quality factor of 0.85. This compresses the base64 string to just 20–50KB, allowing users to save dozens of cards effortlessly.
⚔️ turn-Based Battle Engine
The Battle Arena simulator uses a custom deterministic scoring system (src/utils/scoring.ts):
Turn Order: The dog with the highest Speed stat acts first.
Elemental Advantages: We coded a rock-paper-scissors class advantage system: Bark Mage beats Treat Paladin -> Treat Paladin beats Nap Rogue -> Nap Rogue beats Chaos Ranger -> Chaos Ranger beats Bark Mage. A class advantage boosts final damage by 25%.
Combat Logic: Turn damage is calculated as (Attack / (Defense * 0.8)) * 15 * advantage. Round 1 triggers passive abilities, subsequent rounds utilize basic pounces, and dropping below 40% health triggers massive ultimate moves!
Prize Categories
This project is submitted for:
Best Use of Google AI: Featuring a clean client-side implementation of the Gemini 2.5 Flash model with the official @google/generative-ai SDK. It demonstrates the strength of multimodal prompts (image + text) combined with structured JSON outputs, showing how developers can leverage Gemini to build immersive, interactive gamified experiences in a lightweight serverless frontend.