LifeDex: A Real-World Pokédex to Get You Outside 🌿
This is a submission for the Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass
What I Built
LifeDex is a mobile-first, responsive web application designed to act as a real-world Pokédex for flora and fauna. Users can step outside, capture photos of plants, animals, and birds, and instantly identify them to add to their personal "My Dex" collection.
The goal is to gamify nature exploration. By making the outdoors interactive and rewarding, LifeDex encourages users—whether they are kids, hikers, or just casual walkers—to get off their screens, touch some grass, and genuinely engage with the biodiversity in their own neighborhoods.
Demo
You can try out the live application here: LifeDex Live Demo
(Insert your locally recorded demo video here!)
Code
LifeDex — Real-World Pokédex for Flora & Fauna 🌿🦅🐞
LifeDex is a mobile-first, responsive web application designed as a real-world Pokédex. It empowers nature lovers, hikers, and explorers to identify, register, and catalogue wild plants, animals, birds, insects, and fungi into a gamified collection.
🌟 Key Features
1. Optical Viewfinder HUD & Scanner
- Target Reticle & Brackets: Sci-Fi biometric HUD overlay with crosshairs, GPS telemetry coordinates, ISO indicators, and targeting brackets.
-
Dual Capture Methods:
-
Take Photo: Directly triggers the camera input (
accept="image/*" capture="environment") or live webcam video stream in the viewfinder. - Upload Image: Opens the native file browser.
-
Take Photo: Directly triggers the camera input (
- One-Click Presets: Quick specimen samples (Monarch Butterfly, Monstera, Blue Jay, Fly Agaric) for rapid testing without needing immediate photos.
2. Futuristic Radar Scanning State
- Cyber-Biometric Radar Animation: Superimposed rotating radar cone, pulsating biometric concentric rings, and laser scanline beam sweeping vertically over the specimen.
- Live Telemetry Ticker: Realistic scan statuses…
How I Built It
As a novice to coding, I relied heavily on AI assistance and open-source tools to bring this idea to life. I used the Antigravity IDE to "vibecode" the initial structure, UI components, and deployment pipeline.
The project is built on a modern frontend stack:
Vite & React for a fast, component-based architecture.
Tailwind CSS for a sleek, nature-meets-tech UI featuring glassmorphism effects.
Lucide React for lightweight iconography.
HuggingFace Inference API to power the open-source image classification engine that identifies the species.
Why Does Open Innovation Matter?
Open innovation is the only reason this project exists. Utilizing open-source vision models via HuggingFace allowed me to integrate powerful AI without the massive overhead, vendor lock-in, or restrictive paywalls of closed APIs. Furthermore, open-source frameworks like React and Vite, combined with AI coding assistants, democratize the creation process. They empower beginners to build and deploy complex, real-world applications that would have been completely out of reach just a few years ago.
My Agent Session
I generated the core application structure, UI components, and mock classification logic using Antigravity IDE, and then worked with an AI assistant to troubleshoot and configure my deployment pipeline to GitHub Pages.
Prize Categories
"Google Gemma"
Touch Grass Challenge(week1)
Thank you for reading
Top comments (0)