Pedalboxd: Building a Guitar Pedal Discovery & Management App

View on Github

View project

Project Overview

Pedalboxd is a web app that helps guitarists and bassists discover, compare, and manage their pedal collections. It combines a clean, responsive React front end with a flexible data-ingestion pipeline that pulls specs, images, and pricing from multiple pedal manufacturers (Wampler, TC Electronic, Death By Audio, JHS, and more).

 
 

My Role

  • UX Designer: Conducted competitor research, sketched wireframes & user flows, built interactive prototypes in Figma, and ran informal user tests.

  • React Developer: Architected and implemented the production UI with React (plus CSS Modules for component-scoped styling), integrated Firestore for user collections, and built data-scraping scripts to automate pedal data imports.


Key Challenges

  1. Data Consistency

    • Pedal specs, images, and pricing come from disparate sources (CSV exports, Shopify JSON APIs, custom REST endpoints).

    • Each brand uses different URL schemes, HTML structures, and field names.


  2. Scalable Import Pipeline

    • Need to add new brands over time without rewriting the scraper from scratch.

    • Must dedupe existing entries to avoid cluttering the database.



  3. Intuitive UX for Complex Lists

    • Users should be able to filter by type (e.g. Overdrive, Delay, Modulation), price range, and brand.

    • Provide a clear way to add/remove pedals from personal “boarding” collections.



UX Design Process

  1. Discovery & Research

    • Reviewed top guitar-gear sites (Reverb, Sweetwater) and competitor apps.

    • Interviewed hobbyist guitarists to understand how they track and discover pedals.



  2. User Flows & Wireframes

    • Mapped primary flows: browsing pedals, viewing details, saving to collection.

    • Sketched low-fi wireframes in Figma to explore layout, filtering controls, and card designs.


  3. Interactive Prototype & Testing

    • Built a clickable Figma prototype with core screens (Home, Pedal Details, My Board).

    • Ran 5 informal usability sessions, iterated on navigation (moved filters into a sticky sidebar) and pedal-card hierarchy (image, name, price, core specs).



Technical Implementation

Data Pipeline

  • CSV Imports (for legacy brands):

    • Node.js scripts that parse vendor CSVs, normalize IDs, and upsert into Firestore—preventing duplicates by using consistent document IDs.


  • Python Scrapers (for modern Shopify catalogs):

    • TC Electronic: Hit their REST endpoint (/search/products-result), parsed JSON for modelCode, specs, and images.

    • Death By Audio & JHS:

      • Used Shopify’s public APIs (/products.json + /products/{handle}.json) to fetch full catalogs, extract body_html, price, and images.

      • Stripped HTML to plain text with BeautifulSoup’s get_text() for clean “Specs” fields.



  • Automation:

    • Stored scripts under scripts/ with requirements.txt and a virtual environment.

    • Added yarn scrape:tc and yarn scrape:db NPM scripts to rebuild data on-demand.

Front-End (React + CSS Modules)

 
 

  • Styling:

    • CSS Modules for encapsulated, component-level styles (no global leaks).

    • Used BEM conventions for any shared utility classes.

  • Component Library:

    • Custom React components: PedalCard, FilterPanel, Modal, etc.

    • Lucide-React icons for clear, scalable iconography.

  • State Management:

    • React Query for data fetching & caching; Context API for user auth/collections.

  • Filtering & Search:

    • Debounced free-text search across pedal names and specs.

    • Multi-select filters for Type, Brand, and Price bands.

  • Responsive Layout:

    • CSS Grid for the pedal-card gallery with media-queries to stack on mobile.

    • Modals for detail views on desktop, full-screen panels on mobile.

Outcome & Impact

  • Data Coverage: Automated import of 500+ pedals across 4 brands, with nightly scripts to catch new releases.

  • User Feedback: Beta testers praised the clean “Specs” formatting and fast filtering.

  • Next Steps:

    • Integrate user-submitted reviews & ratings.

    • Add “board” sharing and social features.

    • Explore a mobile app wrap with React Native.

Tech Stack

  • Front End:

    • React, CSS Modules, Lucide-React, React Query


  • Back End / Data:

    • Firebase Firestore, Node.js (CSV import), Python + BeautifulSoup (scrapers)

  • Tools:

    • Figma (wireframes & prototype), Git/GitHub, VS Code, Yarn/NPM scripts