Implement server-side user model with wishlist persistence

[Copilot]

Implements user management with server-side wishlist storage. Users register/login via API, wishlist operations use userId for data isolation.

Backend

User Model (api/src/models/user.ts)

interface User {
  userId: number;
  email: string;
  name: string;
  isAdmin: boolean;
  createdAt: Date;
  wishlistProductIds: number[];
}

API Endpoints (api/src/routes/user.ts)

• POST /api/users - Registration with email/password validation
• GET /api/users/:email - Fetch user by email
• PUT /api/users/id/:userId - Update user
• GET /api/users/:userId/wishlist - Returns full product details
• POST /api/users/:userId/wishlist - Add product
• DELETE /api/users/:userId/wishlist/:productId - Remove product

Tests - 25 test cases covering CRUD, validation, and wishlist operations

Seed Data - 3 users with pre-populated wishlists (alice@example.com, bob@github.com, charlie@example.com)

Frontend

AuthContext Rewrite (frontend/src/context/AuthContext.tsx)

• Stores complete User object instead of boolean flags
• Session persistence via sessionStorage
• Fetches user data from API on login

WishlistContext (frontend/src/context/WishlistContext.tsx)

• React Query integration for caching and optimistic updates
• Requires authentication, uses userId for all operations

New Components

• Register.tsx - Registration form with password confirmation
• Wishlist.tsx - Product grid with remove functionality

Updated Components

• Products.tsx - Heart icon toggles on product cards (authenticated only)
• Navigation.tsx - Wishlist link with count badge, user name display
• Login.tsx - Register link, improved error messages

Routes

• /register → Registration form
• /wishlist → Wishlist page

Architecture

// Provider hierarchy in App.tsx
<QueryClientProvider client={queryClient}>
  <AuthProvider>
    <ThemeProvider>
      <WishlistProvider>
        <ThemedApp />
      </WishlistProvider>
    </ThemeProvider>
  </AuthProvider>
</QueryClientProvider>

Screenshots

Registration Page

Login Page

Products Page with Heart Icons

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Add Full User Model with Wishlist Feature (Variation 3)</issue_title>
<issue_description>## Variation 3: Enhanced User Model with Wishlist

Overview

Implement a comprehensive user management system with proper user models and authentication. The wishlist becomes a property of the User entity, creating the most complete and scalable solution.

Implementation Details

Backend (API):

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

export interface User {
    userId: number;
    email: string;
    name: string;
    isAdmin: boolean;
    createdAt: Date;
    wishlistProductIds: number[]; // Array of product IDs
}

2. Create api/src/routes/user.ts with full CRUD operations

   • Swagger JSDoc documentation
   • Endpoints:
     • POST /api/users - Register new user
     • GET /api/users/:email - Get user by email (for login)
     • PUT /api/users/:userId - Update user details
     • GET /api/users/:userId/wishlist - Get user's wishlist with full product details
     • POST /api/users/:userId/wishlist - Add product to user's wishlist
     • DELETE /api/users/:userId/wishlist/:productId - Remove from wishlist
   • Validation: email format, unique email, password requirements
   • Include resetUsers() function for tests

3. Create api/src/routes/user.test.ts

   • Test user creation and retrieval
   • Test wishlist operations
   • Test validation rules
   • Test duplicate email prevention

4. Add user seed data to api/src/seedData.ts

   • Create sample users with pre-populated wishlists
   • Include admin and regular users
   • Export as users array

5. Update api/src/index.ts

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

Frontend:

1. Complete rewrite of frontend/src/context/AuthContext.tsx

   • Store full User object (userId, email, name, isAdmin)
   • Add registration functionality
   • Update login to fetch user from API by email
   • Store userId for API calls
   • Persist user data in sessionStorage

2. Create frontend/src/components/Register.tsx

   • Registration form (name, email, password, confirm password)
   • Form validation
   • Call POST /api/users endpoint
   • Redirect to login on success
   • Dark mode support

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

   • Fetch wishlist using userId: GET /api/users/:userId/wishlist
   • Provide hooks with userId-based operations
   • Use react-query for caching
   • Require authentication

4. Update frontend/src/components/entity/product/Products.tsx

   • Add heart icon button (authenticated users only)
   • Call API: POST /api/users/:userId/wishlist
   • Show loading state during API calls
   • Optimistic UI updates

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

   • Fetch from GET /api/users/:userId/wishlist
   • Display full product details with images
   • Remove functionality
   • Empty state with call-to-action
   • Dark mode support

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

   • Add "Register" link
   • Fetch and store full user object on login
   • Better error messages

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

   • Add "Wishlist" link (authenticated only)
   • Add "Register" link (unauthenticated only)
   • Show user name when logged in
   • Display wishlist count badge

8. Update frontend/src/App.tsx

   • Add WishlistProvider
   • Add routes:
     • /wishlist → <Wishlist />
     • /register → <Register />

9. Update frontend/src/api/config.ts

   • Add endpoint: users: '/api/users'

Authentication Flow:

1. New users register → user created in API
2. Login → fetch user by email, store in AuthContext
3. All wishlist operations use userId
4. Logout → clear user from context and sessionStorage

Advanced Features:

• Password validation (length, complexity)
• Email format validation
• Duplicate email prevention
• User profile page (optional)
• Session persistence across page reloads

Testing

API Tests:

• User CRUD operations
• Email uniqueness validation
• Wishlist operations per user
• Authentication edge cases

Manual Frontend Tests:

• Register new user
• Login with new user
• Add products to wishlist
• View wishlist page
• Remove from wishlist
• Logout and verify session cleared
• Login as different user and verify separate data
• Test session persistence (page reload)

Files to Create/Modify:

API:

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

Frontend:

• Create: frontend/src/components/Register.tsx
• Create: frontend/src/context/WishlistContext.tsx
• Create: frontend/src/components/Wishlist.tsx
• Modify: frontend/src/context/AuthContext.tsx (major rewrite)
• Modify: frontend/src/components/Login.tsx
• Modify: `fron...

• Fixes Add Full User Model with Wishlist Feature (Variation 3) #7

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.