Inspiration
💡 Inspiration
$2.3 trillion in e-commerce transactions happen annually with zero environmental awareness. The reason? E-commerce platforms are terrified of adding "friction" to their checkout flow. Whenever a company forces users to make a "sustainable choice" by adding extra screens, checkout conversion drops by 12-18%.
We realized that to actually shape the world and drive mass adoption of climate tech, sustainability tools must be invisible, blazingly fast, and psychologically rewarding. This inspired EcoNudge: an AI-powered edge engine that makes sustainability natively integrated and highly gamified.
⚙️ What it does
EcoNudge is a drop-in React SDK designed specifically for platforms like Uber, Zomato, and Amazon. It intercepts user actions at the point of decision and calculates their exact carbon footprint in under 50ms.
Instead of guilt-tripping users with boring numbers, it uses Google Gemini AI to generate hyper-personalized, funny analogies (e.g., "Taking a cab costs the same energy as charging your PS5 for 14 hours! 🎮") and suggests actionable, greener alternatives (e.g., Carpooling, E-Scooter, Standard Delivery).
When users pick the green alternative, they earn "EcoPoints" which grow their Virtual Tree and boost their rank in our global "City Wars" leaderboard. These points can be spent in our integrated Offset Marketplace to fund real-world tree planting.
🏗️ How we built it
We engineered a highly scalable, enterprise-ready infrastructure:
- Core Engine: Built on Next.js App Router (v16) and deployed on Vercel's Edge network to guarantee sub-50ms latency anywhere in the world.
- Predictive Carbon Calculation: A custom algorithm mapping over 1,000+ emission factors (transport, food, shipping) against real-world metrics.
- AI Integration: We dynamically pass calculation results to the Google Gemini 2.0 Flash API to stream relatable, witty CO₂ analogies directly into the UI.
- Premium UX: We utilized
react-three-fiberand custom GLSL shaders to build a "breathing" WebGL planet that reacts to user health, coupled with Framer Motion spring physics for liquid-smooth modal animations. - B2B Architecture: We built a dedicated ESG Admin Dashboard that aggregates platform-wide offset data for automated corporate UN SDG compliance reporting.
⚠️ Challenges we ran into
- The Latency Constraint: Integrating an AI model during a checkout flow is incredibly risky because if the API takes 2 seconds to respond, the user abandons the cart. We solved this by using edge computing for the math and asynchronous streaming for the Gemini AI analogies, ensuring the UI never locks up.
- WebGL Performance: Running 3D shaders inside a web portal often causes memory leaks. We had to aggressively optimize our Three.js canvas and use low-poly models to maintain a steady 60 FPS on mobile devices.
- Behavioral Psychology: We iterated our Gamification loop 4 times. Guilt doesn't work. We learned that tying real-world carbon to a Tamagotchi-style "Virtual Tree" created an incredibly powerful retention hook.
🏆 Accomplishments that we're proud of
- Achieving sub-50ms end-to-end latency for our core calculation engine on the edge.
- Successfully integrating generative AI (Gemini) not just as a chatbot, but as a contextual data-translator that turns boring metrics into engaging, conversion-boosting copy.
- Building a complete B2B2C product in one weekend—spanning from a frontend SDK widget to an Enterprise ESG compliance dashboard.
🧠 What we learned
We learned the profound difference between "Backend-as-a-Service" and "Edge Computing". Moving our decision engine to the edge fundamentally changed our perspective on building low-latency consumer products. We also learned how to prompt Google Gemini effectively to output highly constrained, JSON-ready micro-copy without hallucinating.
🚀 What's next for EcoNudge
We are actively building out our Carbon Offset Marketplace to integrate with blockchain protocols for verified, on-chain carbon retirement. We also plan to open-source the base Carbon Calculation engine to help other student developers build climate-tech apps faster.
Built With
- framer-motion
- google-gemini
- next.js
- node.js
- react-three-fiber
- tailwindcss
- typescript
- vercel
- webgl
Log in or sign up for Devpost to join the conversation.