Skip to content

WISHLIST_FEATURE.md

Latest commit

 

History

History
80 lines (60 loc) · 2.17 KB

WISHLIST_FEATURE.md

File metadata and controls

80 lines (60 loc) · 2.17 KB

Wishlist Feature - Implementation Guide

What Was Implemented

Backend

  1. Wishlist Routes (backend/routes/wishlistRoutes.js)

    • GET /api/wishlist - Fetch user's wishlist
    • POST /api/wishlist/:productId - Add product to wishlist
    • DELETE /api/wishlist/:productId - Remove product from wishlist

  2. User Model - Already had wishlist field (array of Product references)

  3. Server - Added wishlist routes to Express app

Frontend

  1. Wishlist Store (lib/store.ts)

    • Syncs with backend API
    • Persists to localStorage
    • Loads automatically when user logs in

  2. Navigation (components/navbar.tsx)

    • Wishlist icon with badge showing item count
    • Desktop menu link to wishlist page
    • Mobile dropdown menu link

  3. Wishlist Page (app/wishlist/page.tsx)

    • Displays all saved products
    • Add to cart functionality
    • Remove from wishlist

  4. Products Page (app/products/page.tsx)

    • Heart icon to add/remove from wishlist
    • Shows filled heart for wishlisted items

How to Test

  1. Start the backend server:

    cd backend
npm run dev

  2. Start the frontend:

    npm run dev

  3. Test the feature:

    • Login or register as a customer
    • Go to Products page
    • Click the heart icon on any product
    • Check the wishlist icon in navbar (should show count)
    • Click "Wishlist" in navbar or the heart icon
    • View your saved products
    • Products persist across sessions

Troubleshooting

If wishlist is not saving:

  1. Check if you're logged in - Wishlist requires authentication
  2. Check browser console for errors
  3. Check backend logs for API errors
  4. Verify MongoDB connection is working
  5. Check that DISABLE_AUTH is set correctly in .env

API Endpoints

Test with curl or Postman:

# Get wishlist (requires auth token)
curl -H "Authorization: Bearer YOUR_TOKEN" http://localhost:5000/api/wishlist

# Add to wishlist
curl -X POST -H "Authorization: Bearer YOUR_TOKEN" http://localhost:5000/api/wishlist/PRODUCT_ID

# Remove from wishlist
curl -X DELETE -H "Authorization: Bearer YOUR_TOKEN" http://localhost:5000/api/wishlist/PRODUCT_ID