How to Get a Random User or Product for UI Testing

Creating realistic mockups and demos often requires sample data that looks authentic. In this guide, I'll show you how to use mockly.me's free API endpoints to generate random users, products, quotes, and more for your UI testing and development projects.

Getting Started with Random User Data

The /user endpoint is perfect for generating realistic user profiles complete with names, emails, avatars, and more.

Basic Usage with cURL

curl -X GET "https://mockly.me/user"

This returns a comprehensive JSON user profile:

{
  "id": "8c76e5a4",
  "name": "Jane Smith",
  "username": "janesmith123",
  "email": "[email protected]",
  "avatar": "https://mockly.me/avatar?name=Jane%20Smith",
  "job_title": "Software Engineer",
  "company": "TechCorp",
  "phone": "+1-555-123-4567",
  "address": {
    "city": "New York",
    "state": "NY",
    "country": "USA"
  }
  // Additional fields...
}

Implementing in JavaScript

Here's how to fetch and display a random user in your web application:

// Fetch user data
fetch('https://mockly.me/user')
  .then(response => response.json())
  .then(user => {
    // Update the UI with user information
    document.getElementById('user-name').textContent = user.name;
    document.getElementById('user-email').textContent = user.email;
    document.getElementById('user-job').textContent = user.job_title;
    document.getElementById('user-company').textContent = user.company;
    
    // Load the user avatar
    document.getElementById('user-avatar').src = user.avatar;
  })
  .catch(error => console.error('Error fetching user:', error));

Sample HTML Structure

<div class="user-card">
  <img id="user-avatar" src="" alt="User avatar" class="avatar">
  <div class="user-info">
    <h3 id="user-name"></h3>
    <p id="user-email"></p>
    <div class="meta">
      <span id="user-job"></span> at <span id="user-company"></span>
    </div>
  </div>
</div>

Working with Product Data

The /product endpoint generates realistic product information that's perfect for e-commerce mockups.

Basic Usage with cURL

curl -X GET "https://mockly.me/product"

Example response:

{
  "id": "a6b18044-f9c1-4e6a-8b94-2cbee60c4c0b",
  "name": "Wireless Headphones",
  "price": 129.99,
  "description": "High-quality premium wireless headphones featuring ergonomic design",
  "category": "Electronics",
  "in_stock": true,
  "tags": ["trending", "sale", "limited"]
}

Implementing in JavaScript

// Fetch product data
fetch('https://mockly.me/product')
  .then(response => response.json())
  .then(product => {
    // Update product details in the UI
    document.getElementById('product-name').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;
    
    // Display availability status
    const stockStatus = product.in_stock ? 'In Stock' : 'Out of Stock';
    document.getElementById('product-availability').textContent = stockStatus;
    
    // Create tags
    const tagsContainer = document.getElementById('product-tags');
    tagsContainer.innerHTML = '';
    product.tags.forEach(tag => {
      const tagElement = document.createElement('span');
      tagElement.classList.add('tag');
      tagElement.textContent = tag;
      tagsContainer.appendChild(tagElement);
    });
  })
  .catch(error => console.error('Error fetching product:', error));

Generating Inspirational Quotes

The /quotes/random endpoint provides inspirational quotes that can add a personal touch to your projects.

Basic Usage with cURL

curl -X GET "https://mockly.me/quotes/random"

Example response:

{
  "quote": "The best way to predict the future is to invent it.",
  "author": "Alan Kay"
}

Implementing in JavaScript

// Fetch a random quote
fetch('https://mockly.me/quotes/random')
  .then(response => response.json())
  .then(data => {
    // Update the quote and author in the UI
    document.getElementById('quote-text').textContent = data.quote;
    document.getElementById('quote-author').textContent = `- ${data.author}`;
  })
  .catch(error => console.error('Error fetching quote:', error));

Using Images in Your UI

The mockly.me API also provides image generation endpoints that are perfect for placeholders.

Avatar Images

Avatars can be directly accessed using the URL from a user profile or generated separately:

<!-- Using user data -->
<img src="https://mockly.me/avatar?name=Jane%20Smith" alt="Jane Smith">

<!-- Or generate a new one -->
<img src="https://mockly.me/avatar?seed=123" alt="Random avatar">

QR Code Generation

You can create QR codes for various uses:

<img src="https://mockly.me/qr?text=Hello+World" alt="QR Code">

Complete Example: User Profile Card

Here's a complete example that creates a user profile card with data from the API:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>User Profile Demo</title>
  <style>
    .profile-card {
      max-width: 400px;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      overflow: hidden;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    .profile-header {
      padding: 16px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #e2e8f0;
    }
    .avatar {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      margin-right: 16px;
    }
    .profile-info {
      padding: 16px;
    }
    .profile-name {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    .profile-username {
      color: #718096;
      font-size: 14px;
      margin: 4px 0 12px;
    }
    .profile-stat {
      display: flex;
      margin-bottom: 8px;
    }
    .profile-stat-icon {
      color: #4a5568;
      width: 20px;
      margin-right: 8px;
    }
    .profile-stat-value {
      color: #4a5568;
      font-size: 14px;
    }
    .profile-btn {
      background-color: #4299e1;
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: 4px;
      font-weight: 500;
      cursor: pointer;
      margin-top: 16px;
      width: 100%;
    }
  </style>
</head>
<body>
  <div class="profile-card" id="profile-card">
    <div class="profile-header">
      <img id="user-avatar" src="" alt="User avatar" class="avatar">
      <div>
        <h3 id="user-name" class="profile-name"></h3>
        <p id="user-username" class="profile-username"></p>
      </div>
    </div>
    <div class="profile-info">
      <div class="profile-stat">
        <span class="profile-stat-icon">📧</span>
        <span id="user-email" class="profile-stat-value"></span>
      </div>
      <div class="profile-stat">
        <span class="profile-stat-icon">💼</span>
        <span id="user-job" class="profile-stat-value"></span>
      </div>
      <div class="profile-stat">
        <span class="profile-stat-icon">🏢</span>
        <span id="user-company" class="profile-stat-value"></span>
      </div>
      <div class="profile-stat">
        <span class="profile-stat-icon">📱</span>
        <span id="user-phone" class="profile-stat-value"></span>
      </div>
      <div class="profile-stat">
        <span class="profile-stat-icon">📍</span>
        <span id="user-location" class="profile-stat-value"></span>
      </div>
      <button class="profile-btn">View Profile</button>
    </div>
  </div>

  <script>
    // Fetch user data when the page loads
    document.addEventListener('DOMContentLoaded', function() {
      fetch('https://mockly.me/user')
        .then(response => response.json())
        .then(user => {
          // Update the user profile card with data
          document.getElementById('user-name').textContent = user.name;
          document.getElementById('user-username').textContent = '@' + user.username;
          document.getElementById('user-email').textContent = user.email;
          document.getElementById('user-job').textContent = user.job_title;
          document.getElementById('user-company').textContent = user.company;
          document.getElementById('user-phone').textContent = user.phone;
          document.getElementById('user-location').textContent = 
            `${user.address.city}, ${user.address.state}, ${user.address.country}`;
          document.getElementById('user-avatar').src = user.avatar;
        })
        .catch(error => console.error('Error:', error));
    });
  </script>
</body>
</html>

Tips for Better UI Testing

1. Test Edge Cases

Use mockly.me's random generation to test how your UI handles different types of content:

• Very long names or descriptions
• Different language character sets
• Missing or null values

2. Create a Data Service Layer

Create a service layer in your application that abstracts API calls. This makes it easy to switch between mock and real data:

// userService.js
const userService = {
  async getUser() {
    // During development, use mockly.me
    const response = await fetch('https://mockly.me/user');
    return response.json();
    
    // When switching to production API:
    // const response = await fetch('https://api.yourdomain.com/users/current');
    // return response.json();
  }
};

export default userService;

3. Use Different Response States

Test how your UI handles different API states:

• Success responses using standard endpoints
• Error responses using /status/404 or /status/500
• Slow responses using /delay/2000 (2 second delay)

Conclusion

mockly.me's random data generation APIs provide a quick and easy way to populate your UI with realistic test data. Whether you're building user profiles, product catalogs, or testimonial sections, these endpoints can significantly speed up your development process.

By incorporating these APIs into your development workflow, you can focus on creating great user experiences without getting bogged down in creating test data manually.

Have you used mock data in your UI development? Share your experiences in the comments below!