TypeScript  

Random User Generator API

Introduction

Modern applications often require test user data during development. Instead of creating fake users manually, developers can use the free API provided by Random User Generator API. This service generates realistic user profiles including names, emails, phone numbers, addresses, and profile images.

This article explains the API concept, request structure, response format, backend implementation, and frontend integration using a practical example.

Overview of the Random User API

The Random User API is a free REST service used to generate fake user data for testing applications, prototypes, and UI development. It returns structured data in formats like JSON, XML, CSV, or YAML.

Basic API Endpoint

https://randomuser.me/api/

When this endpoint is called, it returns a randomly generated user profile.

Example API Response

{
 "results":[
  {
   "gender":"female",
   "name":{
     "title":"Miss",
     "first":"Jennie",
     "last":"Nichols"
   },
   "email":"[email protected]",
   "phone":"(272) 790-0888",
   "location":{
     "city":"Billings",
     "state":"Michigan",
     "country":"United States"
   },
   "picture":{
     "large":"https://randomuser.me/api/portraits/women/75.jpg"
   }
  }
 ]
}

The API returns a JSON object containing a results array where each element represents a user profile.

API Request Parameters

Developers can customize the generated data using query parameters.

Generate Multiple Users

https://randomuser.me/api/?results=10

Filter by Gender

https://randomuser.me/api/?gender=female

Filter by Nationality

https://randomuser.me/api/?nat=us

Example

https://randomuser.me/api/?results=5&gender=male&nat=us

This returns 5 male users from the United States.

System Architecture

A simple application using this API typically follows this workflow.

User opens webpage
↓
Frontend sends request to backend API
↓
Backend calls Random User API
↓
API returns generated user profiles
↓
Backend forwards response to frontend
↓
Frontend displays user data

Backend Implementation (ASP.NET Web API)

Create a controller to call the Random User API and return the data.

UserController.cs

using System.Net.Http;
using System.Threading.Tasks;
using System.Web.Http;

namespace RandomUserAPI.Controllers
{
    public class UserController : ApiController
    {
        [HttpGet]
        [Route("api/users")]
        public async Task<IHttpActionResult> GetUsers()
        {
            string url = "https://randomuser.me/api/?results=5";

            using (HttpClient client = new HttpClient())
            {
                var response = await client.GetAsync(url);

                if (!response.IsSuccessStatusCode)
                    return BadRequest("API request failed");

                var result = await response.Content.ReadAsStringAsync();

                return Ok(result);
            }
        }
    }
}

Backend Logic

The backend performs three tasks.

  • Sends a request to the Random User API

  • Receives randomly generated user profiles

  • Returns the JSON response to the frontend

This architecture allows developers to add caching, filtering, or database storage later.

Frontend Implementation (User Directory UI)

index.html

<!DOCTYPE html>
<html>
<head>

<title>Random User Directory</title>

<style>

body{
font-family:Arial;
background:#f4f6f9;
text-align:center;
}

.container{
width:800px;
margin:auto;
margin-top:50px;
background:white;
padding:30px;
border-radius:10px;
box-shadow:0 0 10px #ccc;
}

.user{
display:flex;
align-items:center;
padding:10px;
border-bottom:1px solid #eee;
}

.user img{
border-radius:50%;
margin-right:15px;
}

</style>

</head>

<body>

<div class="container">

<h1>Random User Generator</h1>

<div id="userList"></div>

</div>

<script>

function loadUsers()
{

fetch("/api/users")
.then(res => res.json())
.then(data => {

let users = JSON.parse(data).results;

let html="";

for(let i=0;i<users.length;i++)
{
let user = users[i];

html += `
<div class="user">
<img src="${user.picture.thumbnail}">
<div>
<b>${user.name.first} ${user.name.last}</b><br>
${user.email}<br>
${user.location.country}
</div>
</div>
`;

}

document.getElementById("userList").innerHTML = html;

});

}

loadUsers();

</script>

</body>
</html>

Application Logic

When the webpage loads:

JavaScript calls /api/users
↓
ASP.NET API fetches random users
↓
JSON response is returned
↓
Frontend parses the data
↓
User profiles are displayed in the UI

Example Output

The webpage displays information such as:

  • Profile photo

  • Full name

  • Email address

  • Country

Each time the page reloads, new random users appear.

Common Use Cases

Random user APIs are widely used in development projects.

  • UI prototype development

  • Testing user management systems

  • Social network demos

  • Employee directory systems

  • Mobile app mock data

Instead of using placeholder text like “User1” or “Test User”, developers can populate applications with realistic user data.

Advanced Features

Developers can extend the application with additional capabilities.

  • User search and filtering

  • Pagination support

  • User cards with detailed profiles

  • Saving generated users to database

  • User analytics dashboards

Conclusion

The Random User Generator API is a powerful tool for developers who need realistic user data during application development. By combining backend services such as ASP.NET Web API with frontend technologies like JavaScript and HTML, developers can quickly build dynamic applications that display randomly generated user profiles. This approach simplifies testing and improves the realism of prototype systems.

Membership not found