Back

Measured

GitHub
Source Code
Measured

Main Tech Stack

  • React
  • Web Extension

Problem

When shopping for clothing online, it can be difficult to determine if an item will fit properly without trying it on. Sizes vary significantly between brands, and measurement charts can be hard to interpret without a reference point.

Solution

Measured is a Chrome extension that automatically overlays measurement comparisons on supported e-commerce sites. Users can save their own clothing items with custom measurements, and the extension compares them side-by-side with items they’re browsing, showing differences in both inches and centimeters with color-coded results.

Demo

Notable Tech Used

React

  • React with Vite was used for the popup/main window
  • High interactivity UI to avoid full page reloads
  • Component base design for high repetitive structures like ItemCard.
  • Used Zod for runtime data validation and type safety
  • React Router to manage navigation between Home, Items, Add and Edit views
  • Context API handled global wardrobe state across various routes

Technical Challenges

  • Multi-Site Parsing: Different e-commerce sites have completely different DOM structures. Grailed provides measurement data in tables with data attributes, while SSENSE uses modal based size charts with measurement images. Created separate parsing strategies for each platform.
  • Dynamic Content: Both sites use single page application architectures. Implemented MutationObservers to detect when measurement data loads dynamically.
  • Measurement Mapping: SSense uses measurement guide images with overlay positions that vary by product category. Built a mapping system (ssenseData.js) that maps CSS positioning to specific measurement types (chest, waist, length, etc.).
  • State Management: Managing data between the popup UI and content scripts required message passing through Chrome’s runtime API
  • Cross-Site Compatibility: Each site uses different measurement formats (inches vs. centimeters and decimals). Implemented automatic unit conversion for accurate comparisons.

Lessons Learned

  • Extension Architecture: Gained experience with Chrome Extension Manifest V3’s service worker model, understanding the differences between background scripts, content scripts, and popup contexts.
  • Web Scraping Resilience: Learned that e-commerce sites frequently update their DOM structures. Built fallback parsing strategies (e.g., breadcrumb navigation when Next.js data isn’t available) to maintain functionality across site updates.
  • Data Validation: Using Zod for runtime validation helped catch data inconsistencies early and provided better error messages during development.