Shahed Nasser's Blog

List of Resources for Demo Data and Images

Shahed Nasser's photo
Shahed Nasser
·

3 min read

List of Resources for Demo Data and Images

This article was originally posted on my personal blog. Some 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 everytime 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

Faker.js

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

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 to https://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

Mockend allows you to do the same as JSONPlaceholder, but with data structure more relevant to your project.

REQ|RES

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.

Fake Store API

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 endpoint https://fakestoreapi.com/products/1 to 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"
}

My Fake API

It provides fake endpoints to manage users like sign up or log in, retrieve cars list, and more.

An example response of calling their endpoint https://myfakeapi.com/api/cars/1 which 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

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

Web DevelopmentDeveloperProgramming TipsAPIs