feat: Implement real-time stock updates using WebSockets (#178)

[devprashant19]

Description

This Pull Request integrates Socket.io to push real-time stock updates from our Express backend to all connected React clients. This resolves the issue where users were forced to manually refresh the page to see if an item went out of stock.

Fixes #178

Changes Made

• Backend (BACKEND/server.js, BACKEND/controllers/):
  • Installed socket.io and wrapped the Express application in an http.Server to attach the WebSocket server.
  • Added io.emit("stockUpdate") inside the stripeWebhook logic and updateProduct route so that any stock reduction broadcasts globally.
• Frontend (FRONTEND/src/pages/ProductPage.jsx, FRONTEND/src/components/ui/ProductCard.jsx):
  • Installed socket.io-client and initialized a global socket connection to the backend.
  • Added useEffect hooks in the product view components to listen for incoming stockUpdate events.
  • Successfully synced the UI, dynamically disabling the "Add to Cart" button and changing the stock badges immediately across all active browser sessions when stock drops to 0.

Acceptance Criteria Met

• Set up Socket.io alongside the Express server.
• Emit a stockUpdate event containing productId and newStock upon stock updates.
• Connect to the WebSocket on the ProductPage and ProductCard components.
• Listen for stockUpdate events and dynamically update the UI in real-time.

How to Test Locally

1. Checkout this branch and run npm install in both FRONTEND and BACKEND directories.
2. Start both development servers using npm run dev.
3. Open the application in two side-by-side browser windows.
4. From Browser A, trigger a checkout flow or edit the product stock as an admin so that a product's stock is reduced to 0.
5. Watch Browser B: The product should instantly show "Out of Stock" and the "Add to Cart" button should be disabled without any manual page refresh!

[vercel]

@devprashant19 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.

[Aamod-Dev]

Review: Real-time stock updates via WebSockets. Check WebSocket server setup, stock update event triggers, client-side WebSocket connection, reconnection handling, and scalability with multiple clients. Document WebSocket endpoint. Hard difficulty appropriate.

[devprashant19]

@Aamod-Dev please review it now

[Aamod-Dev]

package-lock.json has unresolved merge conflict markers (<<<<<<< HEAD / >>>>>>> origin/main). This will break npm install.

Fix: Run npm install in BACKEND/ and FRONTEND/ to regenerate clean lockfiles, then commit.

[Aamod-Dev]

Request Changes

• No backend code emits stockUpdate events. io server is created but no controller or model hook emits stock changes. Frontend listeners will never fire.
• socket instance created at module level in ProductCard.jsx and ProductPage.jsx. Connects on import for all users, even on pages that do not need it.
• test-socket.mjs should not be committed, or move to a test directory.
• Unrelated lint cleanup changes should be in a separate PR.

[Aamod-Dev]

Missing backend WebSocket emission

[Aamod-Dev]

Looks good, approved!

[Aamod-Dev]

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