Luxury Goods Price Comparison Engine
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.
ReactReduxMUIJavaScriptPWA
Main flow: searching & filtering luxury goods.
The Smartest Way to Shop for Sneakers & Watches
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.
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 Features
Dynamic filtering in action
Multiple filters applied
Item page with breakdown and guide link
Smooth scroll for large data sets
Sidebar visible in item page UI
Results for keyword queries
A demo on mobile
Responsive homepage
Item screen on mobile
Building a Performant & Modern Frontend
This application was built using a modern React stack with a focus on performance, user experience, and maintainability:
✨ 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
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
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