⚡ SoleTracker

A real-time, full-stack sneaker price aggregator built with React and Python. SoleTracker automates headless browser sessions to scrape live pricing data across multiple retailers, delivering the results to a sleek, modern dashboard.

Overview

Tracking sneaker prices across the internet usually means dealing with enterprise-grade anti-bot protections, hidden DOM templates, and dynamic API endpoints.

This project was built to tackle those exact challenges. It utilizes Playwright to pilot a headless Chromium browser, bypass European GDPR cookie banners, and extract localized pricing data directly from Google Shopping (UK). The data is then served via a Flask REST API to a blazing-fast Vite + React frontend styled with Tailwind CSS v4.

Tech Stack

• Frontend: React, Vite, Tailwind CSS v4, Lucide Icons
• Backend: Python, Flask, Flask-CORS
• Scraping Engine: Playwright (Chromium)

Key Features

• Headless Browser Automation:
  Uses Playwright to navigate dynamic, JavaScript-heavy pages that traditional scrapers (like BeautifulSoup) cannot handle.

• Dynamic Source Badging:
  Automatically parses the merchant name (e.g., StockX, eBay, Offspring) from the search results and dynamically injects it into the UI.

• Intelligent Wait States:
  Implements state="attached" DOM checks to bypass "ghost" HTML templates designed to trap simple scrapers.

• Automated Consent Handling:
  Detects and automatically clears strict UK/EU cookie consent banners to ensure unobstructed DOM access.

• Modern Dark UI:
  A fully responsive, component-ready dashboard utilizing the latest Tailwind v4 utility classes.

The "Anti-Bot" Reality (Why Google Shopping?)

This project originally targeted specific platforms like GOAT and eBay. However, scraping enterprise platforms often results in instant 403 Forbidden blocks via systems like DataDome, or timeouts due to hidden display: none trap templates.

Google Shopping was chosen as the target for this project because it acts as the ultimate aggregator—pulling from Nike, StockX, and boutique retailers simultaneously. Scraping Google introduces its own challenges (heavy class obfuscation and CAPTCHAs), making it an excellent exercise in advanced web automation.

Getting Started

Because this project separates the scraping engine from the client interface, you will need to run the backend and frontend simultaneously.

1. Backend Setup (Flask + Playwright)

Open a terminal and navigate to the root directory containing app.py.

Install the required Python dependencies:

pip install flask flask-cors requests playwright

Install the Playwright Chromium browser binaries:

playwright install chromium

Start the Flask server:

python app.py

The API will now be listening on: 👉 http://127.0.0.1:5000

2. Frontend Setup (React + Vite)

Open a second terminal and navigate to the frontend directory.

Install the Node dependencies:

npm install

Start the Vite development server:

npm run dev

The UI will now be running on: 👉 http://localhost:5173/

Disclaimer & Usage Notes

This does not work. Most websites have strong anti-scraping measures.

Educational Purposes: This project was built strictly as an educational exercise in full-stack development, headless browser automation, and handling asynchronous state in React.

Terms of Service: Web scraping can violate the Terms of Service of target websites. Use this code responsibly and respect robots.txt and rate limits.

CAPTCHAs: Google actively monitors for automated traffic. If the application times out, Google has likely served a reCAPTCHA. The Python script currently runs with headless=False so you can manually solve the puzzle in the pop-up browser window if necessary.