Add email-based wishlist feature with server-side persistence

[Copilot]

Implements server-side wishlist storage keyed by user email. Users can save products across sessions, with separate wishlists per email address.

Backend

• API routes (/api/wishlist):
  • GET /:email - retrieve user's wishlist
  • POST / - add item with duplicate prevention and product validation
  • DELETE /:email/:productId - remove item
• In-memory storage with seed data, follows existing route patterns

Frontend

• WishlistContext - react-query for data fetching/mutations, automatic cache invalidation on add/remove
• AuthContext - extended to store email alongside login state
• Product cards - heart icon toggle (filled when in wishlist)
• Wishlist page - authenticated route with product grid and remove buttons
• Navigation - wishlist link with badge count (hidden when logged out)

Example Usage

// Adding to wishlist (Products.tsx)
const { addToWishlist, isInWishlist } = useWishlist();
await addToWishlist(productId); // Auto-refetches via react-query

// Checking wishlist status
{isInWishlist(product.productId) ? <FilledHeart /> : <EmptyHeart />}

Screenshots

Products page with wishlist hearts:

Wishlist page:

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Add Email-Based API Wishlist Feature (Variation 2)</issue_title>
<issue_description>## Variation 2: Email-Based API Wishlist

Overview

Implement a backend-driven wishlist feature that stores wishlist data per email address. Requires user login and follows the existing API patterns used in the codebase.

Implementation Details

Backend (API):

1. Create wishlist model at api/src/models/wishlist.ts

export interface WishlistItem {
    wishlistItemId: number;
    email: string;
    productId: number;
    addedAt: Date;
}

2. Add wishlist seed data to api/src/seedData.ts

   • Add sample wishlist items for demo users
   • Export as wishlistItems array

3. Create api/src/routes/wishlist.ts following the established pattern

   • Swagger JSDoc documentation
   • CRUD endpoints:
     • GET /api/wishlist/:email - Get all wishlist items for user
     • POST /api/wishlist - Add product to wishlist (body: {email, productId})
     • DELETE /api/wishlist/:email/:productId - Remove from wishlist
   • Include resetWishlist() function for testing
   • Return 404 for not found items
   • Validate that productId exists before adding

4. Create api/src/routes/wishlist.test.ts

   • Test all CRUD operations
   • Test duplicate prevention
   • Test email filtering
   • Follow pattern from branch.test.ts

5. Update api/src/index.ts

   • Import and mount wishlist router at /api/wishlist
   • Add to Swagger docs

Frontend:

1. Update frontend/src/context/AuthContext.tsx

   • Add email property to context
   • Store email on login
   • Clear email on logout

2. Create frontend/src/context/WishlistContext.tsx

   • Fetch wishlist from API using user email
   • Provide hooks: useWishlist(), addToWishlist(), removeFromWishlist(), isInWishlist()
   • Use react-query for data fetching and mutations
   • Require authentication (check isLoggedIn)

3. Add to frontend/src/api/config.ts

   • Add endpoint: wishlist: '/api/wishlist'

4. Add wishlist UI to frontend/src/components/entity/product/Products.tsx

   • Heart icon button on each product card (show only when logged in)
   • Toggle filled/unfilled based on API wishlist status
   • On click: call API to add/remove
   • Optimistic updates with react-query

5. Create frontend/src/components/Wishlist.tsx page

   • Require login (redirect if not authenticated)
   • Fetch user's wishlist items
   • Join with products data to display full product details
   • Grid layout matching Products page
   • Remove button on each item
   • Empty state for new users

6. Update frontend/src/App.tsx

   • Add WishlistProvider
   • Add route: /wishlist → <Wishlist />

7. Update frontend/src/components/Navigation.tsx

   • Add "Wishlist" link (show only when logged in)
   • Display count badge from API
   • Hide when not authenticated

8. Update frontend/src/components/Login.tsx

   • Store user email in AuthContext on successful login

Technical Requirements:

• Follow existing API route patterns (see branch.ts and product.ts)
• Use Swagger JSDoc for API documentation
• Include comprehensive tests using Vitest + supertest
• Use react-query for all API calls
• Handle authentication checks properly
• Support dark mode throughout
• Error handling for network failures

Data Flow:

1. User logs in → email stored in AuthContext
2. WishlistContext fetches items from /api/wishlist/:email
3. Add/remove operations hit API endpoints
4. React-query auto-refetches on mutations

Testing

API Tests:

• GET all wishlist items for user
• POST new wishlist item
• DELETE wishlist item
• Duplicate prevention
• Email filtering

Manual Frontend Tests:

• Login and add items to wishlist
• View wishlist page
• Remove items from wishlist
• Logout and verify wishlist cleared
• Login as different user and verify separate wishlist

Files to Create/Modify:

API:

• Create: api/src/models/wishlist.ts
• Create: api/src/routes/wishlist.ts
• Create: api/src/routes/wishlist.test.ts
• Modify: api/src/seedData.ts
• Modify: api/src/index.ts

Frontend:

• Create: frontend/src/context/WishlistContext.tsx
• Create: frontend/src/components/Wishlist.tsx
• Modify: frontend/src/context/AuthContext.tsx
• Modify: frontend/src/api/config.ts
• Modify: frontend/src/components/entity/product/Products.tsx
• Modify: frontend/src/App.tsx
• Modify: frontend/src/components/Navigation.tsx
• Modify: frontend/src/components/Login.tsx

Success Criteria:

• API endpoints functional with tests passing
• Users can manage wishlist when logged in
• Wishlist stored server-side per email
• Different users have separate wishlists
• UI patterns match existing code
• Comprehensive test coverage
• Swagger documentation updated</issue_description>

Comments on the Issue (you are @copilot in th...

• Fixes Add Email-Based API Wishlist Feature (Variation 2) #5

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.