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.



Top comments (0)