Trending Items Discovery

Trending Items Discovery

Summary

Trending Items provides curated gift suggestions to inspire users and simplify wishlist creation.

User Story

As a user,
I want to browse trending gift ideas,
So that I can quickly populate my wishlist without searching externally.

Acceptance Criteria

• ✅ User can browse trending items by category
• ✅ User can filter items by price range
• ✅ User can add trending items to any wishlist
• ✅ Items show product image, name, price, and source
• ✅ External links open retailer pages

Inputs and Outputs

Inputs:

• Price range filter (min, max)
• Category filter (optional)

Outputs:

• Grid of trending items
• Quick-add to wishlist functionality

Flow

User navigates to /items
     │
     ▼
GET /items/trending
     │
     ▼
Display items grid with filters
     │
     ▼
User selects price range: $20-$50
     │
     ▼
Filter items client-side or refetch
     │
     ▼
User clicks "+ Add" on item
     │
     ▼
Show wishlist selector bottom sheet
     │
     ▼
User selects wishlist and confirms
     │
     ▼
POST /wishlists/:id/item
  { name, url, image, price, isFavorite }
     │
     ▼
Show "Added to wishlist" toast

API/Contracts

Get Trending Items

Request:

GET /items/trending?range=2
Authorization: Bearer {token}

Response:

{
  "success": true,
  "items": [
    {
      "id": 1,
      "name": "Wireless Earbuds",
      "image": "https://cdn.rnb.la/trending/item1.jpg",
      "price": 49.99,
      "url": "https://amazon.com/product/123"
    },
    ...
  ]
}

Example

// Fetch trending items
const { data, loading } = useSelector((state) => state.suggestedItems);

useEffect(() => {
  dispatch(fetchSuggestedItems(priceRange));
}, [dispatch, priceRange]);

// Add to wishlist
const handleAddItem = async (item, wishlistId) => {
  await itemHandlers.createItem(wishlistId, false, item.name, item.url, item.image);
  toast.success('Added to wishlist');
};

Further Reading

• Item Management - Adding items to wishlists
• Wishlist Management - Wishlist creation