Use our JSON files as a simple fake API for your frontend projects, testing, learning and development.
This project provides simple JSON files that can be used as a fake API. You can fetch categories and products directly from your JavaScript application using the native Fetch API.
Get all available product categories from category.json.
/category.json
Get products from your products.json file.
/products.json
Integrate the API in any frontend using JavaScript fetch().
fetch()
Available JSON resources
Returns a list of available categories.
[
{
"id": 1,
"name": "Men",
"description": "Modern essentials",
"image": "https://images.unsplash.com"
},
{
"id": 2,
"name": "Women",
"description": "Effortless elegance",
"image": "https://images.unsplash.com"
}
]Returns a list of available products.
[
{
"id": 1,
"name": "Classic Oversized Shirt",
"category": "Men",
"price": 59,
"oldPrice": 79,
"badge": "Best Seller",
"image": "https://images.unsplash.com/"
},
{
"id": 2,
"name": "Minimal Everyday Dress",
"category": "Women",
"price": 89,
"oldPrice": 119,
"badge": "Best Seller",
"image": "https://images.unsplash.com/"
}
]Returns a registration user.
{
"success": true,
"message": "Registration successful",
"user": {
"id": 101,
"name": "Muhammad Farhan",
"email": "muhammadfarhan.developer@gmail.com",
"username": "muhammadfarhan",
"role": "customer"
}
}
Returns a login user with Token.
{
"success": true,
"message": "Login successful",
"user": {
"id": 101,
"name": "Muhammad Farhan",
"email": "muhammadfarhan.developer@gmail.com",
"username": "muhammadfarhan",
"role": "customer"
},
"token": "fake_register_token_abcdef1234567890",
"token_type": "Bearer"
}You can consume these JSON files using JavaScript fetch().
fetch('https://muhammadfarhandeveloper.github.io/E-Commerce-fakeapi/category.json')
.then(response => response.json())
.then(categories => {
console.log(categories);
})
.catch(error => {
console.error('Error:', error);
});fetch('https://muhammadfarhandeveloper.github.io/E-Commerce-fakeapi/products.json')
.then(response => response.json())
.then(products => {
console.log(products);
})
.catch(error => {
console.error('Error:', error);
});async function getProducts() {
try {
const response = await fetch(
'https://muhammadfarhandeveloper.github.io/E-Commerce-fakeapi/products.json'
);
const products = await response.json();
console.log(products);
} catch (error) {
console.error('Error:', error);
}
}
getProducts();fetch('https://muhammadfarhandeveloper.github.io/E-Commerce-fakeapi/register.json')
.then(response => response.json())
.then(data => {
console.log(data);
console.log(data.message);
})
.catch(error => {
console.error('Error:', error);
});fetch('https://muhammadfarhandeveloper.github.io/E-Commerce-fakeapi/login.json')
.then(response => response.json())
.then(data => {
console.log(data);
console.log(data.message);
console.log(data.token); // bearer Fake token
})
.catch(error => {
console.error('Error:', error);
});Fetch products and display them on your website.
<div id="products"></div>
<script>
async function loadProducts() {
const container = document.getElementById('products');
try {
const response = await fetch(
'https://muhammadfarhandeveloper.github.io/E-Commerce-fakeapi/products.json'
);
const products = await response.json();
products.forEach(product => {
container.innerHTML += `
<div class="card mb-3">
<div class="card-body">
<h5>${product.name}</h5>
<p>Price: $${product.price}</p>
<p>Category: ${product.category}</p>
</div>
</div>
`;
});
} catch (error) {
container.innerHTML =
'<p>Unable to load products.</p>';
console.error(error);
}
}
loadProducts();
</script>fetch().
response.json().
This is a static JSON API. It is ideal for frontend development, prototypes, testing, demos and learning. It does not provide database operations such as POST, PUT, PATCH or DELETE unless you add a backend/server that supports those operations.