Milo - Your Eco Buddy

Meet Milo: The friendly companion that makes sustainability effortless and fun.

Comment

Inspiration

The idea for Milo — Your Warm Eco Companion* came to me during a walk, where I noticed how much waste was mismanaged and improperly disposed of. It struck me that, even though sustainability is such an urgent issue, most people don’t receive proper education on how to live in an eco-conscious way.

I wanted to build something that could fill that gap: a friendly, approachable app that guides users in building sustainable habits. That’s how Milo was born: an AI-powered eco buddy that makes going green simple and engaging.

What it does

Milo helps users take small, daily steps toward sustainable living through:

  • 🎯 Daily eco goals with streak tracking
  • 🚌 An eco transport tracker that rewards XP for green travel
  • ♻️ An AI waste sorting guide powered by Hugging Face — users upload a photo, and Milo suggests the correct disposal method
  • 🧠 Fun eco trivia and facts to boost knowledge
  • 🏆 XP system and leaderboard to encourage ongoing participation
  • 🌟 A warm, friendly interface designed to feel like a real eco companion

How we built it

  • Frontend: Built with React and TypeScript
  • Styling: Styled using Tailwind CSS and Headless UI for modals and transitions
  • State & Auth: Managed using React hooks and Supabase for user accounts and storing data (goals, XP, streaks)
  • AI Integration: Uses Hugging Face Inference API to classify waste images and suggest proper disposal tips
  • Platform: Developed using bolt.new to quickly scaffold and prototype the app layout and logic

We integrated APIs, designed a responsive user interface, and focused on creating a smooth, gamified experience to encourage sustainable behavior.

Challenges we ran into

  • Hugging Face returned 404s until the right public model and permissions were confirmed
  • Debugging React errors related to modals and transitions (like the missing static flag issue)
  • Fine-tuning prompts and testing edge cases for image classification
  • Time constraints — prioritizing core features over stretch goals

🏆 Accomplishments that we're proud of

  • We built a fully functional, friendly eco-companion with real AI features and user progress tracking
  • Successfully integrated live image recognition using Hugging Face
  • Created a gamified sustainability tool that feels fun and accessible
  • Learned how to debug and solve platform-specific issues quickly and efficiently

What we learned

  • How to debug complex frontend issues and React runtime warnings
  • How to structure and test AI prompts for consistent performance
  • How to integrate third-party APIs like Hugging Face and Eleven labs
  • The value of user experience in driving habit-building behaviors
  • That testing early — and not assuming things will work — saves time in the long run

What's next for Milo — Your Eco Buddy

  • Mobile optimization for broader reach
  • A friend system to share goals and eco tips
  • A global leaderboard to track collective progress
  • Smarter goal recommendations based on location, habits, or seasons
  • Deploy the app at scale and expand the waste classification model using real-world images and fine-tuning

Milo’s mission is just beginning, and we’re excited to keep growing it into a tool that empowers everyone to live greener, one action at a time.

Built With

Share this project:

Updates