Ecozon 🌍🌱

Transform Amazon shopping into climate action. Ecozon is a Chrome extension that instantly finds sustainable alternatives to the products you're viewing, showing you the environmental impact and making eco-friendly choices effortless.

---

🎯 Features

• ✨ Smart Product Detection — Automatically identifies products on Amazon pages
• 🎯 Eco-Scoring Algorithm — 20+ keyword analysis + brand recognition for accurate sustainability ratings (0-100)
• 📚 Curated Alternatives — 36 verified eco-friendly products (soap, shampoo, detergent, conditioner, body wash, toothpaste)
• 🔄 Carousel Navigation — Browse 3 top recommendations with seamless navigation
• 🌐 Live Search — Backend searches for real eco-friendly product alternatives
• ⏱️ Smart Fallback — If backend times out (5s), automatically uses curated dataset
• ♻️ Carbon Reduction Estimates — See environmental impact per product (typically 20-60% reduction)
• 🎨 Premium UI — Minimalist design using EB Garamond serif font, warm color palette

---

🚀 Quick Start (3 steps)

Step 1: Clone & Navigate

git clone https://github.com/adv23/ecozon.git
cd ecozon

Step 2: Load Extension into Chrome

1. Open Chrome and go to chrome://extensions/
2. Toggle "Developer mode" ON (top-right corner)
3. Click "Load unpacked"
4. Select the eco-swap-extension folder from your cloned repo
5. You should see the Ecozon icon in your toolbar ✅

Step 3: Test It

1. Visit any Amazon product page:
   • Search "soap" and click a product
   • Or try: amazon.com/s?k=shampoo
2. Click the Ecozon icon (🌍) in your toolbar
3. 🎉 See 3 eco-friendly alternatives with scores and reasoning

That's it! Works immediately with the curated dataset.

---

🏗️ Architecture

Ecozon uses a hybrid search system:

┌─────────────────────────────────────────────────────────────┐
│        User clicks Ecozon on Amazon product page            │
└────────────────────────┬────────────────────────────────────┘
                         │
                    ┌────v─────┐
                    │ Extension │
                    │ tries →   │
                    └────┬─────┘
                         │
         ┌───────────────┼───────────────┐
         │               │               │
    ┌────v────┐    ┌────v────┐    ┌────v────────┐
    │ Backend  │    │ Timeout │    │   Fallback  │
    │ Search   │    │ (5 sec) │    │   Dataset   │
    │ (Live)   │    │         │    │  (Curated)  │
    └────┬────┘    └─────────┘    └────┬────────┘
         │                              │
         │         Success!             │
         └──────────────┬───────────────┘
                        │
             ┌──────────v──────────┐
             │ Show 3 alternatives │
             │ with eco-scores     │
             └─────────────────────┘

Backend Features:

• Node.js/Express server on localhost:3000
• JSDOM-powered product search & parsing
• Category-specific search queries
• 5-second timeout for responsiveness
• Returns top 3 products with author, price, link

Frontend Features:

• Manifest V3 Chrome extension
• 400+ lines of vanilla JavaScript
• Zero external dependencies
• Works 100% offline with curated data

---

📋 Project Structure

ecozon/
├── README.md (this file)
├── LICENSE
│
├── eco-swap-extension/          # Chrome Extension
│   ├── manifest.json            # Extension config
│   ├── src/
│   │   ├── popup/
│   │   │   ├── index.html       # Popup UI (320×450px)
│   │   │   ├── main.js          # All logic (scoring, rendering)
│   │   ├── content/
│   │   │   └── index.js         # Detects Amazon products
│   └── public/
│       └── data/
│           └── products.json    # 36 curated eco products
│
└── backend/                     # Node.js Backend
    ├── README.md               # Backend setup guide
    ├── package.json
    ├── server.js               # Express server + /search endpoint
    └── node_modules/           # (created after npm install)

---

🔧 Full Setup (with Backend for Live Search)

Option A: Minimal Setup (Backend not required)

Just follow "Quick Start" above. The extension works fully with the 36-product curated dataset.

Option B: Full Setup (Backend enabled)

Terminal 1: Start Backend Server

cd backend
npm install
npm start

Expected output:

🌍 Ecozon Backend running on http://localhost:3000
📍 Try: http://localhost:3000/search?q=organic%20soap

Terminal 2: Load Extension (same as Quick Start)

# Extension auto-detects backend at localhost:3000
# No additional configuration needed!

Terminal 3 (Optional): Test Backend Manually

curl "http://localhost:3000/search?q=plastic+free+soap"

---

📖 How to Use

On Amazon:

1. Browse any product page (soap, shampoo, detergent, etc.)
2. Click the Ecozon icon 🌍 in your toolbar
3. Wait 1-2 seconds for recommendations
4. See:
   • Current product info
   • Score badge (0-100)
   • Carbon reduction % (↓)
   • "Why It's Better" reasons
   • Price & source (🔴 Live / 📚 Curated)

Navigation:

• "View on Amazon" — Opens the product on Amazon
• "Next" — Browse to the next alternative
• Hover effects — Smooth, premium interactions

---

🎯 Eco-Scoring Algorithm

Products are scored based on:

Positive Factors (+7 each, up to +42):

• Keywords: plastic-free, biodegradable, organic, vegan, bar soap, zero waste, sustainable, natural, handmade, plant-based, etc. (20+ total)

Bonus (+15):

• Recognized eco-brands: Dr. Bronner's, Burt's Bees, Seventh Generation, EarthHero, Hello, Attitude, etc.

Penalties (−8 each):

• Keywords: disposable, single-use, plastic bottle, synthetic, microplastic, harmful

Base Score: 50 → Floor: 0, Ceiling: 100

---

🛠️ Backend API (Optional)

GET /search?q=QUERY

curl "http://localhost:3000/search?q=organic+soap"

Response:

[
  {
    "title": "Dr. Bronner's Castile Bar Soap, Unscented Baby, 5 oz",
    "author": "Dr. Bronner's",
    "price": "$4.49",
    "link": "https://www.amazon.com/...",
    "image": "https://m.media-amazon.com/..."
  },
  ...
]

Features:

• Category-aware search (detects soap → searches "organic bar soap plastic-free")
• Real-time product search (via JSDOM HTML parsing)
• Timeout: 5 seconds (returns empty array if slower)
• Top 3 results only

---

🔐 Data Sources & Deployment

⚠️ For Production Deployment:

The backend's search capability is optimized for rapid prototyping and hackathon demonstration. For production applications, we recommend:

• ✅ Amazon Product Advertising API (official, approved)
• ✅ Affiliate APIs (CamelCamelCamel, Keepa, etc.)
• ✅ Sustainable product databases (Built With, EarthHero API, etc.)

Good news: The extension works completely independently with the curated dataset (36 verified eco-friendly products) and requires no external data sources.

---

🧪 Testing

Test the Curated Dataset

# No setup needed, just open Amazon and click the extension

Test Backend Search

# Terminal 1
cd backend && npm start

# Terminal 2
curl "http://localhost:3000/search?q=organic+shampoo"

# Should return 3 products or empty array if Amazon blocks

---

🐛 Troubleshooting

Issue	Solution
Extension icon not visible	Reload Chrome or visit amazon.com in a new tab
"Finding eco-friendly..." never completes	Backend not running (OK! Fallback will work)
Backend returns empty results	Backend unavailable or timeout (5s) — fallback to curated data automatically
"No product found on this page"	Not on an Amazon product page. Try: amazon.com/s?k=soap
Extension blocks on hover	Hard refresh (Ctrl+Shift+R) and reload extension
"View on Amazon" returns 404 or broken link	You're using the fallback dataset (backend not running). Start the backend for live, working links

---

📊 Example Results

Input: Amazon "Grisi Royal Jelly Soap" (generic plastic bottle) Output:

Current Product: Grisi Royal Jelly Soap — $8
                        ↓
Alternative: Crate 61 Organics Bar Soap (Vegan, Plastic-Free)
Score: 92/100 ✨
Carbon Reduction: 22% ↓
Why: ✅ Plastic-free packaging
     ✅ Vegan formulation  
     ✅ Concentrated bar = less waste
     ✅ Certified organic

---

🏆 Technical Highlights

• 0 External Dependencies (vanilla JS, no React/Vue)
• Manifest V3 Compliant (Chrome's latest standard)
• 400+ Lines of standalone JavaScript
• Hybrid Architecture (live + fallback)
• Premium UI (EB Garamond font, 12px rounded corners)
• Accessibility (proper ARIA labels, keyboard navigation)
• Performance (loads in <1s, 5s fallback timeout)

---

👥 Support

For issues:

1. Check Troubleshooting above
2. Check browser console (F12 → Console) for errors
3. Ensure backend is running (if testing live search)
4. Try reloading the extension (Manage Extensions → Reload)

---

📄 License

MIT License — See LICENSE file

---

🎉 Credits

Built for the Hackathon with ❤️ and 🌱

Stack: Chrome Extension (Manifest V3) + Node.js + JSDOM + JSON

---

Happy shopping sustainably! 🌍♻️

Made with ♻️ for a more sustainable internet