EcoHabit

dashboard graph
Eco AI

EcoHabit

Inspiration

The inspiration for EcoHabit came from observing the disconnect between people's desire to live more sustainably and the lack of tools to track and visualize their environmental impact. We noticed that while many people want to make eco-friendly choices, they often lack motivation or don't see the tangible results of their actions. The climate crisis demands individual action alongside systemic change, and we wanted to create a tool that empowers individuals to see how their small daily choices add up to significant environmental impact over time.

What it does

EcoHabit is a gamified sustainability tracker that helps users build eco-friendly habits by:

Tracking daily eco-actions like recycling, using reusable bottles, biking instead of driving, and conserving energy
Awarding points and levels for completed actions to create a sense of achievement
Visualizing environmental impact metrics (carbon saved, water conserved, waste reduced)
Maintaining streaks to encourage consistent eco-friendly behavior
Offering challenges and quests with time-limited goals and rewards
Providing a community space to connect with like-minded individuals
Generating personalized tips based on user activity patterns
Creating beautiful visualizations of global impact
Provides Conversational AI powered by GPT-3.5-Turbo Large Language Model (LLM) that can interact with the user's data from Supabase DB.

🧠 AI Integration

EcoHabit includes an AI-powered assistant that enhances user interaction and delivers smart insights by:

Providing personalized eco-tips based on user activity and logged actions

Analyzing environmental behavior patterns to offer encouragement and identify areas for improvement

Answering sustainability-related questions using natural language processing

Offering real-time suggestions during challenges and quests

Summarizing the user’s impact using environmental data (e.g., carbon, water, energy, and waste saved)

The AI chatbot uses OpenAI’s GPT-3.5 model via a FastAPI backend to process user queries and respond conversationally. It also pulls aggregate user data from Supabase (like total carbon/water saved) to contextualize responses and give meaningful insights, turning raw metrics into motivating feedback.

By integrating AI, EcoHabit transforms static data into interactive and educational dialogue, increasing user engagement and environmental awareness.

How we built it

We built EcoHabit using a modern tech stack focused on performance, scalability, and user experience:

Frontend: Next.js 14 with the App Router for server-side rendering and routing, React 19 for UI components, and TypeScript for type safety
Styling: Tailwind CSS for utility-first styling with shadcn/ui components for a consistent design system
State Management: Zustand for global state with persistent storage and synchronization
Animations: Framer Motion for smooth, engaging animations and transitions
Visualizations: Recharts for data visualization and Three.js for the 3D globe visualization
Backend: Supabase for authentication, PostgreSQL database, and real-time features
Deployment: Vercel for seamless deployment and hosting

We implemented a responsive design that works across all devices and focused on creating an engaging user experience through gamification elements like points, levels, and achievements.

Challenges we ran into

Building EcoHabit wasn't without its hurdles:

Data Synchronization: Ensuring seamless synchronization between local storage and the Supabase database, especially for offline usage, proved challenging. We had to implement a robust syncing mechanism with conflict resolution.
Authentication Complexity: Implementing a secure yet user-friendly authentication system with features like email verification and password reset required careful planning and testing.
Environmental Impact Calculations: Determining accurate metrics for environmental impact (like CO2 saved) from various actions required extensive research to ensure our calculations were scientifically sound.
Performance Optimization: Balancing rich animations and visualizations with performance, especially on mobile devices, required significant optimization work.
User Engagement Design: Creating a gamification system that was motivating without feeling trivial or overly complex took several iterations of user testing and refinement.

Accomplishments that we're proud of

Despite the challenges, we achieved several significant milestones:

Seamless Online/Offline Experience: Users can log actions even without internet connectivity, with data syncing automatically when connection is restored.
Engaging Visualization System: Our impact dashboard transforms abstract numbers into compelling visual representations that help users understand their environmental impact.
Sophisticated Gamification: The points, levels, challenges, and achievements create a motivating experience that encourages consistent eco-friendly behavior.
Community Features: We successfully implemented features that connect users while maintaining privacy and security.
Accessibility: We ensured the application is accessible to users with disabilities, following WCAG guidelines.

What we learned

This project was a tremendous learning experience for our team:

Environmental Science: We deepened our understanding of how individual actions translate to environmental impact metrics.
Behavioral Psychology: We learned about habit formation and how gamification can drive sustainable behavior change.
Technical Skills: We improved our proficiency with Next.js, Supabase, and state management in complex applications.
User Experience Design: We gained insights into creating engaging, intuitive interfaces that motivate users.
Data Visualization: We learned how to transform complex data into meaningful, accessible visualizations.

What's next for EcoHabit

We have ambitious plans for the future of EcoHabit:

Mobile App: Developing native mobile applications for iOS and Android to improve the user experience and enable push notifications.
Smart Device Integration: Connecting with smart home devices to automatically track certain eco-actions like energy usage.
AI-Powered Recommendations: Implementing machine learning to provide personalized suggestions based on user behavior patterns.
Community Challenges: Enabling organizations and communities to create group challenges for collective impact.
Carbon Offsetting: Partnering with verified carbon offset projects to allow users to directly contribute to environmental initiatives.
Educational Content: Expanding our library of eco-tips with in-depth articles and resources about sustainable living.
Global Impact Visualization: Enhancing our global impact visualization to show collective user actions in real-time.

By continuing to develop EcoHabit, we aim to create a powerful tool that not only helps individuals track their eco-friendly actions but also fosters a global community committed to environmental sustainability.

Tools and Technologies Used in EcoHabit

Frontend Framework and Core

Next.js 14: React framework with App Router for server-side rendering, routing, and API routes
React 19: UI component library for building the user interface
TypeScript: Strongly typed programming language that builds on JavaScript