Creating Realistic Mock Data for E-commerce Demos

Building an impressive e-commerce demo requires realistic product data, user profiles, and transaction information. In this guide, I'll show you how to use mockly.me's APIs to create a fully functional e-commerce demo that looks and feels like a real online store.

Why Realistic Mock Data Matters

When showcasing an e-commerce project, whether it's a portfolio piece, client demo, or proof of concept, realistic data makes all the difference:

• Professional Appearance: Realistic data makes your demo look production-ready
• Better Testing: Test edge cases with varied product information
• Client Confidence: Stakeholders can visualize the final product more easily
• Portfolio Impact: Impressive demos stand out to potential employers

Building a Product Catalog

Let's start by creating a product catalog using mockly.me's product endpoint. Each request returns a different product with realistic details.

Fetching Multiple Products

async function loadProductCatalog() {
  const products = [];
  
  // Fetch 12 different products
  for (let i = 0; i < 12; i++) {
    const response = await fetch('https://mockly.me/product');
    const product = await response.json();
    products.push(product);
  }
  
  return products;
}

// Display products in a grid
function renderProducts(products) {
  const container = document.getElementById('product-grid');
  container.innerHTML = products.map(product => `
    <div class="product-card">
      <img src="https://mockly.me/image" alt="${product.name}" class="product-image">
      <div class="product-info">
        <h3 class="product-name">${product.name}</h3>
        <p class="product-description">${product.description}</p>
        <div class="product-meta">
          <span class="product-category">${product.category}</span>
          <span class="product-price">$${product.price.toFixed(2)}</span>
        </div>
        <div class="product-badges">
          ${product.in_stock ? '<span class="badge in-stock">In Stock</span>' : '<span class="badge out-of-stock">Out of Stock</span>'}
          ${product.tags && product.tags.includes('sale') ? '<span class="badge sale">On Sale</span>' : ''}
        </div>
        <button class="add-to-cart-btn">Add to Cart</button>
      </div>
    </div>
  `).join('');
}

// Load and display products
loadProductCatalog().then(renderProducts);

Product Detail Page

Create a detailed product page with all the information users expect:

async function loadProductDetails(productId) {
  // Fetch product data
  const response = await fetch('https://mockly.me/product');
  const product = await response.json();
  
  // Fetch related products
  const relatedProducts = await Promise.all([
    fetch('https://mockly.me/product').then(r => r.json()),
    fetch('https://mockly.me/product').then(r => r.json()),
    fetch('https://mockly.me/product').then(r => r.json())
  ]);
  
  return {
    product,
    relatedProducts
  };
}

function renderProductDetails(data) {
  const { product, relatedProducts } = data;
  
  document.getElementById('product-title').textContent = product.name;
  document.getElementById('product-price').textContent = `$${product.price.toFixed(2)}`;
  document.getElementById('product-description').textContent = product.description;
  document.getElementById('product-category').textContent = product.category;
  document.getElementById('product-stock').textContent = 
    product.in_stock ? 'In Stock' : 'Out of Stock';
  
  // Render product images
  const imageGallery = document.getElementById('product-images');
  imageGallery.innerHTML = Array.from({ length: 4 }, (_, i) => `
    <img src="https://mockly.me/image?seed=${i}" alt="${product.name} view ${i + 1}">
  `).join('');
  
  // Render related products
  renderRelatedProducts(relatedProducts);
}

Building a Shopping Cart

Create a functional shopping cart using localStorage to persist cart data:

class ShoppingCart {
  constructor() {
    this.items = this.loadCart();
    this.render();
  }
  
  loadCart() {
    const saved = localStorage.getItem('cart');
    return saved ? JSON.parse(saved) : [];
  }
  
  saveCart() {
    localStorage.setItem('cart', JSON.stringify(this.items));
  }
  
  addItem(product) {
    const existingItem = this.items.find(item => item.id === product.id);
    
    if (existingItem) {
      existingItem.quantity += 1;
    } else {
      this.items.push({
        id: product.id,
        name: product.name,
        price: product.price,
        image: 'https://mockly.me/image',
        quantity: 1
      });
    }
    
    this.saveCart();
    this.render();
  }
  
  removeItem(productId) {
    this.items = this.items.filter(item => item.id !== productId);
    this.saveCart();
    this.render();
  }
  
  getTotal() {
    return this.items.reduce((sum, item) => sum + (item.price * item.quantity), 0);
  }
  
  render() {
    const cartContainer = document.getElementById('cart-items');
    const totalElement = document.getElementById('cart-total');
    
    cartContainer.innerHTML = this.items.map(item => `
      <div class="cart-item">
        <img src="${item.image}" alt="${item.name}">
        <div class="cart-item-info">
          <h4>${item.name}</h4>
          <p>$${item.price.toFixed(2)} × ${item.quantity}</p>
        </div>
        <button onclick="cart.removeItem('${item.id}')">Remove</button>
      </div>
    `).join('');
    
    totalElement.textContent = `Total: $${this.getTotal().toFixed(2)}`;
    document.getElementById('cart-count').textContent = this.items.length;
  }
}

const cart = new ShoppingCart();

User Profiles and Accounts

Add user account functionality using mockly.me's user endpoint:

async function loadUserProfile() {
  const response = await fetch('https://mockly.me/user');
  const user = await response.json();
  
  // Display user information
  document.getElementById('user-avatar').src = user.avatar;
  document.getElementById('user-name').textContent = user.name;
  document.getElementById('user-email').textContent = user.email;
  document.getElementById('user-phone').textContent = user.phone;
  document.getElementById('user-address').textContent = 
    `${user.address.street}, ${user.address.city}, ${user.address.state} ${user.address.zip_code}`;
  
  return user;
}

// Load user profile on account page
loadUserProfile();

Order History

Create an order history page using mockly.me's finance endpoints:

async function loadOrderHistory() {
  // Fetch transaction data
  const transactions = await Promise.all([
    fetch('https://mockly.me/transaction').then(r => r.json()),
    fetch('https://mockly.me/transaction').then(r => r.json()),
    fetch('https://mockly.me/transaction').then(r => r.json())
  ]);
  
  // Fetch product data for each transaction
  const orders = await Promise.all(transactions.map(async (transaction) => {
    const productResponse = await fetch('https://mockly.me/product');
    const product = await productResponse.json();
    
    return {
      orderId: transaction.id,
      date: transaction.date,
      product: product.name,
      amount: transaction.amount,
      status: transaction.status,
      productImage: 'https://mockly.me/image'
    };
  }));
  
  return orders;
}

function renderOrderHistory(orders) {
  const container = document.getElementById('order-history');
  container.innerHTML = orders.map(order => `
    <div class="order-card">
      <img src="${order.productImage}" alt="${order.product}">
      <div class="order-info">
        <h4>${order.product}</h4>
        <p class="order-id">Order #${order.orderId}</p>
        <p class="order-date">${new Date(order.date).toLocaleDateString()}</p>
        <span class="order-status ${order.status}">${order.status}</span>
      </div>
      <div class="order-amount">
        $${order.amount.toFixed(2)}
      </div>
    </div>
  `).join('');
}

loadOrderHistory().then(renderOrderHistory);

Payment Processing Demo

Simulate payment processing using mockly.me's finance endpoints:

async function processPayment(cartTotal, paymentMethod) {
  // Simulate payment processing
  const paymentData = {
    amount: cartTotal,
    method: paymentMethod,
    timestamp: new Date().toISOString()
  };
  
  // Fetch invoice data
  const invoiceResponse = await fetch('https://mockly.me/invoice');
  const invoice = await invoiceResponse.json();
  
  // Create order
  const order = {
    orderId: invoice.id,
    items: cart.items,
    total: cartTotal,
    paymentMethod: paymentMethod,
    status: 'processing',
    invoice: invoice
  };
  
  // Simulate processing delay
  await new Promise(resolve => setTimeout(resolve, 1500));
  
  // Update order status
  order.status = 'completed';
  
  return order;
}

// Handle checkout
async function handleCheckout() {
  const cartTotal = cart.getTotal();
  const paymentMethod = document.getElementById('payment-method').value;
  
  try {
    const order = await processPayment(cartTotal, paymentMethod);
    showOrderConfirmation(order);
    cart.items = [];
    cart.saveCart();
    cart.render();
  } catch (error) {
    showPaymentError(error);
  }
}

Product Search and Filtering

Implement search and filtering functionality:

class ProductFilter {
  constructor(products) {
    this.allProducts = products;
    this.filteredProducts = products;
  }
  
  filterByCategory(category) {
    this.filteredProducts = category === 'all' 
      ? this.allProducts 
      : this.allProducts.filter(p => p.category === category);
    this.render();
  }
  
  filterByPrice(min, max) {
    this.filteredProducts = this.allProducts.filter(
      p => p.price >= min && p.price <= max
    );
    this.render();
  }
  
  search(query) {
    const lowerQuery = query.toLowerCase();
    this.filteredProducts = this.allProducts.filter(
      p => p.name.toLowerCase().includes(lowerQuery) ||
           p.description.toLowerCase().includes(lowerQuery)
    );
    this.render();
  }
  
  sortBy(sortType) {
    switch(sortType) {
      case 'price-low':
        this.filteredProducts.sort((a, b) => a.price - b.price);
        break;
      case 'price-high':
        this.filteredProducts.sort((a, b) => b.price - a.price);
        break;
      case 'name':
        this.filteredProducts.sort((a, b) => a.name.localeCompare(b.name));
        break;
    }
    this.render();
  }
  
  render() {
    renderProducts(this.filteredProducts);
  }
}

Complete E-commerce Demo Example

Here's a complete HTML structure for an e-commerce demo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>E-commerce Demo</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <nav>
      <div class="logo">ShopDemo</div>
      <div class="nav-links">
        <a href="#products">Products</a>
        <a href="#cart">Cart (<span id="cart-count">0</span>)</a>
        <a href="#account">Account</a>
      </div>
    </nav>
  </header>
  
  <main>
    <section id="hero">
      <h1>Welcome to ShopDemo</h1>
      <p>Discover amazing products</p>
    </section>
    
    <section id="products">
      <div class="filters">
        <input type="text" id="search" placeholder="Search products...">
        <select id="category-filter">
          <option value="all">All Categories</option>
          <option value="Electronics">Electronics</option>
          <option value="Clothing">Clothing</option>
        </select>
      </div>
      <div id="product-grid" class="product-grid"></div>
    </section>
    
    <section id="cart" class="cart-section">
      <h2>Shopping Cart</h2>
      <div id="cart-items"></div>
      <div id="cart-total">Total: $0.00</div>
      <button onclick="handleCheckout()">Checkout</button>
    </section>
  </main>
  
  <script src="app.js"></script>
</body>
</html>

Conclusion

With mockly.me's APIs, you can create impressive e-commerce demos that showcase your frontend skills. The realistic data makes your projects stand out, whether you're building a portfolio piece, client demo, or proof of concept.

Key takeaways:

• Use product endpoints for catalogs and detail pages
• Combine user endpoints for account functionality
• Leverage finance endpoints for transactions and orders
• Implement search, filtering, and cart functionality
• Create a complete shopping experience with realistic data

Start building your e-commerce demo today with mockly.me's free mock APIs!