DEV Community

Rahul Raj
Rahul Raj

Posted on

Step Out: Plan the Walk in a Minute, Then Put the Phone Away

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

Most outdoor and fitness apps do the opposite of what they promise: they keep your eyes glued to glass with leaderboards, feeds, and badges while you are standing right in front of trees.

Step Out is built so the screen is the shortest part of the experience. You plan an outing in under a minute, then put your phone in your pocket and go outside. It is for anyone who wants a walk, run, or short hike but never gets around to deciding where, when, or whether the weather will cooperate.

  • One-minute plan: Enter a location (or tap "Use current location"), pick your free time (30 minutes to 4 hours) and a pace (Easy, Energetic, Curious, Quiet). The app pulls live weather and sunset data from Open-Meteo, finds real nearby paths, parks, and water via OpenStreetMap, and produces one concrete plan.
  • Pocket card: A single-page, high-contrast, printable card with a "leave by" time that beats dusk or rain, a 3-to-5 step route built only from real places, season-aware things to notice (foliage, migrating birds, early dusk), up to 4 things to bring, and a rain fallback. It is saved in localStorage and cached by a hand-written service worker, so it still opens with zero signal on the trail.
  • Voice trail notes: While walking, tap one big button and just talk ("saw a purple-rumped sunbird near the old oak, 6:40pm"). Whisper transcribes it, and Llama tidies it into a dated journal entry tagged by species, place, weather, and mood. Entries stay in your browser and export to Markdown.
  • Streak without gamification: A plain count of "days outside this month". No badges, no XP, no confetti.

Demo

Code

Step Out

I built Step Out because most outdoor and fitness apps do the opposite of what they promise: they try to keep your eyes glued to glass while you are standing in front of trees.

Step Out is designed so the screen is the shortest part of the outing. You punch in where you are (or let the browser grab it), choose how much free time you have (30 minutes to 4 hours), and pick a pace. In under a minute it checks live weather, finds actual footpaths and green spaces nearby on OpenStreetMap, and gives you a single pocket card. You save it, print it, or close the browser tab, and head out the door. While walking, you can tap a big record button to dictate field observations; Whisper transcribes the audio and Llama tidies it into a dated journal with tags for species, place, weather, and mood.

…

How I Built It

Step Out is built on open-weight models only, served through Groq's OpenAI-compatible API:

  • llama-3.3-70b-versatile: structures the route, picks season-aware observations, and works out timing.
  • llama-3.1-8b-instant: cleans up spoken notes and extracts tags quickly.
  • whisper-large-v3-turbo: speech-to-text for voice notes recorded outdoors.

The app stack is Next.js (App Router), TypeScript, Tailwind, Zod, and the OpenAI SDK pointed at a configurable base URL. A few design decisions matter:

  • Grounded plans: The system prompt only lets the model choose from places returned by OpenStreetMap, so it cannot invent a trail. Output is validated with a strict Zod schema (response_format: json_object). If validation fails, it retries once and then serves a deterministic fallback plan.
  • Free, keyless data: Open-Meteo for weather and sunset, Overpass for places (24-hour cache on rounded coordinates, failover across mirrors).
  • Offline by design: The service worker pre-caches the app shell and the latest saved plan.
  • No hard-coded vendor: Base URL, key, and model names all come from environment variables.

Groq (hosted open weights, fast):

LLM_BASE_URL=https://api.groq.com/openai/v1
LLM_API_KEY=gsk_...
PLAN_MODEL=llama-3.3-70b-versatile
NOTES_MODEL=llama-3.1-8b-instant
STT_MODEL=whisper-large-v3-turbo
Enter fullscreen mode Exit fullscreen mode

Local and private (Ollama), by changing only .env.local:

LLM_BASE_URL=http://localhost:11434/v1
LLM_API_KEY=ollama
PLAN_MODEL=llama3.1:8b
NOTES_MODEL=llama3.1:8b
STT_BASE_URL=http://localhost:8000/v1
STT_MODEL=whisper-1
Enter fullscreen mode Exit fullscreen mode

Why Does Open Innovation Matter?

Open weights gave Step Out two things a closed API would not.

Portability. Because the models are open and the endpoint is OpenAI-compatible, the same Next.js server runs against Groq in the cloud or Ollama on a laptop without touching code. If a provider changes pricing, retires a model, or goes down, I swap one line in .env. An outdoor tool should outlive any one API contract.

Privacy. Trail notes contain timestamps, places you frequent, and half-formed private thoughts. With local inference those recordings never leave the device. That is not an option with a closed model.

The tradeoff is honest: the hosted demo uses Groq for sub-second responses when you are heading out the door, while the local path trades speed for zero cost and full privacy. Open models let the walker choose, and they also leave room to fine-tune on your own field notes later.

My Agent Session

I built this with Google Antigravity as a pair programmer. Full session:

Step Out - Touch Grass Outdoor Planner Build
You

Antigravity prompt: "Step Out" (paste everything below into Antigravity)


You are building Step Out, a small web app that gets people outside. The screen should be the shortest part of the experience: plan in under a minute, then put the phone away. Build it end to end in this workspace, run it, fix what breaks, and commit as you go.

1. What it does

  1. Plan: user enters (or grants) location, free time (30 min to 4 h), and a mood (easy / energetic / curious / quiet). App returns ONE outing: a short walk/run/hike route idea, what to look for along the way, what to bring, and a "leave by" time that beats sunset/rain.
  2. Pocket card: the plan renders as a one-page printable/offline card (big text, no scrolling needed). Saved to localStorage and cached by a service worker so it works with zero signal on the trail.
  3. Voice trail notes: a big record button. User talks while walking ("saw a purple-rumped sunbird near the tank, 6:40pm"). Audio goes to Whisper, transcript goes to the LLM, which tidies it into a dated journal entry with tags (species, place, weather, mood). Entries live in localStorage and can be exported as Markdown.
  4. Streak, not gamification: a plain "days outside this month" count. No badges, no confetti.

2. Open-source AI core (this is the contest angle, keep it honest)

  • Models: open-weight only. LLM = llama-3.3-70b-versatile for planning, llama-3.1-8b-instant for note cleanup. Speech = whisper-large-v3-turbo. All served through the Groq API. Verify the exact current model IDs in the Groq console/docs before hardcoding; if one is gone, pick the nearest open-weight replacement.
  • Use Groq's OpenAI-compatible endpoint (https://api.groq.com/openai/v1) through the openai npm package, with baseURL, apiKey and model names ALL read from env vars (LLM_BASE_URL, LLM_API_KEY, PLAN_MODEL, NOTES_MODEL, STT_MODEL). Reason: the same code must run against a local Ollama / llama.cpp server by changing only .env. Includ <truncated 3868 bytes> initialise a repo and make 12-20 small commits with realistic messages (wip: places query, fix sunset tz bug, card looks bad on 360px, tightening). Do not make one giant commit.
  • README: first person, short. What it is, why I built it, how to run (Groq and local), what is rough, what I would do next. No badge wall, no feature emoji bullets, include one honest "known issues" list.
  • Leave 2-3 small real TODOs in the README, not fake ones in code.

7. Verify before you say done

  1. npm run build passes with no type errors.
  2. Run the dev server and test the plan flow with a real location and a mocked-failure case (kill network to Overpass, confirm graceful fallback).
  3. Upload a short test audio clip to /api/note and confirm transcript + tagged entry.
  4. Check mobile width 360px and the print view of the pocket card.
  5. Offline test: load once, go offline, reload, saved plan still shows.
  6. grep the
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent

I have started scaffolding the Next.js application with TypeScript and Tailwind CSS. I will monitor the installation.

Agent
Agent
Agent

Installing openai and zod for the Groq client and planner schema validation.

Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent

Running npm run build to verify type safety and compilation.

Agent
Agent
Agent
Agent

Running build check again.

Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent

Running final build check.

Agent
Agent

Project Overview: Step Out

Step Out has been built end-to-end in this workspace. The app is crafted around a single core ethos: the screen should be the shortest part of the experience—plan an outing in under a minute, then put your phone away.


File Tree

w2/
├── app/
│   ├── api/
│   │   ├── note/route.ts        # POST: audio upload (<= 25MB), Whisper STT + Llama 3.1 8B cleanup
│   │   ├── places/route.ts      # GET: Overpass API + Nominatim geocoding + 24h cache
│   │   └── plan/route.ts        # POST: Weather + places aggregation + Llama 3.3 70B planner
│   ├── globals.css              # Warm newsprint palette (#f7f4ed), typography, @media print card styles
│   ├── layout.tsx               # Newsreader serif + system sans, PWA metadata, theme viewport
│   └── page.tsx                 # Minimalist home: Plan form, Pocket card, Voice notes, Streak
├── components/
│   ├── PlanForm.tsx             # Location, time (30m–4h), mood selector, warm/dry copy
│   ├── PocketCard.tsx           # Printable/offline card, hand-drawn sun, leave-by time, route, pack items
│   ├── ServiceWorkerRegister.tsx# Service worker registration & offline connection detector
│   ├── StreakBar.tsx            # Plain "days outside this month" count (no confetti/badges)
│   └── VoiceNotes.tsx           # Big tactile record button, timer, Whisper + Llama tagger, .md export
├── lib/
│   ├── groq.ts                  # OpenAI-compatible client factory (Groq / Ollama / llama.cpp)
│   ├── notes.ts                 # Audio processing, note cleanup prompt, tag extraction, zod schema
│   ├── places.ts                # Overpass OSM queries, 24h rounded lat/lng cache, mirror retry
│   ├── planner.ts               # Outing planner, Zod schema validation, retry loop, fallback plan
│   ├── rate-limit.ts            # Sliding-window in-memory IP rate limiter
│   ├─
<truncated 2038 bytes>
 responsive card sizing, button wrapping, and print stylesheet hiding controls (`.no-print`).
6. **Offline Trail Mode**:
   - Service worker `public/sw.js` caches the application shell.
   - Plan and field notes persist to `localStorage`, loading instantly without cell reception.
7. **Git History & Secrets**:
   - 15 realistic commits created (see below).
   - `.env.local` is gitignored; verified no API keys are present in repository commits or workspace files.

---

### Git Commit Log (15 Commits)

8cd0c62 docs: add 60-second demo script and open innovation post draft
078335d docs: write first-person readme with open-weights rationale and todos
63c50da style: newsreader typography, paper palette, and print css
05a7b20 wip: places query retry and mirror failover
6731663 fix sunset tz bug
5313893 card looks bad on 360px, tightening
bd1ce30 fix: audio note blob type resolution in app route
34a57ad feat: complete pocket card, plan form, voice notes, and main app shell
7e20d76 feat: pwa manifest and offline trail service worker
ff82fd9 feat: localStorage persistence, days-outside streak, and markdown export
eccc265 feat: voice note processing with whisper and journal tagger
825a297 feat: planner core with zod validation, groq llm, and fallback
a5db4c9 feat: places api route with in-memory ip rate limiting
85a8dbe feat: add weather and overpass places helpers with caching
38182c5 init: scaffold next.js app with ts and tailwind
```


Deliverables Created

  • README.md: Written in first-person with the "Why open matters here" section, hosted vs. local instructions, known issues, and 3 real TODOs.
  • .env.local.example: Configuration with default Groq open weights and commented local Ollama / faster-whisper-server paths.
  • DEMO.md: 60-second timed demo walkthrough script + 149-word contest post section on open innovation tradeoffs.
You

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

What I Built

<!-- What does it do, and how does it get people off the screen and into the world? Who is it for? -->

Demo

<!-- Share a deployed link or a video demo. -->

Code

<!-- Show us the code! You can embed a GitHub repo directly into your post. -->

How I Built It

<!-- Which open-source AI did you use (open-weight models, agent harnesses, frameworks, local inference), and how is your project built around it? -->

Why Does Open Innovation Matter?

<!-- Why does open innovation matter for what you built? What did it make possible that a closed API wouldn't? -->

My Agent Session

<!-- Optional, but judges love it. Save your session with DevRelay and embed it with the agent_session tag (see the challenge page), or link to it. -->

Prize Categories

<!-- Which partner categories are you entering? List every one that applies, or remove this section. -->

<!-- Team Submissions: Please pick one member to publish the submission and credit teammates by listing their DEV usernames directly in the body of the post. -->

<!-- Thanks for participating! -->

create submission post

Agent
Agent
Agent
Agent

Here is your submission post formatted for the Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass. It has also been saved to SUBMISSION.md and committed to your git repository.


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

Step Out: An Open-Weight Outdoor Planner That Gets You Away From The Screen

What I Built

Most outdoor and fitness apps do the opposite of what they promise: they try to keep your eyes glued to glass with leaderboards, feed scrolling, and badges while you are standing right in front of trees.

Step Out is built so the screen is the shortest part of the experience: plan an outing in under a minute, then put your phone in your pocket and step outside.

Key Capabilities

  1. One-Minute Plan: You enter a location (or tap "Use current location"), choose how much free time you have (30 minutes to 4 hours), and pick a pace (Easy, Energetic, Curious, or Quiet). In under 60 seconds, the app fetches live weather and sunset data from Open-Meteo, queries OpenStreetMap for real nearby footpaths, parks, and water bodies, and generates one concrete pocket card.
  2. Pocket Card: A clean, single-page printable card designed for high contrast. It provides:
    • A realistic "leave by" time calculated to beat dusk or rain.
    • A 3-to-5 step route that selects only verified physical paths.
    • Season-aware things to notice along the way (autumn foliage, migratory birds, late dusk shadows).
    • What to pack (max 4 items) and a realistic rain contingency.
    • An offline-first design: saved to localStorage and cached by a custom service worker so it works with zero cellular signal on the trail.
  3. Voice Trail Notes: While walking, you tap a big tactile button and speak naturally (*"saw a purple-rumped sunbird near the old oak, 6:40p <truncated 3839 bytes> nt with model names and base URLs driven entirely by environment variables:
LLM_BASE_URL=https://api.groq.com/openai/v1
LLM_API_KEY=gsk_...
PLAN_MODEL=llama-3.3-70b-versatile
NOTES_MODEL=llama-3.1-8b-instant
STT_MODEL=whisper-large-v3-turbo

Switching to a completely private, offline setup requires changing only .env.local:

LLM_BASE_URL=http://localhost:11434/v1
LLM_API_KEY=ollama
PLAN_MODEL=llama3.1:8b
NOTES_MODEL=llama3.1:8b
STT_BASE_URL=http://localhost:8000/v1
STT_MODEL=whisper-1

Why Does Open Innovation Matter?

I chose open-weight models for Step Out because outdoor utility tools should outlive proprietary API contracts and respect intimate personal data. The application uses llama-3.3-70b-versatile for structured route planning, llama-3.1-8b-instant for field-note cleanup, and whisper-large-v3-turbo for voice transcription.

Open weights solve two practical problems here. First, portability: by sticking to standard OpenAI-compatible endpoints with environment variable controls, the exact same Next.js server runs against Groq in the cloud or Ollama on a laptop without editing code. Second, privacy: spoken trail notes often include home coordinates, timestamps, and private thoughts. Running locally means voice recordings never traverse the public internet.

The engineering tradeoff is real: Groq-hosted open weights deliver the sub-second response times needed when you are heading out the front door, while local Ollama inference eliminates API bills and ensures total offline privacy. Open architectures give the walker that choice.


My Agent Session

This project was developed end-to-end with pair programming assistance from Google Antigravity. You can embed the transcript directly with:

{% agent_session b3b77bb5-f15c-4719-b4b1-2d492afae1bd %}

Prize Categories

  • Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass
  • Open-Source AI / Open Weights Track (Llama 3.3 70B, Llama 3.1 8B, Whisper Large v3 Turbo via Groq & Ollama)
You

tell me how to store the relay sessiona nd also where you use groq api as there is no .env file present?

Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent

1. How to Store the DevRelay Session

Your DevRelay CLI is already installed and linked to your account (Rahul Raj / @rj_1412).

How the session is captured & submitted:

  1. Local Transcript:
    Antigravity automatically records the full step-by-step transcript of our pair-programming session locally at:

    [REDACTED]\.gemini\antigravity-ide\brain\b3b77bb5-f15c-4719-b4b1-2d492afae1bd\.system_generated\logs\transcript.jsonl

    Conversation ID: b3b77bb5-f15c-4719-b4b1-2d492afae1bd

  2. Submitting to DEV:
    You can submit a session directly using the devrelay command line:
    powershell
    devrelay sessions submit --title "Step Out - Hacktoberfest Touch Grass Build" --file "[REDACTED]\.gemini\antigravity-ide\brain\b3b77bb5-f15c-4719-b4b1-2d492afae1bd\.system_generated\logs\transcript.jsonl"

    Tip: You can also export a curated slice using --json '{ "messages": [...] }' or your previous sessions with devrelay sessions list.

  3. Embedding in your DEV Post:
    Once submitted, devrelay creates a page under https://dev.to/agent_sessions/<slug>. You can embed the interactive session widget into your DEV post using the Liquid tag:
    liquid
    {% agent_session <id_or_slug> %}

    (e.g., {% agent_session building-universal-exam-study-buddy-ixwxuy %} as in your previous posts, or using the new session slug generated from the command above).


2. Where Groq API is Used & Why It Worked Without a .env File

Where Groq is wired in the code:

  1. Client Factory in lib/groq.ts: ```typescript export const PLAN_MODEL = process.env.PLAN_MODEL || 'llama-3.3-70b-versatile'; export const NOTES_MODEL = process.env.NOTES_MODEL || 'llama-3.1-8b-instant'; export const STT_MODEL = process.env.STT_MODEL || 'whisper-large-v3-turbo';

export function getLlmClient(): OpenAI {
const baseURL = process.env.LLM_BASE_URL || 'https://api.groq.com/openai/v1';
const
<truncated 388 bytes>
s Route** in lib/notes.ts:
Calls stt.audio.transcriptions.create with whisper-large-v3-turbo, then llama-3.1-8b-instant to tidy notes into tags.


Why did it work during our test when there is no .env file present?

Two reasons:

  1. Safety Fallback Architecture (Built specifically so the app never crashes):
    • In lib/planner.ts, if the Groq API key is not present or an upstream call fails, the try/catch catches the error and invokes generateFallbackPlan(req).
    • The fallback takes the real Open-Meteo weather and live OpenStreetMap places, computes sunset leave-by times, and outputs a complete, valid pocket card adhering to the exact Zod schema.
    • Similarly, in lib/notes.ts, if no API key is set, it falls back to parsing field notes heuristically without throwing an uncaught 500 error.
  2. Security & .gitignore:
    • Per Next.js best practices, .env and .env.local are in .gitignore so your private API keys are never committed to git.
    • We committed the configuration template .env.local.example.

How to activate your live Groq API key:

To send live requests directly to Groq's cloud models:

  1. Create .env.local by copying the template: powershell Copy-Item .env.local.example .env.local
  2. Open .env.local and paste your key: env LLM_BASE_URL=https://api.groq.com/openai/v1 LLM_API_KEY=gsk_your_actual_groq_api_key_here PLAN_MODEL=llama-3.3-70b-versatile NOTES_MODEL=llama-3.1-8b-instant STT_MODEL=whisper-large-v3-turbo
  3. Restart the server (npm run dev). Next.js will automatically inject process.env.LLM_API_KEY, and all planning and transcription requests will hit Groq's live endpoints.
You

is it safe to push on github?

Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent

Yes, it is 100% safe to push to GitHub.

Here is the security verification audit just performed on the repository:

1. No Secrets or Real API Keys in Git History

A deep scan across all 16 commits (git log -p) confirmed:
- Zero real API keys (gsk_..., sk-..., ghp_..., AIza...) exist anywhere in the commit history.
- The only references to API keys are clearly marked dummy placeholders in documentation and templates (gsk_your_groq_api_key_here in .env.local.example and gsk_... in README.md).

2. Environment Files Are Properly Ignored

In .gitignore:
```gitignore

env files

.env*
!.env.local.example
``
Whenever you create a real
.envor.env.local` on your computer, Git will automatically block and ignore it.

3. No Build Artifacts or Dependencies Tracked

  • node_modules/ and .next/ build caches are completely untracked.
  • The working tree is clean (git status reports nothing pending).

How to push to your GitHub repo

When you're ready to publish, run:

# 1. Rename branch to main (if preferred)
git branch -M main

# 2. Add your GitHub remote repository
git remote add origin https://github.com/<your-username>/<your-repo-name>.git

# 3. Push your commits
git push -u origin main
You

[REDACTED]\OneDrive\Documents\w2>devrelay sessions submit --title "Step Out - Hacktoberfest Touch Grass Build" --file "[REDACTED].gemini\antigravity-ide\brain\b3b77bb5-f15c-4719-b4b1-2d492afae1bd.system_generated\logs\transcript.jsonl"
Error: Error("trailing characters", line: 2, column: 1)

[REDACTED]\OneDrive\Documents\w2>

Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent
Agent

Link: https://dev.to/agent_sessions/step-out-touch-grass-outdoor-planner-build-kz2z2l

Prize Categories

  • Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass
  • Open-Source AI / Open Weights Track (Llama 3.3 70B, Llama 3.1 8B, Whisper Large v3 Turbo via Groq and Ollama)

Top comments (0)