E-commerce Product Listing Platform
High-Performance Virtualized Catalog with URL State Sync
1. Problem Statement
Large e-commerce catalogs experience layout latency, component paint freezes, and state loss when users interact with multi-facet filters or share dynamic catalog pages.
2. Business Context & Friction
Optimizing list rendering speeds and ensuring instant filter responsiveness directly impacts buyer conversion rates and decreases page abandonment.
3. Learning Objectives
- Sync complex filter settings directly with URL search query states
- Build custom window recycler hook for rendering infinite lists
- Implement optimistic UI feedback patterns for cart additions
- Optimize Interaction to Next Paint (INP) to fall below 200ms
4. Functional Requirements
Dynamic URL Multi-Facet Filters
must-haveSearch query params must reflect categories, price ranges, ratings, and sort order. Copying the URL preserves matching items view.
Infinite Recycled Layout Grid
must-haveRender catalog cards using an observer recyclying off-screen DOM nodes to prevent memory bloating.
Optimistic Add-to-Cart Action
should-haveAdd item counts in cart instantly, falling back gracefully to previous state if API response returns an error.
Prefetching Hover triggers
nice-to-haveTrigger API fetches for next page or product details when user hover markers target respective components.
5. Non-Functional Specifications
Performance
- •Time to Interactive (TTI) must reside under 2.5 seconds on mobile 3G networks.
- •Interaction to Next Paint (INP) must stay below 150ms during active filtering operations.
Scalability
- •Catalog listing DOM node counts must remain constant regardless of scrolling depth.
- •Support concurrent renders of up to 10,000 product inventory records in state collections.
Accessibility (A11y)
- •Dynamic filter switches must announce updated results count to screen readers via aria-live status containers.
- •Ensure image items expose custom ALT strings mapping brand descriptions.
Security
- •Query params must undergo sanitization before evaluation to avoid XSS injections.
- •Secure APIs headers to block unauthorized scraping bots.
Reliability & Fault Tolerance
- •Fallback gracefully to local offline-cached product lists if network failures occur.
- •API errors must show context-specific toast notifications and retry button bindings.
Observability & Telemetry
- •Track and log INP breakdown phases to analytics endpoints.
- •Log query fetch durations and cache hit-miss metrics.
6. Core Modules Breakdown
URL Synchronization Engine
Controls bidirectional state sync between search inputs and window location query parameters.
- •Read and parse current location params
- •Push sanitized URL modifications into history states
- •Handle popstate navigation actions
Infinite Recycler Scroller
Client-side virtual layout engine mapping items arrays into constrained window arrays.
- •Track vertical scroll offsets
- •Calculate viewport visibility ranges
- •Recycle absolute positioned card elements
Server Cache Adapter
Data fetching client wrapper coordinating cache stale indicators and prefetch routines.
- •Fetch paginated catalog queries
- •Invalidate stale caches on catalog updates
- •Pre-fetch sibling index lists
7. Key User Flows
Shopper applies filter check
- Shopper clicks 'Refurbished' checkbox in facet sidebar.
- URL instantly transitions to include '?condition=refurbished'.
- TanStack Query catches parameters rewrite, triggers fetch, and updates viewport smoothly.
Shopper scrolls deep down listing
- Shopper scrolls viewport past 40 records.
- IntersectionObserver flags trigger marker.
- Next page fetches in background. Recycler shifts off-screen cards to bottom container, rewriting node attributes.
8. Architectural Blueprint
frontend Architecture
- •SPA application leveraging Next.js App Router for server rendering with hydration overlays.
- •Component division separating filter controls from list grids.
state Management
- •Zustand for client-side local cart and modal layouts.
- •TanStack Query managing remote catalog server-state queries.
data Fetching
- •Server side rendering for initial loads; client-side paginated hydration calls for filters.
caching
- •Stale-while-revalidate client cache.
- •Browser sessionStorage caching recent filter search arrays.
routing
- •Next.js dynamic client routing mapping query variables.
deployment
- •Statically generated shell using ISR (Incremental Static Regeneration) on edge distributions.
9. Component Execution Plan
| Component | Responsibility | Notes |
|---|---|---|
| FilterFacetPanel | Renders checkbox and range inputs mapping values. | Binds inputs to custom useUrlFilters state hooks. |
| VirtualProductGrid | Renders windowed container viewport looping through active items. | Uses IntersectionObserver to trigger append pages. |
| ProductCard | Visual card displaying price, rating, titles, and add triggers. | Memoized to prevent visual re-paints. |
10. API Specifications
Query catalog items by pagination and facets.
{
"items": [
{ "id": "p1", "title": "Laptop", "price": 999 }
],
"totalPages": 10,
"totalItems": 200
}11. Logical Data Schemas
ProductItem
Standard database schema mapping individual inventory properties.
12. Curriculum Milestones
Project Routing Setup
- •Create Next.js route wrapper configurations.
- •Enforce custom hook schemas syncing search query parameters.
Facet Filters Integration
- •Build sidebar panel with inputs.
- •Hook query calls to fetch catalog data dynamically.
List Virtualizer Hook
- •Develop custom useVirtualList hook.
- •Reposition grid cards absolute containers to recycle DOM structures.
Optimistic Actions & Prefetching
- •Integrate optimistic cart updates.
- •Add hover trigger prefetch listeners.
Metrics Analysis
- •Expose performance metrics charts.
- •Complete system design architectural interview guide sheets.
13. Technical Execution Roadmap
URL state routing
Design filters panel syncing values with useSearchParams hook.
Catalog queries setup
Configure TanStack Query queries mapping parameters.
Virtual listing core
Introduce viewport recycle logics to maintain stable node counts.
Optimistic feedback UI
Add cart action button mapping state updates.
14. Systems Interview Deep Dive
Elevator Pitch
“I built a highly optimized e-commerce product listing page that uses dynamic URL search state mapping, TanStack Query for cache invalidation, and custom vertical grid virtualization to minimize INP lag.”
Architecture Summary
Client state is partitioned: search and facet states live in the URL for shareability, cart state is in Zustand for performance, and server catalog data is in TanStack Query. Dom recycling ensures fast paints.
Architectural Tradeoffs
- ▲DOM Recycling complicates keyboard navigation, requiring manual tabindex calculations.
- ▲Syncing filters to URL creates browser history noise, resolved by swapping history push with replace on intermediate inputs.
Possible Follow-up Questions
- ?How do you resolve memory leaks in custom virtualized layouts?
- ?Describe your strategy to minimize layout shift when loading catalog image cards.
15. Future Enhancements
- Add search query autocomplete inputs.
- Implement client-side personal recommendation logic.
16. Future Integration Links
GitHub Repository
Access to source code files is planned for later.
Live Demo Application
Interactive live deployment sandbox environment.
Project Documentation
Detailed setup, guidelines and design patterns docs.