DEV Community: Anush Ragav V S

TouchGrass

Anush Ragav V S — Tue, 06 Oct 2026 14:25:10 +0000

TouchGrass 🌱

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

«AI that helps you put your phone down and go outside.»

What I Built

Most modern AI apps are conversational chatbots designed to maximize screen time, capture attention, and keep users typing into text boxes.

TouchGrass 🌱 is the opposite: an application engineered to make the screen the shortest part of the experience.

TouchGrass is an open-source, local-first Progressive Web App (PWA) powered by open-weight AI that generates personalized real-world outdoor micro-challenges. It encourages users to physically put their phones into their pockets, step into nature, and engage their five physical senses.

Core Anti-Screen Philosophy

«The best session is one where the user spends less time using the app.»

Who It Is For

Remote & Desk Workers: People suffering from screen fatigue and sedentary Zoom-call days.
Students & Developers: Programmers who need somatic breaks away from IDEs and terminals.
Mindfulness Seekers: Anyone wanting guided, sensory-rich walks without mindless scrolling.

Example Challenges

5-Minute Mission: “Find a tree you pass every day but never noticed. Examine its bark patterns for 30 seconds. Feel the texture of a fallen leaf. Put your phone away.”
15-Minute Mission: “Find a quiet outdoor spot. Identify 3 distinct natural sounds, 3 contrasting colors, and 1 sign of seasonal change. Take three diaphragmatic breaths before walking back.”
30-Minute Mission: “Take an unhurried neighborhood walk. Locate something living, something moving, and something that changed since yesterday. Return only when complete.”

Demo

Repository: https://github.com/anushragav-vs/TouchGrass
Local Dev URL: http://localhost:5173
PWA Ready: Installable directly to mobile home screens and desktops with full offline caching.

Feature Walkthrough

First-Run Onboarding: Short, 3-step personal preference setup without account creation or sign-in walls.
Calming Home Dashboard: Time-of-day greeting (“Good evening 🌱”), quick duration pills ([ 5 MIN ], [ 15 MIN ], [ 30 MIN ]), streak counter, outdoor time, and the Touch Grass Score.
AI Challenge Generator: Personalizes missions by duration (5, 15, 30, 60m), mood (Relax, Explore, Move, Observe, Challenge), difficulty, and surroundings.
Physical Safety Validator: Pre-checks all generated steps to forbid dangerous climbing, trespassing, wild animal contact, or traffic hazards.
Screen-Free Mode with Pocket Dim: Minimalist UI with a natural breathing leaf, live timer, acoustic Zen chime, and an OLED true-black battery saver screen that prevents pocket touches.
Return Experience: Quick completion status ([ YES ✓ ], [ PARTIALLY ◐ ], [ NOT YET ✗ ]), mood emoji rating, a single short reflection question, and optional local photo.
Personal Journal & History: Filterable by category and status, searchable, with 1-click JSON Export & Import for 100% data sovereignty.
Real-World Achievements: 8 habit milestones (First Step, Tree Hugger, Observer, Explorer, Deep Unplug, Touch Grass Veteran, Zen Wanderer, Outdoor Habit).
AI Engine Settings: Live model detection, latency tester, and model switching between Local Ollama, Demo Simulation, and Offline Library.

Code

The complete source code is available on GitHub:

👉 github.com/anushragav-vs/TouchGrass

How I Built It

1. Open-Weight AI Layer & Local Inference

TouchGrass is built around a decoupled AI Provider Abstraction:

Ollama Integration: Connects directly to local Ollama endpoints (e.g., http://localhost:11434 or the built-in Vite reverse proxy /ollama-proxy). It auto-detects installed models via GET /api/tags and calls /api/generate with strict JSON mode.
Recommended Open Models:
- qwen2.5:0.5b (Ultra-fast, low resource consumption ~400MB)
- llama3.2:1b (High creative output ~1.3GB)
- gemma2:2b (Google open-weight model ~1.6GB)
JSON Repair & Zod Schema: Models occasionally emit trailing commas or code fences. Our custom jsonRepair.ts balances clipped brackets, strips fences, and validates against RawChallengeSchema with Zod.
Guaranteed Fallback Guarantee: If Ollama is offline or experiences a timeout, TouchGrass never crashes. It automatically selects a matched challenge from fallbackChallenges.json (36+ challenges across 7 categories) and alerts the user with zero interruption.

2. Physical Safety Engine

User safety takes precedence over AI creativity. safety.ts scans every generated challenge with hazard heuristics:

Flags dangerous climbing (cliffs, roofs, high trees, crags)
Flags private property or trespassing
Flags toxic flora (poison ivy, eating wild mushrooms) or wild fauna (snakes, stinging insects)
Flags hazardous road crossings and solo deep-water swimming
Enforces a mandatory safety disclaimer: “Stay aware of your surroundings and follow local rules. Never put yourself at risk to complete a challenge.”

3. Local-First Storage (Dexie.js / IndexedDB)

All user data—journal logs, photos, reflections, streak records, and achievements—is stored in the browser's IndexedDB. Zero user data is uploaded to any cloud server.

4. Acoustic Zen Sound Synthesizer

Rather than bundling bulky MP3 audio files that fail offline, TouchGrass uses the browser's Web Audio API to synthesize peaceful sine and triangle wave acoustics (349Hz F4 and 523Hz C5) when stepping outside and completing a challenge.

5. Technology Stack

Frontend: React 19, TypeScript, Vite 8, Rolldown
Styling: Tailwind CSS v4, Nature Palette, Custom Pocket Dim AMOLED Styles
Testing: Vitest (25 unit & integration tests passing)
Icons: Lucide React
Weather: Open-Meteo (Open-source, free, 0 API keys required)

Why Does Open Innovation Matter?

In building TouchGrass, open innovation was not just a design choice—it was the only way this project could exist as envisioned:

1. Privacy for Somatic Reflection

Outdoor reflection is deeply personal. When a user logs how they felt under an old oak tree or reflects on tension leaving their shoulders, that thought should not be processed by closed third-party servers to train advertising models. Open weights make true privacy a mathematical reality.

2. Disconnecting Requires Offline Independence

Nature exists away from Wi-Fi and 5G cell towers. If an application requires a live connection to a closed API server in Northern Virginia, it cannot help you on a mountain trail, a wooded park, or a remote coastline. Open models running locally or through offline libraries ensure that the tool works anywhere on Earth.

3. Freedom from Rent-Seeking & API Paywalls

Closed AI APIs charge recurring token fees that force developers into subscription paywalls or ad-driven monetization. With open-weight models like Qwen and Llama, users and open-source contributors run inference for free on their existing hardware.

4. Community Auditing & Safety

Physical safety requires total transparency into prompt instructions, schemas, and model outputs. With open innovation, anyone can inspect how challenges are generated, contribute new offline activities, and audit safety filters.

You can view and test the application right now in your browser using either of the following links:

🌐 1. On This Computer (Browser)
👉 Open in your browser: http://localhost:5173/
(or http://127.0.0.1:5173/)

The Vite development server is actively running in the background.

📱 2. On Your Phone / Mobile Device (Same Wi-Fi)
Since TouchGrass is designed as a mobile-first anti-screen PWA, you can open it on your phone:

👉 Connect your phone to the same Wi-Fi network and open:
http://192.168.31.10:5173/

💡 PWA Install Tip: In Chrome or Safari on your phone, tap "Add to Home Screen" to install TouchGrass as a full standalone app with offline caching and full screen-free mode!

📂 3. On GitHub
The complete repository, code, and Hacktoberfest challenge submission documentation are live at:
👉 https://github.com/anushragav-vs/TouchGrass

LingoBuddy

Anush Ragav V S — Sun, 04 Oct 2026 12:17:28 +0000

This is a submission for the Hacktoberfest Weekend Challenge: Build for a Friend

🗣️ LingoBuddy — Anxiety-Free Language Conversation Partner

A personalized, zero-judgment foreign language conversation simulator powered by local open-weight AI and the Web Speech API.

What I Built

Who I Built It For

I built LingoBuddy for my close friend who has been eagerly preparing to travel and relocate abroad, but struggles with intense foreign language conversation anxiety. Whenever they try to practice with native speakers or conventional language apps, they freeze up. Fear of making grammatical blunders, the pressure of rapid-fire replies, and the awkwardness of asking someone to repeat themselves over and over turn what should be an exciting journey into an intimidating hurdle.

The Problem It Solves

Traditional language learning platforms rely heavily on gamified countdown timers, flashcards, or punitive scoring systems that actually amplify anxiety. Furthermore, conversational chatbots often generate walls of unbroken text that overwhelm beginners.

LingoBuddy solves this by creating a 100% judgment-free, private safe haven for vocal immersion:

The "Anxiety Shield" ([?] Hint): A one-click rescue system embedded into every single AI speech bubble. If my friend gets stuck or nervous, tapping [?] immediately reveals a gentle inline card with:
- Plain-English Translation: Contextual and literal understanding.
- Grammar Insight: Clear, non-academic explanations of verb conjugations, polite forms, and sentence structures.
- Vocabulary Spotlight: Monospace chips highlighting key vocabulary.
- 3 Suggested Safe Replies: Instant rescue responses they can tap to auto-fill the chat input or practice speaking aloud.
Hands-Free Voice Conversation: Powered by the native browser Web Speech API (SpeechRecognition & SpeechSynthesis), with live audio equalizers and state indicators (LISTENING, PROCESSING, SPEAKING, IDLE).
Pacing Control: An audio pace toggle allowing relaxed 0.75x 🐢 slow speech or natural 1.0x ⚡ standard pace.
Authentic Scenarios: Roleplay environments tailored to everyday real-life challenges:
- ☕ At a Coffee Shop
- 🗺️ Asking for Directions
- ✈️ Airport Check-in & Customs
- 🏨 Hotel Reception Check-in
- 💬 Friendly Casual Chit-Chat
Private Progress Tracking: Uses the browser's Web Storage API (localStorage) to celebrate consistency with daily streaks, total sentences spoken, and a positive fluency confidence meter.

Demo

GitHub Repository: [https://anushragav-vs.github.io/LingoBuddy/]
Architecture: Zero-build Progressive Web App (PWA). You can run it locally with zero dependencies in seconds:

# Clone the repository
git clone https://github.com/anushragav-vs/LingoBuddy.git
cd LingoBuddy

# Run using any static HTTP server (Python, npx, or Live Server)
python -m http.server 3000

Then navigate to http://localhost:3000 in Google Chrome or Microsoft Edge.

Core Interface Highlights:

Glassmorphism Dashboard: Obsidian dark palette (#07090e), frosted glass panels (backdrop-filter: blur), dynamic soundwaves, and language flags.
Voice Control Dock: Concentric pulsing microphone animation during active speech recognition, real-time transcription preview, and a synthetic voice audio interrupt button.
Multi-Language Selector: Seamlessly switch between Spanish 🇪🇸, French 🇫🇷, German 🇩🇪, Italian 🇮🇹, Japanese 🇯🇵, and Mandarin 🇨🇳 with automatic BCP-47 speech recognition and synthesis reconfiguration.

Code

The complete source code is available on GitHub:
👉 https://github.com/anushragav-vs/LingoBuddy

Clean Modular Structure (Zero Node Modules Bloat):

LingoBuddy/
├── index.html                  # Semantic Glassmorphism single-page UI & PWA shell
├── manifest.json               # Progressive Web App manifest (standalone installable)
├── sw.js                       # Service worker for offline asset caching
├── instructions.md             # Functional requirements & UX specifications
├── rules.md                    # Engineering architecture guidelines
├── .gitignore                  # Git ignore rules
├── README.md                   # Hacktoberfest submission & documentation
└── assets/
    ├── css/
    │   └── styles.css          # Glassmorphism tokens, soundwave bars, glow rings
    └── js/
        ├── app.js              # Master UI controller and state machine
        ├── speech-handler.js   # Web Speech API wrapper (STT & TTS engines)
        ├── ai-handler.js       # Ollama REST connector + autonomous fallback simulator
        ├── storage-handler.js  # LocalStorage CRUD, streaks & fluency metrics
        └── scenarios.js        # Multi-language dialogues & Anxiety Shield metadata

How I Built It

1. Open-Source AI & Local Inference Layer

LingoBuddy is architected around open-weight foundation models via Ollama (http://localhost:11434/v1/chat/completions):

Models: Optimized for Qwen 2.5 (qwen2.5:latest) and Llama 3 (llama3:latest).
Prompt Engineering: Uses structured JSON schema outputs to enforce conversational brevity (1–2 spoken sentences) paired with rich metadata required by the Anxiety Shield:

  {
    "reply": "¡Hola! Bienvenido a Café Luz. ¿Qué te gustaría tomar hoy?",
    "translation": "Hello! Welcome to Café Luz. What would you like to have today?",
    "grammarTip": "'¿Qué te gustaría...?' uses the polite conditional form of 'gustar'.",
    "vocabHighlight": ["Bienvenido (welcome)", "Tomar (to drink)"],
    "suggestedReplies": [
      "Un café con leche de avena, por favor.",
      "¿Tienen cruasanes o algo para comer?",
      "Solo un espresso doble, gracias."
    ]
  }

Autonomous Local Fallback Engine: If Ollama isn't running on the user's machine, the app automatically switches to an embedded contextual dialogue simulator in ai-handler.js, ensuring 100% uptime with zero setup friction.

2. Audio & Speech Engineering

Implemented via the native Web Speech API:
- SpeechRecognition / webkitSpeechRecognition dynamically adjusts its lang attribute to the target language (e.g., es-ES, fr-FR, ja-JP).
- SpeechSynthesis queries system voice catalogues to select high-fidelity native accents with pitch and rate modulation (0.75x slow mode).
- Built-in audio collision prevention stops speech recognition while the synthetic voice is speaking to prevent self-echo loops.

3. Frontend Architecture

Vanilla ES6+ Modules: Built with zero bundlers (no Webpack, Vite, or Babel required).
Tailwind CSS via CDN + Custom CSS: Ultra-smooth Glassmorphism styling with dark obsidian surfaces, cyan/emerald accents, and animated SVG waveforms.
PWA Ready: Includes manifest.json and sw.js for desktop and mobile offline installation.

Why Does Open Innovation Matter?

Open innovation is what made LingoBuddy possible in ways closed APIs never could:

Uncompromising Privacy for Vulnerable Learning: Learning a language involves making awkward, embarrassing mistakes. When users practice with closed commercial APIs (OpenAI, Google, Anthropic), their intimate voice recordings and transcripts are transmitted over third-party servers and potentially stored or used for training. By running open-weight models (Qwen-2.5, Llama-3) locally via Ollama, my friend's voice and thoughts never leave their laptop.
Zero Cost & Infinite Practice: Language fluency requires hundreds of hours of trial and error. Closed cloud APIs charge per-token fees that penalize users who need more repetitions. Open-source local inference is 100% free and unlimited.
Resilience & Travel Readiness: Learners frequently travel to places with spotty airport Wi-Fi or expensive roaming data. Because LingoBuddy combines local open-source AI with a PWA service worker and an autonomous offline fallback engine, it remains fully usable on airplanes, trains, or in remote cafes without an internet connection.

My Agent Session

This application was engineered collaboratively using Antigravity AI:

Architecture planning and technical specification generation in instructions.md and rules.md.
End-to-end development of modular ES6 frontend, Web Speech API integration, and local Ollama REST client.
Zero-dependency PWA configuration and Git repository deployment.

Prize Categories

Build for a Friend (Primary Challenge Category)
Open Innovation / Local AI
Personal Productivity & Learning