DEV Community

Saran Soundharajan
Saran Soundharajan

Posted on

GrassQuest: A 30-Second App That Sends You Outside (my pick: short and clear)

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

GrassQuest is a tiny web app with one goal: spend 30 seconds on the screen, then go outside.

You choose three things:

  • Time: 10, 20 or 45 minutes
  • Surroundings: street, park, campus or terrace
  • Energy: chill, normal or active

It checks your local weather and generates a mission card with 4-5 small, safe outdoor tasks. For example: find the largest tree in sight and look at its bark, listen for one full minute and count the different bird calls, or walk back with your phone in your pocket.

Most apps try to keep you looking at the screen. I wanted the screen to be the shortest part of the experience, so I added:

  • πŸ“΅ Phone Away mode: a plain countdown screen that says "Go outside. Come back when the timer ends."
  • πŸ–¨οΈ Print and πŸ“Έ download as image: take the card with you on paper or as a saved image, so you don't need to keep the app open.
  • 😊 A tiny reflection screen after your walk (Refreshing, Peaceful or Energized).

It's for anyone who spends too much time on a screen and wants a nudge to step outside without planning anything. There's no login, no accounts and no tracking.

Demo

πŸ”— Live app: https://grassquest-76mk.onrender.com/

(Hosted on a free tier, so the first load may take a few seconds to wake up.)

Code

🌿 GrassQuest

Get off the screen in under 30 seconds, then go outside.

GrassQuest is a lightweight, calm, nature-themed web app built with React (Vite) and Express. It generates 4-5 quick, actionable, safe outdoor micro-missions based on your available time, surroundings, energy level, and live local weather.

No login, no user accounts, no tracking, no friction.


✨ Features

  • ⚑ Under 30-Second Setup: Select your time available (10/20/45 min), surroundings (street/park/campus/terrace), and energy level (chill/normal/active).
  • β›… Live Weather Auto-Detection: Uses browser geolocation + Open-Meteo API (no key required). Includes a city search fallback input.
  • πŸ€– Gemma / Gemini AI Generation: Generates safe, engaging 4-5 outdoor task cards tailored to weather and surroundings.
  • πŸ“Έ Download as Image: Export your mission card as a PNG using html-to-image.
  • πŸ–¨οΈ Clean Print Mode: Custom print stylesheet to print crisp mission cards on paper.
  • πŸ“΅ Phone Away Mode: Full-screen minimal countdown timer screen instructing…

How I Built It

Stack: React (Vite) frontend, Express backend, optional MongoDB Atlas with Mongoose, deployed on Render. Express serves the built React app, so it's one deployable service.

Open-source AI: Gemma, Google's open-weight model, called through Google AI Studio. The prompt includes the time, surroundings, energy level and live weather, and asks for strict JSON: a title, a short intro and 4-5 tasks. The server parses and validates that JSON before showing it.

Weather: the browser's geolocation plus the Open-Meteo API, which is free and needs no API key. If location is blocked, there's a city search fallback.

Making it reliable:

  • A curated set of fallback missions means the app still works if the AI call fails or no key is set.
  • Rate limiting, Helmet and CORS on the API.
  • The prompt asks for safe, free tasks that don't need buying anything or going somewhere risky.
  • Saving cards to MongoDB Atlas is optional and stores no personal data.

Running it fully local: the README includes a path for running the same prompt with Ollama + Gemma, so mission generation can work on a laptop with no external API.

Why Does Open Innovation Matter?

This app sends your location-based context (weather and where you are) into a prompt, and it's meant to be used in everyday life, often outdoors. An open-weight model fits that well:

  • Local option: because Gemma's weights are open, the same prompt can run through Ollama on your own machine with no internet. That's a better match for a "go outside" app than something that depends on a remote service.
  • Privacy: your location and habits don't have to go to a provider you don't control.
  • Cost: it can run free, which matters for a tool that's supposed to be something anyone can use.
  • Swappable and tunable: I can change the model, or later adapt its tone (calm, playful, kids' mode) without being tied to one vendor.

Prize Categories

  • Best Use of Gemma: Gemma generates every mission card.
  • Best Use of Render: the full-stack app is deployed on Render.
  • Best Use of MongoDB Atlas: generated cards are stored in Atlas. *

Top comments (0)