🌍 Carbon Footprint Estimator – About the Project

🚀 Inspiration

With climate change becoming a growing concern, we wanted to create a tool that helps people understand their daily carbon footprint in an interactive and engaging way. Instead of using static forms or predefined questions, we aimed for a natural language-based approach, where users can simply describe their day, and AI does the rest.

To make the experience more engaging, we focused on dynamic visuals, intuitive data breakdowns, and gamification elements, making carbon footprint tracking more accessible and interesting.

🛠️ How We Built It

We used a combination of modern web technologies to build the project:

• Frontend: React + TailwindCSS + Framer Motion (for smooth animations)
  
• 3D Visuals: Three.js / React Three Fiber (for interactive elements)
  
• Charts & Data Visualization: Recharts + D3.js (for clean, readable insights)
  
• AI Processing: OpenAI/Gemini API (for text analysis and footprint estimation)
  
• Visual Enhancements: GSAP + Particle.js / Vanta.js (for background animations)
  
• Deployment: Vercel / Netlify (for easy hosting and performance optimization)
  

🔧 Challenges We Faced

• Interpreting User Input Accurately – Since users describe activities in various ways, refining LLM prompts to extract meaningful data was key.
  
• Balancing Performance and Visuals – We wanted an engaging UI without slowing things down, so we optimized animations and used efficient rendering techniques.
  
• Ensuring Usability – Striking the right balance between a flashy interface and a clear, informative experience required careful design choices.
  

🎯 What We Learned

• LLMs can effectively process real-world habits and provide meaningful environmental impact estimates.
  
• Good design improves engagement – A well-structured, visually appealing UI makes complex data easier to digest.
  
• Optimization is crucial – High-quality visuals don’t have to come at the cost of performance if handled properly.
  

🚀 Future Improvements

✅ More accurate CO₂ estimations using real-time emissions data.
✅ Additional gamification elements to encourage positive habits.
✅ Mobile-friendly enhancements for a smoother experience across devices.

This project was a great learning experience in combining AI, sustainability, and interactive design, and we’re excited to explore further improvements.

Built With

• autoprefixer
• d3.js
• eslint
• framer-motion
• gsap
• javascript
• lucide-react
• openai-api
• postcss
• react
• react-three-fiber
• recharts
• tailwind-css
• three.js
• typescript
• vite