DEV Community

Cover image for 🌳 TrailMate — Turn Screen Time into Outdoor Time | Hacktoberfest Week 1
Bhavit Goyal
Bhavit Goyal

Posted on

🌳 TrailMate — Turn Screen Time into Outdoor Time | Hacktoberfest Week 1

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? --> I built TrailMate — Your Offline Outdoor Companion**, a frontend web app designed to encourage people to spend less time on screens and more time outdoors.

TrailMate generates personalized outdoor adventures based on the user's available time, preferred activity, and difficulty level. Instead of simply telling users to "go outside", it gives them small, achievable missions such as walking challenges, nature observation tasks, photography activities, mindfulness breaks, and fitness challenges.

The app also includes:

  • 🌿 Personalized outdoor adventure generation
  • ⏱️ Built-in outdoor activity timer
  • 🎯 Different difficulty levels
  • ⭐ XP and reward system
  • 🔥 Adventure streak tracking
  • 📊 Personal activity statistics
  • 📸 Nature photo upload and preview
  • 🌳 "Touch Grass Mode"
  • 💾 LocalStorage so progress stays saved
  • 🌙 Dark/light mode
  • 📱 Responsive design for mobile and desktop

The main goal is simple: turn "I should go outside" into an actual activity.

Demo

Code

<!-- Show us the code! You can embed a GitHub repo directly into your post. --> The complete source code is available here:

https://github.com/bhgo0114050-cpu/Hacktoberfest-week-1-

The project is built as a lightweight frontend application, so there is no backend or API key required for the current prototype.

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? --> I built TrailMate using:

  • HTML5
  • CSS3
  • Vanilla JavaScript
  • LocalStorage
  • Responsive web design

The adventure generator is implemented on the client side. It uses the user's selected time, activity, and difficulty to create different outdoor missions and combinations.

I intentionally kept the project lightweight so that someone can clone the repository and immediately try it without setting up a backend.

The project is also structured so that the local adventure-generation system can be replaced or extended with an open-weight AI model in a future version.

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? --> Open innovation makes projects like TrailMate easier to experiment with, improve, and share.

For a project focused on encouraging people to get outdoors, I wanted the technology itself to stay simple and accessible. A lightweight frontend means that anyone can inspect the code, modify the adventure logic, add new activities, or connect their own AI model.

An open approach also makes it possible to evolve TrailMate beyond a fixed set of activities. An open-weight AI model could eventually generate more personalized adventures based on factors such as available time, interests, weather, location, and previous activities.

This could make the experience much more dynamic while still keeping the project transparent and customizable.

My Agent Session

Prize Categories

<!-- Which partner categories are you entering? List every one that applies, or remove this section. --> I am submitting this project for the applicable Touch Grass/Week 1 challenge category.

<!-- 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. --> Solo submission.

Final Thoughts

TrailMate started with a simple idea:

What if an app could use screen time to help you spend less time on your screen?

Instead of endlessly scrolling, open TrailMate, choose how much time you have, pick an activity, and go outside.

🌿 Touch Grass. Explore More.

Top comments (0)