EcoTracker

“EcoTracker — Your Path to a Lighter Footprint.”

Comment

Inspiration

With climate change accelerating, we wanted to create something that empowers individuals to take small, measurable steps towards sustainability. While there are apps that measure fitness or finances, we realized there wasn’t a friendly, personalized way to measure carbon footprint. EcoTracker was born from the idea that "what gets measured, gets improved."

What it does

  1. We’ve started with secure and smart login using Auth0. It lets users sign in effortlessly — whether through email or Google — and keeps all data safe with token-based authentication. No hassle, no fear — just a smooth and protected entry point into our ecosystem.

🤖 2. Our chatbot, EcoBot, is powered by the Gemini API — and it’s like having a climate-savvy friend at your fingertips. It gives personalized eco-tips, answers sustainability queries, and even analyzes your activity patterns to recommend how to cut down on emissions — all through natural, intelligent conversation.

🏠 3. Our Home page is your green gateway. It welcomes users with an eco-driven message and quick access to key actions — like logging activities, checking the leaderboard, or scanning receipts.

📝 4. Through our Form Input section, users can quickly report their daily carbon-emitting activities. From travel and electricity use to food habits and shopping, everything gets tracked — and instantly translated into emission data with the help of our backend engine.

🧾 5. But hey — we get it, not everyone wants to manually log everything. So we added a Bill Upload and Live Scanner feature. Snap a picture or scan your receipt live, and we’ll extract and analyze the info using OCR and machine learning.

📊 6. Our Emissions Dashboard gives users a crystal-clear view of their impact. You’ll find daily trends, category-wise breakdowns, an hourly timeline, and even a heatmap. All graphs are interactive, readable, and yes — super satisfying to scroll through.

🏆 7. The Leaderboard is where the magic of community comes in. Users are ranked by their Green Score, earning badges like “Eco Newbie” or “Planet Pro.” It’s friendly competition — but with a purpose.

👤 8. The Profile Page gives each user a personal sustainability snapshot. They can see their full progress, track reduction goals, celebrate milestones, and even share achievements — because every step toward greener living matters.

📂 9. For the curious and organized, we’ve added a full Transaction History section. Every entry — whether form-based, scanned, or AI-suggested — is logged here. It’s clean, filterable, and great for accountability.

🧮 10. Our Carbon Summary feature creates digestible monthly or weekly reports. Perfect for personal motivation — or for those who want to share their journey with friends, institutions, or the community.

📱 11. The entire website is fully responsive. From desktop dashboards to mobile-friendly charts — we’ve made sure EcoTracker works beautifully on every screen size. No pinching or squinting required.

How we built it

Vite – For blazing-fast bundling and hot module replacement. It helped us rapidly iterate on UI without slowing down development.

TypeScript – To add type safety, better structure, and reduce runtime errors, making our codebase more maintainable and scalable.

Tailwind CSS – For a sleek, consistent, and customizable UI. It gave us the flexibility to apply our eco-theme using neon greens and yellows with a clean dark background.

Lucide React – Used for beautiful, lightweight, and scalable icons that align perfectly with our minimalist design style.

Framer Motion – Enabled smooth animations and transitions across pages and charts, making interactions fluid and engaging.

Auth0 – Handles secure user authentication (sign-up/sign-in) with support for social logins. It protects our users’ data while making login simple and modern.

Gemini API – Powers our intelligent EcoBot Chatbot, offering personalized carbon-reduction tips, responding to queries naturally, and elevating the whole user experience.

Recharts – Used to render dynamic and vibrant data visualizations like:

Daily Emission Trends

Category-wise Footprint (Travel, Food, Shopping, etc.)

Hourly Emission Timeline

Interactive Heatmaps

Challenges we ran into

Integrating the Gemini API smoothly with real-time conversation flow.

Accurate carbon mapping from diverse user inputs (manual, bill, image upload).

Ensuring data privacy while handling user emissions and login credentials.

Getting real-time leaderboard updates to work without lags or security issues.

Designing a UI that is both eco-friendly in aesthetic and user-friendly in navigation.

Accomplishments that we're proud of

Built a fully responsive and visually appealing UI from scratch.

Integrated Auth0 authentication without compromising UX.

Successfully brought AI into sustainability with the Gemini chatbot.

Created an interactive dashboard with real-time, user-specific emissions data.

Developed a leaderboard with a scoring algorithm that promotes eco-competition.

What we learned

How to blend AI with sustainability in a useful, user-friendly way.

The power of modular design, where adding features like offset page or eco-store became seamless.

Mastered integrating third-party tools like Auth0, Gemini API, and Chart.js effectively.

Learned the importance of clear UI/UX decisions when visualizing data-heavy insights.

What's next for EcoTracker

Adding carbon offset partnerships directly into the platform for real-world impact.

Implementing voice input using Web Speech API for a hands-free eco-logging experience.

Adding social integration so users can challenge friends to reduce carbon emissions together.

Publishing a mobile app version for even more accessibility.

Using machine learning to auto-categorize bills and predict emission trends.

Built With

Share this project:

Updates