Frontend UI for Amazon Scraper
Overview
A lightweight HTML/CSS/JavaScript frontend that wraps a previously delivered Python Amazon scraper. The interface lets the client add or remove product IDs and trigger scraping runs, with the new scraper extracting product data automatically. Outcome: Gave the client a usable UI on top of the scraper, replacing manual config files and making day-to-day product management much faster.
Architecture & Pipeline
flowchart LR
n0["User BrowserHTML · CSS · JS"]
n1["Manage Product IDsAdd / remove"]
n2["Backend ScraperPython"]
n3["amazon.comLive extraction"]
n4["Product DataReturned to UI"]
n0 --> n1
n1 --> n2
n2 --> n3
n3 --> n4
classDef step0 fill:#f1f5f9,stroke:#64748b,color:#1e293b,stroke-width:2px,rx:10,ry:10;
classDef step1 fill:#ecfeff,stroke:#06b6d4,color:#1e293b,stroke-width:2px,rx:10,ry:10;
classDef step2 fill:#f0fdfa,stroke:#0d9488,color:#1e293b,stroke-width:2px,rx:10,ry:10;
classDef step3 fill:#ecfdf5,stroke:#10b981,color:#1e293b,stroke-width:2px,rx:10,ry:10;
classDef step4 fill:#fffbeb,stroke:#f59e0b,color:#1e293b,stroke-width:2px,rx:10,ry:10;
class n0 step0;
class n1 step1;
class n2 step2;
class n3 step3;
class n4 step4;
End-to-end flow derived from this project's scope and tech stack. Tap View Fullscreen for a larger view, or scroll horizontally on small screens.
Key Features
- Clean frontend for product ID management
- Direct integration with the existing backend script
- Custom Amazon scraper for automated data extraction
- Fully tested end-to-end workflow
- Tech Stack:** Python, HTML, CSS, JavaScript