Implement "Recently Viewed" Section

[Alexandrbig1]

Priority: High
Difficulty: Advanced
Type: Frontend Feature

---

Description:
Create a Recently Viewed section at the bottom of the All Products page.
This section displays products the user has recently visited.

---

Requirements:

1. Tracking

   • When a user clicks on a product (e.g., navigates to /products/:id), store that product in LocalStorage under recentlyViewed.
   • Ensure duplicates are not added (if already viewed, move it to the most recent position).
   • Limit history to the last 10 products.

2. Recently Viewed Section

   • Appears below the product grid on /products.
   • Title: "Recently Viewed".
   • Display product cards (same style as product grid cards).
   • Supports pagination/slider (e.g., 5 items per view, user can navigate to next/prev).

3. Product Card

   • Same design as main products (image, title, price, rating, flavors, wishlist, add to cart, hover → "View Product").

4. Persistence

   • Data comes from LocalStorage only (for now).
   • When user returns later, section should still show their recently viewed products.

---

Assets:

---

Acceptance Criteria:

• Products user clicks on are tracked and stored in LocalStorage.
• Section appears under the products grid with title "Recently Viewed".
• Shows up to 10 items (most recent first).
• Slider/pagination works correctly.
• Clicking a card works the same as product grid (navigate to details, add to cart, wishlist, etc.).

[shiv7shukla]

Hi would like to work on this feature. Can you assign it to me ?

[Alexandrbig1]

@shiv7shukla, this is an advanced task. Are you sure you'll be able to do it well? Or maybe you can pick any other task?

[AparAgarwal]

Hey @Alexandrbig1, I'd like to take on this task. I've previously implemented the All Products page, and this one should be straightforward as well.

Just one question: are we supposed to add this section after the products on the All Products page? If so, the products are displayed using infinite scroll and get appended to the UI as the user scrolls, which could make the Recently Viewed Products section unstable.

[shiv7shukla]

@Alexandrbig1 Yes, I can work on this feature and if I'll be needing any kind of help, I'll ask for it.

[Alexandrbig1]

@AparAgarwal, thanks — sounds good. Please add the Recently Viewed as a separate component outside the infinite-scroll product list. That avoids instability when products are appended.

[Alexandrbig1]

@shiv7shukla, thanks for the offer — another contributor is already assigned and actively working on this task. Please check the open tasks in the "Todo" column and leave a comment on any you’d like to work on. I’ll assign it to you.