Nature Explore AI

Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass Submission 🌿

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

Nature Explorer AI is an open-source, full-stack web application designed to counter digital screen fatigue by turning outdoor exploration into an engaging, educational adventure.

Instead of keeping users tethered to their desks or doom-scrolling feeds, Nature Explorer AI acts as an intentional, lightweight field companion. When you step outside into a city park, hiking trail, forest reserve, or your own backyard, you can snap photographs of birds, native wildflowers, trees, and insects. The app leverages open-weight vision models to identify species, teach ecological context, highlight distinguishing characteristics, and recommend safe, hands-on outdoor activities.

The complete source code is organized into a clean, modular full-stack architecture:

nature-explorer-ai/ ├── public/ # Favicons, vector logos, and imagery ├── src/ │ ├── components/ │ │ ├── layout/ # Navbar, Footer, PageLayout │ │ ├── home/ # HeroSection, FeatureCards, NatureStats │ │ ├── explorer/ # ImageUploader, ImagePreview, IdentificationResult, ConfidenceIndicator, ExplorationTips │ │ ├── journal/ # JournalCard, EmptyJournal │ │ └── ui/ # Button, Card, Badge, Dialog, Toast │ ├── pages/ # HomePage, ExplorerPage, JournalPage, ActivitiesPage, AboutPage, NotFoundPage │ ├── hooks/ # useLocalStorage, useIdentification │ ├── services/ # aiService, journalService, activityService │ ├── types/ # nature.ts, journal.ts, api.ts │ ├── lib/ # utils.ts, validation.ts │ ├── __tests__/ # Automated test suite (Vitest + JSDOM) │ ├── App.tsx │ ├── main.tsx │ └── index.css ├── server/ │ ├── src/ │ │ ├── routes/ # identification.ts (GET /api/health, POST /api/identify) │ │ ├── services/ # modelService.ts (Provider Abstraction) │ │ ├── middleware/ # errorHandler.ts │ │ ├── types/ # index.d.ts │ │ ├── app.ts │ │ └── index.ts │ ├── package.json │ └── tsconfig.json ├── package.json ├── vite.config.ts ├── tailwind.config.ts └── README.md Enter fullscreen mode Exit fullscreen mode How I Built It 1. Open-Source AI Architecture The backend ( server/src/services/modelService.ts ) implements a clean Model Provider Abstraction ( IModelProvider ) that supports multiple open inference modes:

The project includes automated tests using Vitest and React Testing Library:

Open innovation is essential when building technology designed for the natural world:

This project was built iteratively with pair-programming assistance from the AI agent: