This is a submission for Weekend Challenge: Earth Day Edition
🌱 Green Habit Tracker: Turning Small Actions into Real Impact with AI
What I Built
Sustainability is something many people care about but in reality, it often feels overwhelming, abstract, or difficult to maintain consistently.
I built Green Habit Tracker, a mobile-first web app that makes eco-friendly living feel simple, motivating, and rewarding.
Instead of focusing on big lifestyle changes, the app encourages users to take small daily actions like:
- Bringing a reusable bottle
- Avoiding plastic straws
- Turning off unused lights
Each action contributes to:
- 🌟 Points
- 🔥 Daily streaks
- 🌍 Measurable environmental impact
To make the experience more personal, the app uses Google Gemini to generate AI-powered eco tips based on the user’s actual completed habits, turning generic advice into meaningful, contextual guidance.
Demo
👉 Live Demo: https://greentrackerai.netlify.app/
🎥 Video Walkthrough: (will put it on 19/4 - video is still in progress)
Key Screens:
- Onboarding & habit selection
- Daily mission dashboard
- Reward animations on completion
- AI-powered eco insights
- Environmental impact tracking
Code
🔗 GitHub Repository: https://github.com/aisyahz/-Green-Habit.git
How I Built It
🧩 Frontend
- React (Vite) + TypeScript
- Mobile-first layout with a responsive desktop showcase
- Component-based architecture for scalability
🎨 UI/UX Design
- Custom dark forest green theme inspired by nature
- Glass-morphism cards and soft gradients for a premium feel
- Clean typography and minimal icons (eco-focused)
- Floating bottom navigation for mobile-native experience
⚙️ State & Logic
- Local state + localStorage persistence
- Habit tracking system:
- Users select eco habits
- Mark them as completed daily
- Earn points and build streaks
- Impact calculation:
- Each habit contributes to estimated CO₂ reduction
🎮 Gamification
To make the experience engaging:
- 🎯 Points system for every completed habit
- 🔥 Daily streak tracking
- 🎉 Completion animations:
- “+10 pts” floating reward bubble
- Card scale + icon bounce interactions
- 📊 Progress visualization through charts and stats
🤖 Google Gemini Integration
One of the key features is AI-powered eco guidance using Google Gemini.
Instead of showing generic tips, the app:
- Tracks completed habits
- Sends them as context to Gemini
- Generates personalized, encouraging eco advice
Example prompt:
“Based on these completed eco habits today: [list], give a short encouraging eco-friendly tip.”
This makes the experience:
- More relevant
- More human
- More motivating
Prize Categories
🏆 Best Use of Google Gemini
This project uses Gemini to:
- Generate personalized sustainability tips
- Adapt responses based on real user behavior
- Provide contextual encouragement instead of static content
Why I Built This
Many sustainability apps focus on tracking or data, but I wanted to focus on something different:
Making eco-friendly living feel achievable and rewarding.
By combining:
- small daily habits
- visual progress
- and AI-driven encouragement
the goal is to help users feel:
- less overwhelmed
- more consistent
- and more connected to their impact
What I Learned
- How to design a gamified user experience that feels rewarding without being complex
- How to integrate AI meaningfully, not just as a feature, but as part of the user journey
- The importance of micro-interactions (animations, feedback) in making an app feel alive
- How to balance simple logic with strong UX storytelling in a short hackathon timeframe
Final Thoughts
Green Habit Tracker is a simple idea:
Small habits, done consistently, can lead to meaningful change.
With the help of AI, those habits become not just actions
but a guided, encouraging journey toward a more sustainable lifestyle 🌍✨
Top comments (0)