BioVigil

💡 Inspiration Invasive species are one of the leading drivers of global biodiversity loss, destroying native habitats and costing the global economy billions. However, the people on the front lines, park rangers, ecologists, and conservationists often work in deep forests or remote areas with zero cellular service.

Most current conservation apps rely on cloud-based APIs. When a ranger is offline, these apps become useless. We built BioVigil to solve this: an offline-first, visually immersive tool that empowers anyone to detect, report, and understand invasive threats, regardless of their internet connection.

🌿 What it does BioVigil is a 3D interactive web platform designed for rapid invasive species detection and habitat tracking.

Offline First-Edge Scanner: Users can upload an image or use their camera to "scan" a threat. The app processes the request locally, identifying whether the subject is an Invasive Plant, Insect Pest, or Soil Pathogen, and provides immediate eradication protocols. Interactive Threat Map: A beautiful, interactive map visualizes detection hotspots, allowing users to see the spread of invasive species in their local biome. Actionable Intelligence: Instead of just naming the species, BioVigil tells the user why it is dangerous and how to safely report or remove it.

🛠️ How we built it We wanted to prove that environmental tech doesn't have to look like a boring spreadsheet. We combined high-end 3D web graphics with a robust, offline-capable architecture. Frontend & 3D Built with React and Vite, utilizing @react-three/fiber and @react-three/drei to create an immersive, rotating 3D ecosystem splash screen and interactive UI elements. Styling: Styled with Tailwind CSS using a custom "Lilac & Nature" design system to create a modern, calming, yet urgent aesthetic. Data Architecture: We structured our local data to perfectly mirror the schema of the Global Biodiversity Information Facility (GBIF), ensuring that when the app eventually connects to the internet, the data can be seamlessly pushed to global databases.

🚧 Challenges we ran into Balancing 3D and Performance: Rendering 3D models in the browser can be heavy. We had to optimize our @react-three/fiber components to ensure the app runs smoothly on mobile devices in the field. The "Offline" Constraint: Designing a system that feels fully functional without relying on heavy, paid external APIs forced us to architect a robust local data structure. We had to simulate the AI analysis flow to ensure the user experience remains uninterrupted in dead zones. 🎉 Accomplishments that we're proud of Offline-First Mindset: We successfully shifted the paradigm from "cloud-dependent" to "edge-ready" conservation tech. Premium UI/UX: We built a truly award-winning, 3D web experience that makes environmental data feel accessible, engaging, and futuristic.

🔭 What's next for BioVigil True Client-Side AI: Integrating a quantized TensorFlow.js model (like MobileNet) directly into the browser for actual, real-time image classification without a server. Sync-When-Online: Implementing a background service worker that caches local detections and automatically pushes them to the GBIF API and iNaturalist once the user returns to an area with Wi-Fi. AR Overlays: Adding WebXR support to allow users to view 3D eradication markers overlaid on the real world through their phone cameras.

📝 Attribution & Data Sources 3D Assets & UI Design: Custom built using React Three Fiber and Tailwind CSS. Data Structure: Mock data schemas modeled after the Global Biodiversity Information Facility (GBIF) and USGS Nonindigenous Aquatic Species database structures. Images: All environmental photography sourced via Unsplash (licensed for free use). Icons: Lucide React (Open Source).n

Built With

• css
• framer
• javascript
• motion
• react
• tailwind
• three.js
• vite