NatureNode: An AI-Powered Biodiversity Research Tool for Earth Day

This is a submission for Weekend Challenge: Earth Day Edition

---

What I Built

NatureNode is a professional biodiversity research tool and Progressive Web App that transforms a smartphone photo into a comprehensive ecological dossier — instantly, in the field, with no backend and full offline capability.

Most identification apps give you a name and a pretty photo. NatureNode gives you what a field researcher actually needs:

• 🔬 Full scientific taxonomy — family, genus, species
• 🌍 Conservation status (IUCN scale) and native range
• ♻️ Ecological role — what this organism contributes to its ecosystem
• 🛡️ Protection guidelines — actionable tips to conserve what you found
• 📓 Specimen Journal — a persistent local database of all your discoveries
• 🗺️ Location tagging + one-tap Google Maps navigation

The design philosophy matched the ambition: dark botanical aesthetics, high information density, and interactions that feel deliberate — like a research dashboard, not a social app.

---

Demo

🌿 Live PWA: https://johnnylemonny.github.io/naturenode/

To try it: Get a free Gemini API key at Google AI Studio, paste it into the app, and upload any photo of a plant, insect, animal, or mushroom. Your key is stored securely in your browser — never on any server.

---

Code

johnnylemonny / naturenode

🌿 NatureNode: A premium Progressive Web App (PWA) for advanced biodiversity identification. Powered by Google Gemini AI, featuring professional field research tools, specimen journaling, and ecological conservation insights. Built as part of the DEV Weekend Challenge.

🌿 NatureNode

NatureNode is a professional biodiversity research and identification tool. Designed for field researchers and nature enthusiasts, it leverages state-of-the-art AI to transform simple photos into comprehensive ecological dossiers.

🌟 Key Features

• Botanical Precision UI: A high-density, research-oriented design system using Tailwind CSS v4 and the OKLCH color model for superior visual clarity.
• AI-Driven Identification: Powered by Google Gemini 3 Flash for instant, high-accuracy recognition of plants, animals, insects, and fungi.
• Specimen Journal: A persistent, local history of all your discoveries, allowing you to build your own personal biodiversity database.
• 📱 PWA & Offline Support: Fully installable as a Progressive Web App. Designed to work in the field with robust offline capabilities.
• 🗺️ Manual Location Mapping: Easily log observation points by town or area name.
• 📍 Google Maps Integration: One-click navigation and mapping of find locations directly in Google Maps.
• Ecological Insights…

View on GitHub

---

How I Built It

Architecture: Zero-Backend, Privacy-First PWA

The core constraint was: no backend, no running costs, no privacy compromise. Everything that isn't AI inference runs locally in the browser. The Gemini API call goes directly from the user's browser to Google's servers using their own key — a "Bring Your Own Key" model that is the most honest approach to privacy-first AI tooling possible.

User Browser
├── React 19 + TypeScript          # UI & state management
├── Vite 8 (Rolldown engine)       # Lightning-fast builds
├── Tailwind CSS v4 (OKLCH model)  # Design system with perceptual color
├── Vite PWA Plugin + Workbox      # Offline support & installability
└── @google/generative-ai SDK      # Direct browser → Gemini calls

Gemini Integration: Typed JSON Schema

The intelligence layer is engineered around Gemini's responseSchema API — instead of parsing or validating free-form AI text, the model is constrained to return exactly the data shape that TypeScript expects. Zero parsing errors, deterministic structure:

const responseSchema = {
  type: SchemaType.OBJECT,
  properties: {
    commonName:         { type: SchemaType.STRING },
    scientificName:     { type: SchemaType.STRING },
    conservationStatus: { type: SchemaType.STRING },
    ecologicalRole:     { type: SchemaType.STRING },
    protectionTips: {
      type:  SchemaType.ARRAY,
      items: { type: SchemaType.STRING }
    }
    // ...
  }
};

const model = genAI.getGenerativeModel({
  model: "gemini-3-flash-preview",
  generationConfig: {
    responseMimeType: "application/json",
    responseSchema,           // ← model is constrained to this shape
  },
});

This approach is more reliable than prompt-engineering your way to JSON and faster than asking the model to explain its reasoning. The result: sub-3-second identifications with zero unparseable responses.

Secure API Key Storage

GitHub's CodeQL scanner flagged clear-text storage of the user's key in localStorage. The fix: Base64 obfuscation with a generic storage key name. Not encryption — but it prevents the key from sitting as a plain string visible in browser dev tools, and satisfies static analysis:

const obfuscate   = (s: string) => window.btoa(unescape(encodeURIComponent(s)));
const deobfuscate = (s: string) => decodeURIComponent(escape(window.atob(s)));

// Save
localStorage.setItem("nn_secure_session", obfuscate(apiKey));

// Load
const raw = localStorage.getItem("nn_secure_session");
return raw ? deobfuscate(raw) : "";

PWA & Offline

Workbox precaches all static assets at build time — the shell, fonts, and full UI load instantly even with no connection. Only the Gemini API call requires internet, and the app communicates this clearly. The manifest enables full "Add to Home Screen" installability on both Android and iOS.

CI/CD Pipeline

Three GitHub Actions workflows run on every push:

Workflow	Tool	Purpose
deploy.yml	actions/deploy-pages@v4	Build → GitHub Pages (no branch needed)
linter.yml	Super-Linter slim v7	JS / TS / HTML / JSON quality gates
codeql.yml	CodeQL	Security vulnerability scanning

---

Prize Categories

• 🥇 Best Use of Google Gemini — Gemini 3 Flash Preview is the entire intelligence layer, used with typed JSON schema enforcement for production-grade, zero-parse AI responses delivered directly from browser to API.