Feature/save for later cart

[Suhaskumard]

Description

This PR introduces a robust "Save for Later" functionality within the shopping cart, allowing users to effortlessly move items out of their active cart without permanently deleting them.

The implementation bridges the gap between guest users and authenticated users by offering instant localStorage persistence that smartly synchronizes with the backend database upon login, ensuring a seamless and clutter-free shopping experience.

Closes #295

Type of Change

• New feature
• Bug fix
• Documentation update
• Refactoring

Checklist

• Code follows project style
• Tested locally
• Updated documentation
• Added demo video

---

Changes Made

Guest Mode Support (Local Storage)

Implemented a frontend state manager utilizing Zustand's persist middleware to handle "Save for Later" items for unauthenticated users.

The Guest Mode:

• Saves items instantly to localStorage
• Does not require account creation to function
• Preserves saved items across browser sessions

---

Authenticated Database Persistence

Designed a dedicated backend infrastructure to track saved items for logged-in users.

The Authenticated Mode:

• Tracks saved items securely in a dedicated Mongoose collection (SavedForLater)
• Automatically fetches saved items upon login or initial load
• Associates saved items with the authenticated user's account

---

Smart Synchronization System

Integrated a synchronization hook that executes upon successful login to bridge guest and authenticated states.

The synchronization logic:

• Detects locally saved items in localStorage
• Merges local items with existing backend data
• Prevents duplicate entries through ID-based filtering
• Clears temporary local data after successful synchronization

---

Interactive Cart Drawer UI

Enhanced the cart drawer experience to seamlessly integrate the new feature.

Enhancements include:

• Dedicated "Saved for Later" section
• Save for Later action for active cart items
• Move to Cart action for saved items
• Remove action for permanently deleting saved items
• Smooth transitions between active cart and saved items

---

Ghost Product Bug Fix

Resolved a critical issue where the frontend could fail if a saved product was removed from the inventory by an administrator.

The fix:

• Filters invalid product references during population
• Returns only valid product records to the frontend
• Prevents crashes caused by missing or deleted products

---

Files Added

Backend

• SavedForLater model
• savedForLater.controller.js
• savedForLater.route.js
• savedForLater.test.js

Frontend

• useSavedForLaterStore

---

Files Updated

• Navbar.jsx
• Login.jsx
• app.js

---

User Experience Improvements

Improved Cart Management

Users are no longer forced to either purchase an item immediately or remove it entirely.

Instead:

• Items can be saved for future consideration
• Active carts remain clean and focused
• Products can move between lists with a single click

Consistent User Feedback

Actions provide immediate visual confirmation through UI updates and notifications, improving responsiveness and clarity.

Seamless Guest-to-User Transition

Users can begin shopping as guests, save products, and later sign in without losing their saved items.

---

How Has This Been Tested?

Backend Validation

Verified:

• Creation of saved items
• Deletion of saved items
• Authorization and access control
• Product population behavior

Synchronization Testing

Verified:

• Local items merge into empty accounts
• Local items merge into populated accounts
• Duplicate items are ignored
• Local state clears after synchronization

UI & Edge Case Testing

Covered scenarios including:

• Empty cart state
• Empty saved items state
• Deleted products
• Multiple saved items
• Cart drawer rendering and scrolling behavior

---

Acceptance Criteria

• Users can move items from the cart to a Saved for Later list
• Users can move items from Saved for Later back to the cart
• Guest users can save items using local storage
• Authenticated users can save items to the database
• Guest data synchronizes after login
• Duplicate saved items are prevented
• Deleted products do not cause frontend crashes
• A demo video is provided

Technical Notes

• The useSavedForLaterStore implementation leverages Zustand's persist middleware to maintain local persistence independently from UI components.
• Backend filtering ensures invalid or deleted product references are removed before data reaches the frontend.
• Synchronization logic intelligently merges guest and authenticated states while preserving existing saved items.

---

Demo Video

This demo showcases the newly implemented Save for Later functionality and synchronization workflow.

The video demonstrates:

• Saving products from the active cart to the Saved for Later section
• Moving saved products back into the active cart
• Removing products from the Saved for Later list
• Persistent storage for guest users using localStorage
• Automatic synchronization of saved items after user login
• Prevention of duplicate saved items during synchronization
• Smooth and responsive cart drawer interactions

The implementation improves cart organization, enhances shopping flexibility, and provides a seamless experience for both guest and authenticated users.

[vercel]

@Suhaskumard is attempting to deploy a commit to the niharika-mente's projects Team on Vercel.

A member of the Team first needs to authorize it.

[Suhaskumard]

Hi @niharika-mente @Aamod007,
I have solved the issue. If there are any changes, kindly let me know

[Aamod-Dev]

Looks good, approved!

[Aamod-Dev]

Needs changes: There are merge conflicts. Please resolve them.

[Suhaskumard]

Hi @Aamod007,
I have solved the issue. If there are any changes, kindly let me know

[Suhaskumard]

Hi @Aamod007,
I have solved the issue. If there are any changes, kindly let me know