List of Resources for Demo Data and Images
This article was originally posted on my personal blog. Live examples will work better there.
When working on any project, you’ll need to use demo data to showcase the functionalities you’ve implemented.
So, I’ve compiled a list of websites, APIs, or resources, in general, you can use to get demo images and data easily.
Images
Lorem Picsum
Lorem Picsum allows you to easily get random images. You can specify the size, make them grayscale, make them blurred, and much more.
Here’s an example of using it:
Every time you refresh the page, the image will change!
Unsplash Source
Unsplash provides this simple API that allows you to get random images as well. You can specify a query (for example, “human” to get images with humans), the size of the image, and much more.
Here’s an example of specifying the image and adding the query “programming”:
This image will also change every time you refresh the page.
placekitten
placekitten allows you to easily get placeholder random cat images, because who wouldn’t love making their demo a little cuter.
An example of using it:
Pikachu Images
This one allows you to get random Pikachu images. (I’ve actually used it in my tutorial: Chrome Extension Tutorial — Replace Images in Any Website with Pikachu)
This one returns a JSON object with the link to the image, so it’s different than the other services.
LoremFlickr
Another source for random images that allows you to specify the size, query, or color of the image, among other options.
Here’s an example of using it:
Data
a Javascript library that allows you to generate fake data easily, with so many types of data. Data types include fake credit card numbers, addresses, IPs, e-commerce data, and more!
You can also find it for PHP, Ruby, and Python among others.
JSONPlaceholder provides a fake REST API for free. You can get data like posts, comments, todos, users, and more.
For example, if you send a request tohttps://jsonplaceholder.typicode.com/posts/1, you can get the following response:
{
"userId": 1,
"id": 1,
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
}Mockend allows you to do the same as JSONPlaceholder, but with data structure more relevant to your project.
It provides an easy REST API with fake data that you can use. It only provides fake user data. It even provides POST, PATCH, PUT, and DELETE requests.
You can also use this to simulate different response codes, like their “User not found” endpoint returns a status code of 404.
It provides fake e-commerce demo data to make your online store project’s demo data more realistic.
Here’s an example response of using their endpointhttps://fakestoreapi.com/products/1to get one product:
{
"id":1,
"title":"Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops",
"price":109.95,
"description":"Your perfect pack for everyday use and walks in the forest. Stash your laptop (up to 15 inches) in the padded sleeve, your everyday",
"category":"men's clothing",
"image":"https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg"
}It provides fake endpoints to manage users like sign up or log in, retrieve cars list, and more.
An example response of calling their endpointhttps://myfakeapi.com/api/cars/1which retrieves car of id 1:
{"Car":{"id":1,"car":"Mitsubishi","car_model":"Montero","car_color":"Yellow","car_model_year":2002,"car_vin":"SAJWJ0FF3F8321657","price":"$2814.46","availability":false}}Fake Filler is a browser extension that easily allows you to generate fake data for your forms on the go. All you have to do after installing it is click on the icon of the extension when you’re on any page that has a form, and it will do all the tedious work for you!
You can also find it for Edge and Firefox.
If you would like to connect and talk more about this article or programming in general, you can find me on my Twitter account @shahednasserr
