Fauna-Dex: Touch Grass and Catch 'Em All

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass

What I Built

Fauna-Dex is an offline-first Progressive Web App (PWA) that turns your smartphone camera into a Pokédex for real wildlife. Point your phone at a bird, insect, plant, or any creature you find outside — and Fauna-Dex generates a collectible "Monster Card" powered by an open-weight vision model.

The core loop is designed to get people outside first and connected later: you capture photos with no internet required, they queue in your browser's IndexedDB via localforage, and you sync the whole batch to the AI once you're back on a signal. Every synced photo comes back as a styled card with a creative monster name, the real species, a type badge (Grass / Water / Fire / Bug / Poison / Normal / Flying), HP, a skill derived from the animal's actual behavior, and a one-sentence Pokémon-style lore entry.

Who's it for: hikers, birders, naturalists, curious kids, or anyone who wants a reason to look up from their screen and actually notice the living world around them.

Demo

fauna-dex.vercel.app

Code

Alitindrawan24 / Fauna-Dex

How I Built It

Stack: Next.js 14 (App Router) · Tailwind CSS · localforage (IndexedDB) · next-pwa · TypeScript

Open-source AI: The backend route supports two open-weight vision model providers with automatic fallback:

• Google Gemini (gemini-2.0-flash by default) via the GEMINI_API_KEY env var — the fastest path.
• OpenRouter routing to meta-llama/llama-3.2-11b-vision-instruct via OPENROUTER_API_KEY — the original spec model, running on open infrastructure.
• A mock fallback (no keys needed) for local dev and demos. The route strips the data-URI prefix, sends the raw base64 image plus a strict JSON schema prompt to whichever provider is configured, validates the response against the schema at runtime, and returns a clean MonsterCard payload. No SDK — just fetch.

The UI is a Pokédex device shell — a rounded dark-red chassis, a "screen" with a scanline CSS overlay, a big round capture button, and holographic-shimmer cards — built entirely with Tailwind utility classes and a few inline SVGs.

Why Does Open Innovation Matter?

A closed, proprietary vision API would have made this fragile in a specific way: the entire loop capture offline, sync later only makes sense if you trust the analysis endpoint will still exist and be affordable next month. Open-weight models hosted on open infrastructure (OpenRouter, Together AI, or self-hosted) let the sync target be swappable. The model itself is the key artifact, not a vendor's SaaS contract.