Mindful Steps

Inspiration

I got the idea for this app from a book I once read, where the author described a simple practice: walk 100 steps from your home and look for something amazing nearby. I don’t remember the title or the author, but the concept stuck with me. It was such a beautiful reminder that wonder can be found in the smallest distances and the most ordinary places.

That idea made me want to create a step-counting app that helps people notice the world around them, one that not only tracks movement, but encourages slowing down, paying attention, and capturing moments of everyday magic.

What it does

Imagine a step-counting app that doesn’t just track movement, it transforms your walks into mindful micro-adventures. Our app helps you stay active while also staying present. Throughout your walk, it sends gentle, randomized prompts encouraging you to pause, look around, and notice something you might otherwise overlook: the shape of a shadow, a burst of color, a unique texture, or a moment of stillness. Users can snap quick photos of these discoveries, building a personal gallery of everyday beauty.

By blending movement, mindfulness, and creativity, this app turns routine steps into meaningful moments, helping users feel more grounded, more observant, and more connected to the world around them.

How we built it

The app was built primarily using Raindrop Code, which handled most of the initial development and structure. When Raindrop stopped working, I switched to GitHub Copilot to complete the finishing touches and refine the app. It’s built with Next.js and TypeScript, giving it a modern, reliable framework. For media handling and persistence, the app uses Vultr Object Storage, allowing users’ photos and data to be stored efficiently and securely.

Challenges we ran into

Building the app came with several unexpected challenges, each shaping the project in different ways:

1. Finding and learning Raindrop Code One of the earliest hurdles was simply finding Raindrop Code. Because there’s another MCP-related app called Raindrop that’s actually a bookmark manager, it took effort to track down the right tool. Once found, learning the Code interface, how it behaved, what prompts worked best, and how to guide it effectively, was its own learning curve. Much of the early development was experimentation and adaptation.

2. Setting up Vultr Object Storage Getting a Vultr account configured proved more difficult than expected. Their card verification system was malfunctioning, preventing normal signup. After multiple attempts, the workaround ended up being PayPal, which finally allowed the account to connect and the object storage integration to move forward.

3. Implementing a step counter in a web environment Because the app is a web application, it can’t access a mobile device’s built-in step counter APIs for security and platform-restriction reasons. Implementing a true pedometer wasn’t feasible, so the solution became a simulated step counter, a meaningful trade-off that allowed the core idea to function without relying on native capabilities.

4. Raindrop Code stopping working Late in the build process, Raindrop Code stopped working entirely. That meant some of the final parts of the app, including polish, adjustments, and functional finishing, had to be completed using GitHub Copilot, which required shifting tools and workflows right when the project was nearing completion. Raindrop did start functioning again so I switched back to it for a few final things.

Accomplishments that we're proud of

Despite the challenges along the way, I’m proud that the app is fully functional and true to its original purpose. The app sends randomized prompts that encourage users to pause, look around, and notice something new in their environment. Whether it’s a sound, a texture, a pattern of light, or a small detail they’d normally overlook, the app helps people engage more deeply with the world around them.

Building something that promotes mindfulness, curiosity, and presence, while also being technically functional and reliable, is something I’m genuinely proud of.

What we learned

1. Learning to work with AI coding tools I learned how to navigate and adapt to different AI-assisted development tools. Starting with Raindrop Code and later switching to Copilot taught me how to communicate effectively with AI and adjust my workflow when tools behave unpredictably.

2. Understanding the importance of tool flexibility This project showed me that no tool is perfect and that flexibility is essential. When Raindrop Code stopped working, I had to pivot quickly, which taught me not to rely on a single system and to stay adaptable.

3. Troubleshooting real-world service issues Setting up Vultr Object Storage, especially with its payment and verification issues, taught me persistence and gave me hands-on experience navigating cloud service setup, authentication problems, and alternative payment workflows.

4. Creative problem-solving around technical limitations Because web apps can’t access the device’s internal step counter, I learned to think creatively and design around platform constraints. Implementing a simulated step counter required rethinking the user experience to preserve the spirit of the app.

5. The value of iterative experimentation Learning Raindrop Code’s interface and figuring out which prompts produced the best results taught me the importance of iteration, experimentation, and refining instructions when working with generative coding environments.

6. How to blend inspiration with implementation I learned how to take an abstract idea, like walking 100 steps to find something extraordinary, and turn it into a functional, engaging digital experience.

What's next for Mindful Steps

What comes next depends partly on how the project performs in the hackathon, but I’m excited about its potential. If things go well, I’d like to continue developing the app and expanding its features. One major possibility is rebuilding it as a native mobile app, which would allow it to access built-in step counters for more accurate tracking. A mobile version could also open the door to richer notifications, offline functionality, and deeper integration with device sensors.

Regardless of the direction, the core idea, encouraging mindfulness through movement, still has plenty of room to grow.

Built With

• next.js
• raindrop
• typescript
• vultr