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 🌍✨