DEV Community

Krish Mishra
Krish Mishra

Posted on

ZenStep - A Mindful Scavenger Hunt for the Real World

#devchallenge #hf26challenge

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

What I Built

ZenStep is a mobile-first web app designed to get you off your phone and actively engaged with your physical surroundings.

By inputting your environment (e.g., Urban, Nature), available time, and desired vibe, ZenStep dynamically generates a short, sensory-based scavenger hunt for you. But the magic really happens when you click "Start Mission": the app immediately enters a strict "Zen Timer" mode. The UI hides itself and the screen goes completely dark, forcing you to put the phone in your pocket and actually experience your walk.

It’s built for anyone who feels stuck in doom-scrolling loops and needs a gentle, AI-guided push to reconnect with the physical world.

Demo

Screen Recording 2026-10-10 at 7.37.55 PM.mov - Google Drive

favicon drive.google.com

Code

GitHub logo Krish-Mishra / hacktoberFest-Week1

Submission for Week 1 challenge of hacktoberfest

ZenStep 🌿

ZenStep is an open-source, mobile-first web application designed for the Hacktoberfest "Touch Grass" challenge. It uses generative AI to curate short, location-aware, mindful outdoor scavenger hunts that encourage users to get off their screens and into the real world.

Crucially, once a mission begins, ZenStep enters a strict "Zen Timer" mode. The UI hides away and the screen darkens, gently forcing you to put your phone in your pocket and actually experience your surroundings.

🚀 Features

  • AI-Curated Missions: Dynamically generates unique, sensory-based scavenger hunts based on your environment, available time, and desired vibe.
  • Zen Mode: Distraction-free, darkened UI during active missions.
  • Powered by Gemini: Orchestrated using LangChain.js and Google's Gemini Flash models via the AI Studio API.
  • Lightweight: Pure HTML5, CSS3, and Vanilla JavaScript. No build steps, no heavy frontend frameworks.

🛠 Setup & Installation

Since ZenStep is built with Vanilla JS, getting it…

View on GitHub

How I Built It

ZenStep is built entirely using pure HTML5, CSS3, and Vanilla JavaScript—no heavy frontend frameworks required.

At the core of the app is LangChain.js combined with Google's Gemini 3.5 Flash Lite model (accessed via the AI Studio API). The app utilizes LangChain's StructuredOutputParser to ensure the AI always returns the scavenger hunt steps as perfectly formatted JSON arrays, allowing the vanilla JS frontend to instantly render them without complicated regex or string parsing. Everything runs directly in the browser using ES module CDNs.

Why Does Open Innovation Matter?

Building ZenStep highlighted exactly why open innovation is so critical. Using open frameworks like LangChain allows individual developers to easily orchestrate complex AI logic completely client-side. Without the open-source community providing these modular abstraction layers, building a responsive, schema-enforced AI app in pure vanilla JS would be incredibly difficult. Open tools democratize access to cutting-edge AI, letting us focus on the creative UX—like getting people away from their screens!

Prize Categories

  • Google Gemini Prize: ZenStep relies on Google Gemini (Flash Lite) via the AI Studio API for ultra-fast, high-quality mission generation.
  • Open-Source AI Innovation: We utilized LangChain.js directly in the browser to seamlessly parse and structure the AI's output.

Top comments (0)