Loading content…
Loading content…
Build a fast, searchable product catalog website. You will connect filtering sidebars, synchronize parameters with query URLs, implement local storage cart states, and enforce strict TypeScript data validations.
Design a searchable product catalog index featuring multi-select filters, price sliders, rating grids, list toggles, sorting mechanisms, and a persistent client-side shopping cart drawer.
Perfect for React developers ready to master advanced hooks (useMemo, useCallback), Context API state containers, URL search parameter synchronizations, and client-side database filtering techniques.
Business Objective
E-commerce platforms demand zero-latency catalog filtering. Customers should be able to filter by categories, price range, ratings, and availability. The catalog filter state must be serialized into the URL query parameters so users can share specific filter results. Product images should lazy-load, and the local cart must persist and compute taxes, discounts, and item limits client-side.
Core Features List
React 19 & TypeScript
Context API + LocalStorage
CSS Modules / TailwindCSS
ecommerce-listing/ ├── src/ │ ├── app/ │ │ ├── page.tsx # Main catalog layout │ │ └── layout.tsx │ ├── components/ │ │ ├── CatalogGrid.tsx # Grid wrapper │ │ ├── FilterSidebar.tsx # Sidebar inputs │ │ ├── CartDrawer.tsx # Cart slide-over drawer │ │ └── ui/ │ │ ├── RangeSlider.tsx # Price selectors │ │ └── StarsRating.tsx # Graphic stars │ ├── context/ │ │ └── CartContext.tsx # Global shopping cart provider │ ├── hooks/ │ │ └── useDebounce.ts # Hook for input debouncing │ ├── lib/ │ │ └── products.ts # Local mock product records │ └── types/ │ └── index.ts # Product, Cart, Filter types └── tsconfig.json
`CatalogGrid` Component
Maps filtered product sets into responsive grids, featuring load skeleton placeholders and empty-result fallback screens.
`FilterSidebar` Component
Presents multi-select controls for category checkboxes, min/max price sliders, ratings, and instant-resets.
`CartDrawer` Component
Sliding lateral overlay listing cart items. Automatically calculates subtotal prices, discount code percentages, sales tax, and shipping rates.
Request Query Params:
?search=shoes&category=footwear&minPrice=20&maxPrice=150&rating=4&sort=price_desc
Response (200 OK):
{
"products": [
{
"id": "prod_1001",
"title": "Trail Runner Pro",
"price": 120.00,
"category": "footwear",
"rating": 4.5,
"inStock": true,
"imageUrl": "https://cdn.codenivra.io/products/runner.jpg"
}
],
"totalCount": 1
}CREATE TABLE categories ( slug VARCHAR(50) PRIMARY KEY, name VARCHAR(100) NOT NULL ); CREATE TABLE products ( id VARCHAR(50) PRIMARY KEY, title VARCHAR(150) NOT NULL, description TEXT, price DECIMAL(10, 2) NOT NULL, category_slug VARCHAR(50) REFERENCES categories(slug), rating DECIMAL(2, 1) CHECK (rating >= 0 AND rating <= 5), stock_count INTEGER NOT NULL DEFAULT 0, image_url VARCHAR(255) NOT NULL, created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP ); CREATE INDEX idx_products_category ON products(category_slug); CREATE INDEX idx_products_price ON products(price);
Define mock datasets and render product catalog listing structures. Create product cards responsive grid layouts.
Construct filter sidebar checkboxes, inputs, and sliders. Code debounced triggers on searches.
Connect filters state to Next.js query parameter hooks. Ensure browser history parameters and refresh preserves active filters.
Setup React Context to hold shopping items. Integrate local storage synchronization to save cart states across page loads.
Design sliding drawer menus triggering subtotal computations. Enforce stock availability checks before allowing quantity increments.
💡 Rely on useTransition: Filtering large datasets client-side causes laggy interactions. Wrap URL updating functions in React's `useTransition` to keep inputs responsive while lists process filters.
💡 Cart Calculation Integrity: Calculate the shopping cart's totals dynamically inside the render thread using `useMemo`. Never store computed totals in separate states, avoiding synchronization anomalies.
Click on any question to view the recommended architectural response for technical interviews.