Professional

Luxury Price Comparison Frontend

Frontend for real-time sneaker & watch price aggregator

Sole frontend developer for a React/Redux platform aggregating real-time prices for luxury goods. Features include infinite scrolling, filtering, responsive design, and more.

React
Redux
MUI
JavaScript
PWA

Discuss this project

Main flow: searching & filtering luxury goods.

Context

The Smartest Way to Shop for Sneakers & Watches

Why this work mattered and the environment it lived in.

Finding the best price for specific high-value sneakers or luxury watches often requires checking multiple retailer websites. This application aimed to simplify that process by aggregating product listings and real-time prices from various popular stores (like StockX, GOAT, Stadium Goods) into a single, easy-to-navigate interface. The goal was to provide users with a comprehensive price comparison tool, helping them make informed purchasing decisions, while also integrating links to external resources for product authentication guides and services.

Snapshot

Highlights, Challenges, Skills

A concise readout for quick evaluators.

Highlights

Delivered entire frontend solo
Robust filtering and aggregation across thousands of products
Multi-device responsive design

Challenges

Normalizing inconsistent data from diverse APIs with varying data structures
Maintaining fast scroll and render performance with thousands of products
Implementing URL-based state that preserved complex filter combinations

Skills Demonstrated

Redux: for complex async and filterable state management
React Router: for deep-linking and state persistence in URLs
React Infinite Scroller: for performance optimization with large datasets

Role

My Role & Contributions

Sole frontend developer, responsible for architecting and implementing the UI from the ground up.

Translated requirements into functional React components
Managed application state with Redux and URL parameters
Integrated with the backend API endpoints
Ensured consistent responsive design across all devices
Implemented performance optimizations and PWA features

Key Contributions

Features & Outcomes

Open narratives that explain the impact of each slice of work.

Contribution 01

Aggregated Price Listings & Filtering

Users can view, filter, and sort prices from multiple retailers.

The core of the application displays a filterable list of items with prices sourced from multiple retailers. Users can filter listings by condition ("Brand New" vs. "Pre-owned"), specific size, and sort by price or alphabetically. Clicking a specific listing directs the user to the corresponding product page on the retailer's site. The filtering system was designed with performance in mind, ensuring that even with thousands of products, the UI remains responsive and smooth.

Homepage main product grid — Dynamic filtering in action

Filtered homepage state — Multiple filters applied

Contribution 02

Item Detail Page & Dynamic External Linking

Each item page shows price by retailer and CTA buttons for authentication guides.

Each item has a dedicated page displaying its image, full name, and a detailed breakdown of prices from different sources. This page also features dynamic call-to-action buttons ("Get Authenticated," "Free Authentication Guide") that link to relevant external resources specific to the item being viewed (e.g., linking to an Air Jordan authentication guide for an Air Jordan sneaker). I implemented the logic to generate these context-aware links.

Detailed product view — Item page with breakdown and guide link

Contribution 03

Infinite Scroll / Lazy Loading

for product lists and recommendations.

To handle potentially thousands of product listings and recommendations without compromising performance, I implemented infinite scrolling using the `React Infinite Scroller` library for both the main product lists and the "Recommended for you" sidebar. This ensures a smooth browse experience with efficient data loading as the user scrolls.

The implementation included careful handling of loading states, error boundaries for failed data fetches, and optimized rendering to prevent UI jank even on lower-end devices. This approach allowed us to display thousands of products while maintaining a responsive interface and minimizing unnecessary API requests.

Infinite scrolling demo — Smooth scroll for large data sets

Contribution 04

Related Item Recommendations

Sidebar with Related Item Recommendations, powered by same infinite scroll.

A sidebar component displays related items based on the currently viewed product or category, also utilizing infinite scroll for potentially long recommendation lists.

Sidebar recommendations — Sidebar visible in item page UI

Contribution 05

Search & Category Navigation

Users can search or navigate through main categories.

Users can navigate between main categories like "Sneakers" and "Watches" or use the top search bar to find specific items across all categories by name.

Search results page — Results for keyword queries

Contribution 06

Responsive Design

with custom breakpoints ensures a seamless experience across all devices.

A mobile-first approach was adopted using custom breakpoints and MUI's responsive capabilities to ensure a consistent and intuitive user experience across all devices, from desktops to smartphones. The responsive implementation went beyond basic layout adjustments, with carefully considered UX patterns for each device size. For mobile devices, I implemented touch-friendly UI elements, optimized image loading strategies for bandwidth conservation, and created navigation patterns specifically designed for smaller screens. This comprehensive approach ensured that users had a fully-featured experience regardless of their device type, with no compromise in functionality or performance.

Responsive homepage screenshot — Responsive homepage

Responsive item detail — Item screen on mobile

Technical Deep Dive

Building a Performant & Modern Frontend

This application was built using a modern React stack with a focus on performance, user experience, and maintainability:

Core Stack: Developed using React (v16.14), Redux for robust global state management, and Redux Thunk for handling asynchronous API calls (fetching product data from the Python backend via Axios). MUI (v4) provided the foundation for the UI components, supplemented with custom SCSS modules for specific styling needs.

State Management & Routing: Leveraged Redux for complex application state. Additionally, implemented URL-based state management using React Router and URL search parameters (useLocation, URLSearchParams) to make product views, filtered lists, and search results easily shareable, bookmarkable, and SEO-friendly. This involved careful synchronization between component state and URL parameters.

Performance Optimization: Addressed performance challenges associated with large datasets through infinite scrolling (React Infinite Scroller) and potentially code-splitting via React Router.

Progressive Web App (PWA): Implemented basic PWA capabilities using service workers to enable potential offline support and provide a more app-like experience.

SEO: Utilized React Helmet Async to manage page meta tags dynamically, improving SEO potential.

Development Practices: Maintained a clean component architecture with separation of concerns, utilized build tools like Webpack and Babel, and configured ESLint for code quality.

Growth

Key Takeaways

Learned advanced API normalization strategies for handling inconsistent data structures
Gained deep experience optimizing React performance for large data sets using virtualization
Mastered URL-based state management for shareable/bookmarkable application states
Developed expertise in Progressive Web App implementation for offline capabilities
Refined responsive design approaches for complex e-commerce interfaces
Implemented effective state management patterns with Redux for complex filtering systems

Toolkit

Technologies Used

Core Stack

React
Redux
Redux Thunk
React Router
JavaScript (ES6+)
MUI v4
SCSS Modules

Libraries

Axios
React Helmet Async
React Infinite Scroller
Node Vibrant

Tools

Webpack
Babel
ESLint
Git
Yarn

← Back to All Projects Contact Me