Integrate Apify E-Commerce Scraper for real-time product data

[Copilot]

Replaces mock product data with live e-commerce data from Apify's E-Commerce Scraping Tool. Users can now search for products by keyword and view real-time scraped results from Amazon.

Implementation

API Integration

• Server-side route (/api/scrape) calls Apify Actor with apify-client
• Transforms Actor output to match existing Product type
• Returns run metadata for debugging via Apify Console

// app/api/scrape/route.ts
const run = await client.actor("apify/e-commerce-scraping-tool").call({
  keyword: query,
  marketplaces: ["www.amazon.com"],
  maxProductResults: 20,
});

const { items } = await client.dataset(run.defaultDatasetId).listItems();

UI Updates

• Client component (app/page.tsx) manages search state and API calls
• Loading/error/success states with user feedback
• Stats cards dynamically calculate average price and indicate data source ("Mock" vs "Apify")
• Image allowlist configured for Amazon/Walmart CDN domains

Configuration

• .env.example template for APIFY_TOKEN
• README with setup instructions and architecture overview
• Updated .gitignore to include documentation files

Screenshots

Before (Mock Data)

After (Live Amazon Data)

Search results show 20 real products with Amazon images, accurate pricing ($427.58 avg), and working product URLs. Data source indicator updates to "Apify 🚀" with link to run details.

Original prompt

Integrate Apify E-Commerce Scraper to replace the mock product data with real e-commerce data.

When a user enters a search query in the SearchBar and clicks Submit, use that query to call the Apify E-Commerce Scraping Tool (apify/e-commerce-scraping-tool). Display the scraped results in the Statistics Cards, Product Table, and Product Cards instead of mock data.

Custom agent used: apify-integration-expert
Expert agent for integrating Apify Actors into codebases. Handles Actor selection, workflow design, implementation across JavaScript/TypeScript and Python, testing, and production-ready deployment.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.