TouchGrass 🌿 — Turn Screen Time into Green Time

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

What I Built

TouchGrass is a mobile-first app that encourages people to step away from their screens, explore the outdoors, and build a habit of noticing the world around them.

Instead of endlessly scrolling, users can choose from three activities:

• 🚶 Walk — Take a break and pay attention to your surroundings.
• 🌱 Nature — Photograph something in nature and use on-device AI image labeling to help identify what's in the picture.
• 🧭 Explore — Discover something new, capture the moment, and keep it in your personal journal.

Completed activities contribute to progress tracking, helping users turn small outdoor moments into a lasting habit.

The idea is simple: technology should sometimes encourage us to put our phones away and experience the real world.

Demo

Screenshots: See the TouchGrass repository for more previews.

Intro 1–3	Home

The camera and native AI features are intended for the Android app.

Code

🌿 GitHub: TouchGrass

Built as a Vue application with Capacitor for native Android integration.

How I Built It

I built TouchGrass with:

• Vue 3 + Vite for the application and development workflow.
• UnoCSS for styling a mobile-first interface.
• Pinia for activity, onboarding, and progress state.
• Vue Router for navigation between activities.
• Capacitor to integrate native Android capabilities.
• Google ML Kit Image Labeling via @capacitor-mlkit/image-labeling for on-device image labeling.
• Capacitor Filesystem to prepare local image files for native image analysis.

The Nature activity captures a photo and passes it to the native image-labeling plugin. The returned labels and confidence scores help the app process the discovery. Explore uses photos to preserve outdoor moments, while Walk focuses on completing a simple outdoor activity.

The core experience does not require a custom backend. This keeps the architecture relatively lightweight and reduces the need to send users' photos to a remote service.

Why Does Open Innovation Matter?

Open innovation gives developers the freedom to build experiences that aren't entirely dependent on a remote AI API.

For TouchGrass, native on-device image labeling offers a path toward analyzing photos without uploading them to a third-party inference service. It also makes the AI feature part of the app's real-world activity flow rather than a chatbot that keeps users on their screens.

Using open-source frameworks and native integrations lets me shape the experience around mobile constraints, privacy, and the goal of spending more time outdoors.