CarbonCart

Inspiration

Online shopping makes it incredibly easy to buy anything instantly, but there’s almost no visibility into the environmental impact behind those purchases. We were inspired by the idea that if people could see the carbon cost of what they’re buying—just like a price tag—they might make better choices. Our goal was to make that invisible impact visible in a way that’s simple, fast, and actually useful in the moment of decision. :contentReference[oaicite:0]{index=0}

---

What it does

CarbonCart is a browser extension that shows the estimated carbon footprint of products while you shop online. When you open a product page, it estimates emissions based on product data like category, price, weight, shipping, and location, then displays the result in a simple popup.

It also:

• Translates emissions into relatable comparisons, like miles driven
  
• Uses AI (Google’s Gemini API, powered by Gemma models) to explain carbon impact in simple, human-friendly terms
  
• Suggests lower-impact alternatives when available
  
• Uses SerpAPI to fetch real-time product search results and identify alternative products across the web
  
• Helps users make better decisions instantly without leaving the page
  
• Uses a polar bear mascot to make the experience feel more friendly and memorable
  

---

How we built it

We built CarbonCart as a Chrome extension with a TypeScript/React frontend and a small backend service.

• TypeScript powers most of the extension logic
  
• React is used for the interactive extension UI
  
• CSS handles the popup styling and visual design
  
• JavaScript is used for the built extension output
  
• Python was used for asset scripting, including polar bear sprite/frame extraction
  
• A scraper extracts product data from shopping pages
  
• An emissions module estimates CO₂e impact using product and shipping information
  
• A storage module saves carbon-related data locally
  
• A location module supports shipping/location-based estimates
  
• A Node/TypeScript backend (server.ts) handles API interactions
  
• SerpAPI is used to:
  • retrieve alternative product listings from search engines
    
  • gather additional product metadata when needed
    
• We integrated Google’s Gemini API (powered by Gemma models) as the AI layer to:
  • infer missing product details when scraping is incomplete
    
  • generate simple, human-readable explanations of carbon impact
    
• A popup/content UI displays the estimate, comparison, and better alternatives directly on the page
  

We organized the project into modular files (scraper, emissions, UI components, state, utils, config) so the extension was easier to build, debug, and scale as a team. :contentReference[oaicite:1]{index=1}

---

Challenges we ran into

One of the biggest challenges was dealing with inconsistent or missing product data across different websites. Not every product page clearly lists things like weight, category, or shipping details, which are important for estimating emissions.

To handle this, we:

• Built fallback logic for missing data
  
• Used the Gemini API to infer product details when scraping wasn’t enough
  
• Used SerpAPI as a fallback source for product and alternative data when direct scraping failed
  
• Separated scraping logic from emissions logic so each part could be improved independently
  

Another challenge was balancing accuracy vs speed. We needed estimates that felt credible while still being fast enough to appear instantly during browsing. We also had to manage Chrome extension architecture, React integration, and communication between the extension and backend. :contentReference[oaicite:2]{index=2}

---

Accomplishments that we’re proud of

• Turning a complex concept like carbon emissions into something simple and understandable
  
• Building a full end-to-end system: product page → scraper → emissions → AI explanation → UI popup
  
• Creating a real, working Chrome extension (not just a prototype)
  
• Using AI in a meaningful way to improve usability rather than as a gimmick
  
• Integrating external APIs (Gemini + SerpAPI) to enhance data quality and recommendations
  
• Designing a clean, approachable UI with a polar bear mascot
  
• Creating a tool that could realistically influence consumer behavior at scale :contentReference[oaicite:3]{index=3}

---

What we learned

We learned how messy real-world web data can be and how important it is to design around incomplete information. Product pages are not standardized, so scraping requires flexible logic and fallback systems.

We also learned that:

• AI is most effective when it enhances the user experience
  
• Carbon data needs to be simple and relatable to drive behavior change
  
• Chrome extensions involve multiple moving parts (content scripts, UI, backend)
  
• External APIs like SerpAPI can significantly speed up development but require tradeoffs in cost and control
  
• A strong hackathon project needs both a working demo and a clear impact story :contentReference[oaicite:4]{index=4}

---

What's next for CarbonCart

• Improve the accuracy of our emissions model with stronger datasets
  
• Expand support across more e-commerce platforms
  
• Personalize recommendations based on user preferences and habits
  
• Add tracking so users can see the impact they’ve saved over time
  

• Improve alternative product recommendations with better filtering

• Introduce an affiliate model for recommended products:

  • When users choose lower-impact alternatives, CarbonCart could earn a small commission through affiliate links
    
  • A portion of that revenue would be donated to environmental organizations, aligning revenue with real-world impact
    

• Explore partnerships with retailers to surface more sustainable products directly

• Enhance SerpAPI usage to improve alternative matching and real-time product comparisons :contentReference[oaicite:5]{index=5}

Built With

• css
• geminiapi
• javascript
• python
• react
• serpapi
• typescript