Touch Grass

Landing Page
Vibe detected and time for walk set!
Route Generated with waypoints along the way
Walk details
Directional Instructions

Inspiration We live in an era of endless doomscrolling and screen addiction. "Touch Grass" started as a playful internet phrase telling people to go outside, but we wanted to make it literal. The challenge wasn't just getting people off their screens, but making outdoor exploration feel personalised, spontaneous, and exciting.

We asked ourselves: What if your phone could read your mood and design the perfect walk for you? Whether you're looking for a peaceful Sunday stroll through parks, a romantic date-night route past scenic cafes, or a chaotic bar-hopping adventure, Touch Grass transforms your vibe into a real walking route.

How We Built It Tech Stack: Frontend: React + Vite, Mapbox GL for map visualisation, Lucide React for icons Backend: Flask (Python), Google Maps Directions API, Google Places API AI: Google Gemini for natural language mood detection and location extraction Deployment: (Ready for Vercel frontend + Railway/Heroku backend)

Architecture: Mood Detection: User inputs free-form text ("I want to relax in Central Park" or "Date night in Kensington"). Gemini AI extracts the vibe (chill/date/chaos/aesthetic) and optionally detects location mentions.

Route Generation Algorithm: Calculate target distance using duration × pace_multiplier (each vibe has different walking speeds) Query Google Places API for POIs matching the vibe (parks for "chill", bars for "chaos", etc.) Circular routes: Select 2-3 waypoints at ~120° intervals to create a loop (not out-and-back) One-way routes: Select endpoint + intermediate waypoints, optionally using user-specified destination Fetch real walking routes with Google Directions API (actual footpaths, not straight lines) UI/UX: Nature-themed design with plant-growth animations, animated route rendering on Mapbox, turn-by-turn directions panel

What We Learned

Route Optimisation is Hard: Creating circular routes that actually feel like loops (not just going somewhere and back) requires angular distribution of waypoints. We learned to use polar coordinate logic to ensure waypoints are spread ~120° apart.
API Integration Complexity: A hybrid approach using Mapbox for visualisation and Google Maps for data required careful separation of concerns. We learned to keep rendering and data layers independent.
Duration-Based Routing: Converting "30-minute walk" into actual route distance required understanding:

Average walking speeds (80 m/min baseline) How vibes affect pace (aesthetic = slow with photo stops, chaos = fast-paced) Routing overhead (streets are ~1.4× straight-line distance) Validation with ±20% tolerance AI Prompt Engineering: Getting Gemini to reliably extract both vibe AND location from free-form text required structured JSON output schemas and careful prompt design.

React Data Flow: Debugging the destination input bug taught us to trace data through the entire pipeline (App.jsx → custom hook → API service → backend).

Challenges We Faced

Circular Routes Felt Repetitive: Early versions created out-and-back routes. Solution: Angular distribution algorithm to create true loops.
Duration Mismatch: Routes were consistently 30-40% longer than requested. Solution: Reduced search radius from distance/2 to distance/3.5 and accounted for routing overhead.
No POIs in Rural Areas: Google Places returned nothing outside cities. Solution: Progressive radius expansion (2km → 5km → 10km) with fallback to generic triangular route.
API Cost Management: Google Maps APIs can get expensive. Solution: Stayed within free tier ($200/month credit = 40,000 Directions requests) by caching geocoded destinations and minimising redundant calls.
UI Consistency: Mixing emojis (🌿, 🔄) with standard UI looked inconsistent. Solution: Replaced all emojis with Lucide icon set and added CSS animations (vine-growth, gentle-sway).
Destination Not Forwarding: Backend rejected one-way routes despite valid destination. Solution: Traced data flow through three layers and added missing destination parameter to both React hook and API service.

What's Next

Social features: Share routes with friends, see popular routes in your area
Route history: Save and revisit favorite walks
Weather integration: Adjust routes based on conditions (covered paths when raining)
Accessibility options: Wheelchair-friendly routes, elevation profiles
Gamification: Badges for exploring new areas, streak tracking

Touch Grass: Stop doomscrolling, start exploring. 🌿