EcoQues-turn Screen Time Into Outside Time

Pankaj Maity — Wed, 07 Oct 2026 11:39:50 +0000

EcoQuest — Turn Screen Time Into Outside Time

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

What I Built

EcoQuest is an AI-powered outdoor habit-building web app designed to help people turn screen time into real-world exploration.

Instead of simply telling people to "spend less time on their phones," EcoQuest gives them something specific to do outside.

Users choose:

How much time they have
Their environment
Their mood
Their difficulty level

EcoQuest then uses Google Gemma 4 to generate a personalized outdoor quest.

For example, a user might choose:

20 minutes · Park · Curious · Easy

and receive a quest such as The Tree Detective, with simple observation and exploration steps they can complete outdoors.

The experience then continues with:

Choose → Generate → Explore → Complete → Earn XP → Build a Streak → Journal

The app tracks outdoor minutes, completed quests, XP, nature streaks, and personal field notes locally in the browser.

EcoQuest is built around a simple idea:

The goal isn't to spend more time on another app. It's to spend less time on screens and more time in the real world.

Demo

Live Demo: https://ecoquest-txcy.onrender.com/
The live application demonstrates the complete experience:

Choose quest preferences
Generate a personalized quest with Gemma 4
Start the outdoor quest
Complete the timed experience
Earn XP and increase outdoor time
Build a nature streak
Automatically create a journal entry

Code

GitHub: https://github.com/pnkj006/EcoQuest

The project is built as a small, focused MVP with the AI generation layer separated from the frontend.

How I Built It

EcoQuest is built with:

React
Vite
JavaScript
Google Gemma 4
Gemini API
Node.js
localStorage
CSS

The core architecture is:

React Frontend
      ↓
/api/generate-quest
      ↓
Node.js Server
      ↓
Gemma 4
      ↓
Structured Quest JSON
      ↓
Personalized Outdoor Quest

The user preferences are sent to a server-side API endpoint. The server asks Gemma 4 to generate a structured quest containing the title, duration, environment, difficulty, description, steps, and optional bonus challenge.

I used Gemma 4 (gemma-4-26b-a4b-it) because the quest-generation task is short, structured, and highly adaptable to user preferences.

The model is instructed to create realistic and safe outdoor activities without requiring special equipment. It also avoids dangerous activities, unsafe road crossings, approaching wildlife, disturbing plants or animals, and entering restricted/private areas.

The rest of the application is intentionally lightweight. User progress is stored locally using localStorage, so the MVP does not require authentication or a database.

Why Does Open Innovation Matter?

For EcoQuest, the AI model isn't just an additional feature. It is the component responsible for turning a user's mood, available time, and surroundings into an actionable outdoor experience.

Using an open-weight model such as Gemma gives the project a path beyond a single closed AI provider.

Because Gemma is an open-weight model, the quest-generation layer can potentially be adapted, fine-tuned, evaluated, or eventually self-hosted as the project grows.

That matters for a project like EcoQuest because the goal is not simply to generate text. The long-term goal is to create an AI system that understands different environments and creates useful, safe, context-aware experiences while keeping the underlying technology more open and adaptable.

For this MVP, Gemma made it possible to experiment with that idea without building a large recommendation system or manually creating hundreds of quests.

My Agent Session

I built EcoQuest with an AI-assisted development workflow and used Antigravity throughout the project for implementation, testing, debugging, and iteration.

The development process included:

Building the initial React/Vite application
Designing the editorial outdoor-focused interface
Integrating Gemma 4
Building the quest timer and completion flow
Implementing XP and streak tracking
Adding automatic journal entries
Adding journal deletion
Testing localStorage persistence
Fixing calendar/timezone issues in streak calculation
Testing responsive behavior
Preparing the project for deployment

Prize Categories

Best Use of Gemma

EcoQuest is entering the Best Use of Gemma category.

Gemma 4 is used as the core AI engine for personalized outdoor quest generation. The model directly transforms the user's selected time, environment, mood, and difficulty into structured quests that drive the main product experience.

What's Next

EcoQuest is currently an MVP, but there are several directions I would like to explore:

Weather-aware quests
More environment-specific challenges
Richer quest history and analytics
Optional location-aware exploration
More advanced personalization
Optional cloud synchronization
Exploring local or self-hosted Gemma inference

For now, the most important thing is simple:

Close the laptop. Go outside. Complete a quest.

new to community

Pankaj Maity — Mon, 05 Oct 2026 08:45:36 +0000

hello everyone

DEV Community: Pankaj Maity