39647-vm/SECTION_4_INTEGRATION.md

Frontend-Backend Integration Guide

Section 4: Product Management - COMPLETED ✅

Your website is now connected to a backend API for managing products and cart operations!

---

Getting Started

1. Start the Backend Server

# Navigate to backend directory
cd backend

# Install dependencies (first time only)
npm install

# Run the server
npm start

The server will start on http://localhost:5000

2. See Available API Endpoints

The following product endpoints are now available:

Public Endpoints:

• GET /api/products - Get all products (with filtering, sorting, search)
• GET /api/products/categories - Get all categories
• GET /api/products/category/:category - Get products by category
• GET /api/products/:id - Get product details

Admin Endpoints:

• POST /api/products - Create product
• PUT /api/products/:id - Update product
• DELETE /api/products/:id - Delete product
• PUT /api/products/:id/stock - Update stock

---

Frontend API Functions

All API functions are available in js/api.js and can be called from your HTML pages.

Product Functions

// Get all products
getAllProducts(category, sortBy, search, page, limit)

// Get product by ID
getProductById(productId)

// Get all categories
getCategories()

// Get products by category
getProductsByCategory(category)

// Display products on page
displayProducts(containerId, category)

Cart Functions

// Get user's cart
getCart()

// Add item to cart
addToCart(productId, quantity)

// Update cart item quantity
updateCartItem(productId, quantity)

// Remove item from cart
removeFromCart(productId)

// Clear entire cart
clearCart()

// Apply discount code
applyDiscount(discountCode, discountAmount)

// Apply shipping cost
applyShipping(shippingCost)

// Display cart on page
displayCart(containerId)

Auth Functions

// Register user
register(firstName, lastName, email, password, passwordConfirm)

// Login user
login(email, password)

// Logout user
logout()

// Check if logged in
isLoggedIn()

// Get auth token
getToken()

---

How to Insert Test Products

Option 1: Using MongoDB Compass (GUI)

1. Open MongoDB Compass
2. Connect to your MongoDB (usually mongodb://localhost:27017)
3. Create database: moms-web
4. Create collection: products
5. Insert sample documents:

{
  "name": "Burger Combo",
  "description": "Delicious beef burger with fries and drink",
  "price": 12.99,
  "salePrice": 9.99,
  "category": "Food",
  "image": "https://via.placeholder.com/300?text=Burger",
  "images": ["https://via.placeholder.com/300?text=Burger"],
  "stock": 50,
  "sku": "BURGER-001",
  "tags": ["popular", "combo"],
  "isActive": true,
  "createdAt": new Date(),
  "updatedAt": new Date()
}

Option 2: Using Postman or cURL

curl -X POST http://localhost:5000/api/products \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer YOUR_ADMIN_TOKEN" \
  -d '{
    "name": "Pizza",
    "description": "Cheese pizza with toppings",
    "price": 15.99,
    "category": "Food",
    "image": "https://via.placeholder.com/300?text=Pizza",
    "stock": 30,
    "sku": "PIZZA-001"
  }'

Option 3: Node.js Script

Create backend/seed.js:

const mongoose = require('mongoose');
require('dotenv').config();

const Product = require('./models/productModel');

const products = [
  {
    name: "Burger Combo",
    description: "Delicious beef burger with fries and drink",
    price: 12.99,
    salePrice: 9.99,
    category: "Food",
    image: "https://via.placeholder.com/300?text=Burger",
    stock: 50,
    sku: "BURGER-001",
    tags: ["popular"],
    isActive: true,
  },
  {
    name: "Pizza Margherita",
    description: "Classic pizza with fresh mozzarella",
    price: 15.99,
    category: "Food",
    image: "https://via.placeholder.com/300?text=Pizza",
    stock: 40,
    sku: "PIZZA-001",
    tags: ["classic"],
    isActive: true,
  },
  {
    name: "Caesar Salad",
    description: "Fresh salad with chicken and dressing",
    price: 8.99,
    category: "Salads",
    image: "https://via.placeholder.com/300?text=Salad",
    stock: 60,
    sku: "SALAD-001",
    tags: ["healthy"],
    isActive: true,
  },
];

const seedDB = async () => {
  try {
    await mongoose.connect(process.env.DATABASE_URL || 'mongodb://localhost:27017/moms-web');
    
    // Clear existing products
    await Product.deleteMany({});
    
    // Insert products
    const result = await Product.insertMany(products);
    console.log(`✅ ${result.length} products inserted`);
    
    process.exit(0);
  } catch (error) {
    console.error('Error seeding database:', error);
    process.exit(1);
  }
};

seedDB();

Run with:

node seed.js

---

Using Products on Your Website

Example 1: Display All Products

<!-- Add a container in your HTML -->
<div id="productsContainer"></div>

<!-- Call this function -->
<script>
  // On page load
  displayProducts('productsContainer');
</script>

Example 2: Add Products by Category

<div id="foodProducts"></div>

<script>
  displayProducts('foodProducts', 'Food');
</script>

Example 3: Create Order Button

<button onclick="addToCart('PRODUCT_ID_HERE', 1)">
  Add to Cart
</button>

Example 4: Display Shopping Cart

<div id="cartContainer"></div>

<script>
  displayCart('cartContainer');
</script>

---

Testing the Integration

1. Register a new user (visit your frontend and sign up)
2. Browse products (products should display from API)
3. Add to cart (click Add to Cart button)
4. View cart (cart should show items from database)
5. Update quantities (change amounts in cart)
6. Remove items (delete from cart)

---

Common Issues & Troubleshooting

"Cart is empty" message

• Make sure you're logged in first
• Check browser console for errors (F12 → Console)
• Verify backend is running on port 5000

Products not showing

• Backend server not running
• MongoDB not connected
• No products in database (use seed script)
• Check browser console for errors

"Please log in" message

• User authentication required
• Create user account first
• Token may have expired

CORS error

• Backend CORS is already configured
• Make sure backend is running
• Check the API_BASE_URL in js/api.js

---

Next Steps

Section 5 (Shopping Cart & Checkout) is already implemented!

• Cart calculations work automatically
• Total, tax, shipping, and discount calculations are included
• Next: Implement payment processing (Stripe/PayPal)

---

File Locations

Backend Files:

• backend/controllers/productController.js - Product logic
• backend/routes/productRoutes.js - Product endpoints
• backend/models/productModel.js - Product schema

Frontend Files:

• js/api.js - All API functions
• index.html - Connected to API
• order.html - Connected to API