This is a submission for the Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass
What I Built
out'n'about is a web app designed to encourage people to step away from their screens and reconnect with the world around them.
out'n'about uses AI to generate outdoor challenges that encourage users to slow down, explore their surroundings, and notice the little things they might usually overlook.
After completing a challenge, users can write down their observations on paper, take a picture of their handwritten notes, and save the experience in their personal journal. AI also helps interpret their handwritten reflections, making it easier to revisit those little outdoor moments later.
It's for users who are looking to get off their screen but are always left with a "now what" feeling. This gives them something refreshing and entertaining to do
Demo
Here's a link to the demo video: https://youtu.be/fLFJYft4Dng
Below are some screen shots:
Code
Here is a link to the repository: https://github.com/Victoria-vee/TouchGrass
How I Built It
I built out'n'about with React and Vite for the frontend, Node.js and Express for the backend, and MongoDB Atlas to store prompts and their journal entries.
The AI component is powered by Gemma 3 4B, an open-weight model run locally using Ollama. I used the model to generate outdoor challenges and help interpret users' handwritten reflections from uploaded photos. Running inference locally allowed me to experiment with an open-weight model without depending on a paid, proprietary AI API.
Why Does Open Innovation Matter?
For a project like out'n'about, open innovation made experimentation more accessible.
Using an open-weight model meant I could explore AI-powered features without building the entire experience around a closed API. Running Gemma locally with Ollama also gave me more control over how I tested and integrated the model. That made it possible for me to learn and build something around an idea I cared about while working with the resources available to me.
I also like that open innovation gives developers room to explore unconventional ideas. AI doesn't always have to be about doing more things on a screen or making existing digital experiences more engaging. It can also help us create experiences that encourage us to step away.
My Agent Session
A snippet of my codex session during the instantiation of my project
I’m building Touch Grass for Hacktoberfest 2026: a small web app that encourages people to step away from screens and spend time outdoors. Inspect the project and verify the development environment before implementation.
The project uses a React + Vite client and a separate Node.js + Express server. The AI provider is local Ollama running Gemma 3 4B. The implementation was kept small and separate across client and server.
Build a calm home screen, then connect its challenge button to the backend. Preserve the visual design and provide loading, error, and retry states.
The frontend challenge flow requests one outdoor activity from the Express API and presents loading, retry, and result states.
Add the outdoor session journey: require paper and pen, let the user go offline, return when ready, and reflect on handwritten notes. Support a note photo and optional typed summary.
The frontend journey includes preparation confirmation, an active session, reflection, photo preview and replacement/removal, and completion. Reflection AI feedback is optional; the selected photo and typed text are retained through request errors.
Add local Gemma reflection feedback and clarification when handwriting is unclear. Diagnose timeout and runtime errors without hiding failures or removing image support.
The Express reflection endpoint reuses the Ollama configuration and returns structured feedback and handwriting interpretation. The client supports follow-up clarification using the original photo and notes, with bounded attempts and retry states.
Connect MongoDB Atlas for one local user. Persist completed quests and reflections, require a handwritten photo for completion, award exactly 5 XP once, and reject reused photo hashes.
The backend uses Mongoose completion records with stable completion IDs, unique photo hashes, and idempotent retries. The journal exposes saved entries and photo references. Photos remain in local server storage rather than MongoDB.
Review and update the open-source README using verified commands, directories, environment variables, and the actual local photo-storage limitation. Do not invent a license.
The README documents the React/Vite and Express/Mongoose/Ollama stack, local setup, the six server environment variables and defaults, usage, contribution guidance, local photo storage in server/uploads, and the repository’s current lack of a license file. The environment example uses safe placeholders.
Refine the full-screen responsive meadow and make the grass divider an upside-down double wave that fades into the page.
The existing meadow artwork now fills the hero viewport below the navbar. The inline divider keeps its aspect-ratio behavior, uses two downward wave layers in matching sage colors, and fades to the page cream at the bottom. The Vite production build passed.
Prize Categories
- Best use of MongoDB Atlas
- Best use of Gemma
Top comments (0)