DEV Community: Krishna Pankhania

Understanding Pass-By-Value and Pass-By-Reference in JavaScript: A Beginner's Guide

Krishna Pankhania — Sat, 17 Feb 2024 18:45:11 +0000

Introduction:
Welcome, fellow coding enthusiasts! Today, we're diving into the intriguing world of pass-by-value and pass-by-reference in JavaScript. These concepts might sound a bit intimidating at first, but fear not! We'll break them down into simple terms with real-world examples to make it crystal clear.

Pass-By-Value: The Copycat Game

Let's imagine a scenario: you and your friend love playing a game where you copy each other's drawings. In JavaScript, pass-by-value works similarly. When you pass a primitive data type (like a number, string, or boolean) to a function, you're essentially making a copy of that value.

// Example of pass-by-value
function doubleValue(num) {
  num = num * 2;
  console.log("Inside the function:", num);
}

let originalNumber = 5;
doubleValue(originalNumber);
console.log("Outside the function:", originalNumber);

In this example, the doubleValue function takes a copy of the originalNumber, doubles it inside the function, but the original remains unchanged outside the function.

Pass-By-Reference: Sharing is Caring

Now, let's switch gears and imagine a shared notebook. You and your friend can both make changes to it, and those changes are reflected for both of you. This mirrors pass-by-reference in JavaScript.

// Example of pass-by-reference
function updateArray(arr) {
  arr.push(4);
  console.log("Inside the function:", arr);
}

let originalArray = [1, 2, 3];
updateArray(originalArray);
console.log("Outside the function:", originalArray);

In this case, the updateArray function modifies the original array directly. The changes made inside the function are visible outside as well because objects (including arrays) are passed by reference.

Interactive Challenge: Guess the Output!

Now, let's have some fun with a challenge! Can you guess the output of the following code snippet before running it?

function modifyObject(obj) {
  obj.property = "Modified!";
  console.log("Inside the function:", obj);
}

let originalObject = { property: "Original" };
modifyObject(originalObject);
console.log("Outside the function:", originalObject.property);

Take a moment to make your prediction and then try it out in your code editor. Understanding the output will solidify your grasp on pass-by-reference in JavaScript!

Conclusion: Mastering Pass-By-Value and Pass-By-Reference

Congratulations! You've navigated the realms of pass-by-value and pass-by-reference in JavaScript. Remember, pass-by-value involves making a copy of primitive values, while pass-by-reference allows direct manipulation of objects. These concepts are crucial as you progress in your coding journey, so keep practicing and exploring real-world scenarios to reinforce your understanding.

Happy coding!

Mastering JavaScript: 10 Tricky Interview Questions on Arrays and Objects

Krishna Pankhania — Sat, 17 Feb 2024 18:36:50 +0000

Introduction:

Welcome, fellow developers! In the realm of JavaScript interviews, navigating questions on arrays and objects requires a solid understanding of the language's nuances. In this blog post, we'll delve into 10 tricky interview questions, aiming for clarity and mastery rather than humor. Let's sharpen those coding skills!

1. The Swapping Saga:
Question: How can you swap the values of two variables without using a temporary variable?

Answer: Utilize destructuring assignment for an elegant swap:

let a = 42, b = 24;
[a, b] = [b, a];

The values exchange places seamlessly.

2. Object Overhaul:
Question: Explain the process of cloning an object in JavaScript.

Answer: Employ the spread operator for a simple object duplication:

const originalObj = { one: 1, two: 2 };
const clonedObj = { ...originalObj };

Cloning accomplished without complication.

3. Array Amalgamation:
Question: How do you eliminate duplicates from an array?

Answer: Leverage the Set data structure to effortlessly remove duplicates:

const arrayWithDupes = [1, 2, 3, 1, 2, 4];
const noDupesArray = [...new Set(arrayWithDupes)];

Duplicates vanish, leaving a pristine array.

4. The Palindrome Puzzle:
Question: Write a function to determine if a string is a palindrome.

Answer: Craft a function using array methods:

function isPalindrome(str) {
  const reversed = str.split('').reverse().join('');
  return str === reversed;
}

A reliable palindrome detector.

5. Object Inquiry:
Question: How can you check if an object contains a specific property?

Answer: Employ the "in" operator for a straightforward property check:

const myObject = { name: 'JavaScript', age: 25 };
const hasProperty = 'age' in myObject;

A simple inquiry confirms the property's existence.

6. Array Append:
Question: Add an element to the end of an array.

Answer: Utilize the push() method for seamless array expansion:

const array = ['apple', 'banana', 'cherry'];
array.push('date');

Effortless appending at the array's end.

7. The NaN Dilemma:
Question: How do you determine if a value is NaN?

Answer: Use Number.isNaN() to accurately identify NaN:

const mysteriousValue = NaN;
const isItNaN = Number.isNaN(mysteriousValue);

A reliable check for the elusive NaN.

8. Object Fusion:
Question: Merge two objects into one.

Answer: Utilize the spread operator for a smooth object fusion:

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const fusedObject = { ...obj1, ...obj2 };

Objects combine forces seamlessly.

9. The Filtering Feat:
Question: Remove falsy values from an array.

Answer: Deploy the filter() method to sift out falsy elements:

const questionableArray = [0, false, '', null, undefined, 42];
const truthArray = questionableArray.filter(Boolean);

False values eliminated, leaving truth behind.

10. The Lost Element:
Question: Find the missing number in an array of consecutive integers.

Answer: Utilize the sum formula to deduce the missing number:

const detectiveArray = [1, 2, 3, 5, 6];
const missingNumber = 15 - detectiveArray.reduce((sum, num) => sum + num, 0);

A mathematical approach unveils the missing integer.

Bravo! You've navigated through these JavaScript intricacies. These questions and answers are designed to hone your understanding of arrays and objects, ensuring you're well-prepared for any interview challenge. Happy coding!

Mastering JavaScript Sorting: 4 Essential Exercises for Job Interviews with Examples

Krishna Pankhania — Sat, 17 Feb 2024 18:29:52 +0000

Introduction:

In the fast-paced world of programming interviews, JavaScript skills play a crucial role. Sorting algorithms are a common topic that interviewers love to explore. To help you ace your JavaScript interviews, here are 3 essential sorting exercises along with sample solutions.

1: Bubble Sort Basics:

Exercise: Implement the Bubble Sort algorithm in JavaScript and explain its time complexity.

Sample Solution:

function bubbleSort(arr) {
  let n = arr.length;

  // Outer loop for each pass
  for (let i = 0; i < n - 1; i++) {
    // Inner loop for pairwise comparisons
    for (let j = 0; j < n - i - 1; j++) {
      // Swap if the element found is greater than the next element
      if (arr[j] > arr[j + 1]) {
        let temp = arr[j];
        arr[j] = arr[j + 1];
        arr[j + 1] = temp;
      }
    }
  }
  return arr;
}

2: Merge Sort Mastery:

Exercise: Write a JavaScript function to perform Merge Sort and discuss its advantages over other sorting algorithms.

Sample Solution:

<!-- Exercise: Write a JavaScript function to perform Merge Sort and discuss its advantages over other sorting algorithms. -->

function mergeSort(arr) {
  if (arr.length <= 1) return arr;

  // Split the array into halves
  const middle = Math.floor(arr.length / 2);
  const left = arr.slice(0, middle);
  const right = arr.slice(middle);

  // Recursively apply mergeSort to both halves and merge them
  return merge(mergeSort(left), mergeSort(right));
}

function merge(left, right) {
  let result = [];
  let leftIndex = 0;
  let rightIndex = 0;

  // Merge the two sorted arrays
  while (leftIndex < left.length && rightIndex < right.length) {
    if (left[leftIndex] < right[rightIndex]) {
      result.push(left[leftIndex]);
      leftIndex++;
    } else {
      result.push(right[rightIndex]);
      rightIndex++;
    }
  }

  // Add remaining elements from both arrays
  return result.concat(left.slice(leftIndex)).concat(right.slice(rightIndex));
}

3: Quick Sort Challenge:

Exercise: Implement the Quick Sort algorithm in JavaScript, emphasizing its efficiency and partitioning strategy.

Sample Solution:

function quickSort(arr) {
  if (arr.length <= 1) return arr;

  // Choose the pivot (last element in this case)
  const pivot = arr[arr.length - 1];
  const left = [];
  const right = [];

  // Partition the array into elements smaller than pivot and larger than pivot
  for (let i = 0; i < arr.length - 1; i++) {
    if (arr[i] < pivot) {
      left.push(arr[i]);
    } else {
      right.push(arr[i]);
    }
  }

  // Recursively apply quickSort to both partitions and concatenate them with pivot
  return [...quickSort(left), pivot, ...quickSort(right)];
}

4: Selection Sort Unveiled:

Exercise: Write a JavaScript function for Selection Sort and discuss its simplicity compared to other algorithms.

Sample Solution:

function selectionSort(arr) {
  const n = arr.length;

  // Traverse through all array elements
  for (let i = 0; i < n - 1; i++) {
    // Find the minimum element in the unsorted part of the array
    let minIndex = i;

    for (let j = i + 1; j < n; j++) {
      if (arr[j] < arr[minIndex]) {
        minIndex = j;
      }
    }

    // Swap the found minimum element with the first element
    if (minIndex !== i) {
      let temp = arr[i];
      arr[i] = arr[minIndex];
      arr[minIndex] = temp;
    }
  }

  return arr;
}

react-cropper + mui with rotate and flip option

Krishna Pankhania — Sun, 13 Mar 2022 10:14:18 +0000

Demo & Code : https://codesandbox.io/s/react-cropper-js-mui-with-rotate-and-flip-option-y7mm6n

Download code from : https://github.com/krishnapankhania/react-mui-cropper-demo

How to use?

Create react project. More stuff on react docs.



npx create-react-app my-app
cd my-app
npm start

Let's install Material Ui react components, because we are going to use that

https://mui.com

Run below command



npm install @mui/material @emotion/react @emotion/styled

Let's install react cropper

Run below command



npm i react-cropper

We will create 3 components

Upload: File input.
Popup: A popup to open after the file is selected
CropperDemo: Cropper logic resides here

Upload.js

This component will take a file input from the user and will return file data to the parent component.



import * as React from "react";
import { styled } from "@mui/material/styles";
import Button from "@mui/material/Button";

const Input = styled("input")({
  display: "none"
});

export default function Upload({ getUploadedFile }) {
  const onChange = (e) => {
    e.preventDefault();
    let files;
    if (e.dataTransfer) {
      files = e.dataTransfer.files;
    } else if (e.target) {
      files = e.target.files;
    }
    if (files.length === 0) {
      return alert("Please select a file.");
    }
    const reader = new FileReader();
    reader.onload = () => {
      getUploadedFile(reader.result);
    };
    reader.readAsDataURL(files[0]);
  };
  return (
    <label htmlFor="contained-button-file">
      <Input
        accept="image/*"
        id="contained-button-file"
        multiple
        type="file"
        onChange={onChange}
      />
      <Button variant="contained" component="span">
        Upload
      </Button>
    </label>
  );
}

Popup.js

This component is a MUI dialog component that will hold the cropper.



import * as React from "react";
import Dialog from "@mui/material/Dialog";
import DialogContent from "@mui/material/DialogContent";
import DialogContentText from "@mui/material/DialogContentText";
import DialogTitle from "@mui/material/DialogTitle";
import CropperDemo from "./Cropper";

export default function Popup({ open, image, handleClose, getCroppedFile }) {
  return (
    <div>
      <Dialog
        open={open}
        onClose={handleClose}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
      >
        <DialogTitle id="alert-dialog-title">Crop Image</DialogTitle>
        <DialogContent>
          <DialogContentText id="alert-dialog-description">
            <CropperDemo
              handleClose={handleClose}
              src={image}
              getCroppedFile={getCroppedFile}
            />
          </DialogContentText>
        </DialogContent>
      </Dialog>
    </div>
  );
}

Cropper.js

This component does the cropping of an image and returns it to parent. Check the rotate and flip options as well. you can play around with other options too.

Check out available options



import React, { useRef, useState } from "react";
import Cropper from "react-cropper";
import Skeleton from "@mui/material/Skeleton";
import Button from "@mui/material/Button";
import ButtonGroup from "@mui/material/ButtonGroup";
import Box from "@mui/material/Box";

import "cropperjs/dist/cropper.css";

export default function CropperDemo({ src, getCroppedFile }) {
  const cropperRef = useRef(null);
  const [loading, setLoading] = useState(true);
  const [scaleX, setScaleX] = useState(1);
  const [scaleY, setScaleY] = useState(1);

  const handleClick = () => {
    const imageElement = cropperRef?.current;
    const cropper = imageElement?.cropper;
    const img = cropper.getCroppedCanvas().toDataURL();
    getCroppedFile(img);
  };
  const rotate = () => {
    const imageElement = cropperRef?.current;
    const cropper = imageElement?.cropper;
    cropper.rotate(90);
  };
  const flip = (type) => {
    const imageElement = cropperRef?.current;
    const cropper = imageElement?.cropper;
    if (type === "h") {
      cropper.scaleX(scaleX === 1 ? -1 : 1);
      setScaleX(scaleX === 1 ? -1 : 1);
    } else {
      cropper.scaleY(scaleY === 1 ? -1 : 1);
      setScaleY(scaleY === 1 ? -1 : 1);
    }
  };
  return (
    <>
      {loading && (
        <Skeleton variant="rectangular" width={"100%"} height={400} />
      )}
      <Box display={"flex"} justifyContent={"flex-end"} mb={1}>
        <ButtonGroup disableElevation variant="contained">
          <Button onClick={rotate}>Rotate</Button>
          <Button onClick={() => flip("h")}>Flip H</Button>
          <Button onClick={() => flip("v")}>Flip V</Button>
        </ButtonGroup>
      </Box>

      <Cropper
        src={src}
        style={{ height: 400, width: "100%" }}
        // Cropper.js options
        initialAspectRatio={16 / 9}
        guides={false}
        ready={() => {
          setLoading(false);
        }}
        ref={cropperRef}
      />
      <Button
        sx={{
          float: "right",
          mt: 1
        }}
        onClick={handleClick}
        autoFocus
        color="success"
        variant="contained"
      >
        Crop
      </Button>
    </>
  );
}

App.js

Let's use all components.



import * as React from "react";
import Box from "@mui/material/Box";
import Upload from "./Upload";
import Popup from "./Popup";
export default function App() {
  const [open, setOpen] = React.useState(false);
  const [image, setImage] = React.useState(
    "https://images.unsplash.com/photo-1612232134966-a9b076b9fbe7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
  );

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center"
        }}
      >
        <Box my={2}>
          <img src={image} alt="cropped" height={400} />
        </Box>

        <Upload
          getUploadedFile={(image) => {
            setOpen(true);
            setImage(image);
          }}
        />
        <Popup
          open={open}
          handleClose={handleClose}
          image={image}
          getCroppedFile={(image) => {
            setImage(image);
            handleClose();
          }}
        />
      </Box>
    </div>
  );
}

You won't forget how to use variables in js after reading this!

Krishna Pankhania — Fri, 11 Mar 2022 17:24:10 +0000

Are you a newbie to javascript? Do you find it difficult to remember concepts of javascript? well, let me share how I remember concepts and differences between elements that look and sound similar 🤯.

Difference between Var, Let & Const.

I am going to use the link or story method which connected the differences using an awesome story. Let me know in the comments if you find it easier to understand that usual approach. Let the fun begins!

Linking technical terms to story elements

Have a look at how I have mapped the javascript scopes according to different areas.

🌍 Think of global scope as a map of the world or any country.

🌆 Think of function scope as cities.

🏠 Think of block scope as a home.

see how one area is larger in comparison to others. It helps to memorize it.

Now let's move on to the main characters of this story.

🥁 Introducing to you the variable siblings!

How to remember each scope 🤔

In JavaScript, users can declare a variable using 3 keywords that are var, let, and const.

Once upon a time, there was a family which had 3 siblings namedvar,let, andconst. Although they had some similarities(used for declaring variables) they were different from each other(different scope)

The scope of the var keyword is the global or function scope.
It means variables defined outside the function can be accessed globally, and variables defined inside a particular function can be accessed within the function.

Var was a traveler, he had access to so many countries and cities(global and function cope) that he has almost covered the whole world. He also had homes in many cities he would visit(if defined in function can be accessed in function).

Let and Const keywords are block-scoped.
Block is {} and code in between.
Variables defined with both can not be re-declared.
Variables defined with Let can be reassigned.
Variables defined with Const can't be reassigned.

Let was an introvert like her twin sister Const. They would stay at home and when Var comes home they would not let him be in charge of anything because it's their space(block scope). They were the queens of the house, they always thought of themselves as irreplaceable(can not be re-declared).

If Let doesn't like someone she would give them as many chances as they'd ask(Let can be reassigned), whereas const Const believes in only one chance(Const can't be reassigned).

That's it this is how I used to remember all the things in javascript. You can also try the same and let me know if it helps you in any way. Waiting for your comments!

Thanks for reading, I am not a good writer but I at least tried🙂, Should I do similar stories for other topics?

Convert first page of PDF to Image| AWS lambda,S3

Krishna Pankhania — Wed, 09 Mar 2022 13:07:24 +0000

Recently I was developing a functionality where there was a requirement to get the first page of PDF (stored on s3) and convert it to an image. I have dug up the internet for this one but couldn't find anything to the point which will guide me on how to do this for AWS lambda. So here I am sharing my workaround.

Things you need to do before moving onto the code section

Give s3 permissions to the lambda function.
Add a Ghostscript layer: https://github.com/shelfio/ghostscript-lambda-layer

Here are the steps to be followed (I will write steps for code only)

1 => Getting a file from S3 and saving it temporarily.



function getFile(bucket, objectname) {
  return new Promise((res, rej) => {
    var params = { Bucket: bucket, Key: objectname };
    s3.getObject(params, function (err, data) {
      if (err) {
        console.log(err);
        res(null);
      }
      const name = `/tmp/${objectname}`;
      fs.writeFile(name, data.Body, function (err) {
        if (err) res(null);
        res(name);
      });
    });
  });
}



const filepath = await getFile(bucket, key);

2 => Create a helper file for conversion code, name it pdf2Img.js. This code will convert the tmp pdf file to a jpeg image. The code is inspired from pdf2png which is generating png image.



const exec = require("child_process").exec;
const fs = require("fs");
const tmp = require("tmp");

// ghostscript executables path
let projectPath = __dirname.split("\\");
projectPath.pop();
projectPath = projectPath.join("\\");

exports.ghostscriptPath = projectPath + "\\executables\\ghostScript";

exports.convert = (pdfPath, options) => {
  return new Promise((resolve, reject) => {
    if (!options.useLocalGS) {
      process.env.Path += ";" + exports.ghostscriptPath;
    }
    options.quality = options.quality || 100;
    // get temporary filepath
    tmp.file({ postfix: ".jpeg" }, function (err, imageFilepath, fd) {
      if (err) {
        resolve({
          success: false,
          error: "Error getting second temporary filepath: " + err,
        });
        return;
      }

      exec(
        "gs -dQUIET -dPARANOIDSAFER -dBATCH -dNOPAUSE -dNOPROMPT -sDEVICE=jpeg -dTextAlphaBits=4 -dGraphicsAlphaBits=4 -r" +
          options.quality +
          " -dFirstPage=1 -dLastPage=1 -sOutputFile=" +
          imageFilepath +
          " " +
          pdfPath,
        (error, stdout, stderr) => {
          if (error !== null) {
            resolve({
              success: false,
              error: "Error converting pdf to png: " + error,
            });
            return;
          }
          const img = fs.readFileSync(imageFilepath);
          resolve({ success: true, data: img });
        }
      );
    });
  });
};

To generate a jpeg, use the below command in exec



"gs -dQUIET -dPARANOIDSAFER -dBATCH -dNOPAUSE -dNOPROMPT -sDEVICE=jpeg -dTextAlphaBits=4 -dGraphicsAlphaBits=4 -r" +
          options.quality +
          " -dFirstPage=1 -dLastPage=1 -sOutputFile=" +
          imageFilepath +
          " " +
          pdfPath

To generate png use the below command in exec



"gs -dQUIET -dPARANOIDSAFER -dBATCH -dNOPAUSE -dNOPROMPT -sDEVICE=png16m -dTextAlphaBits=4 -dGraphicsAlphaBits=4 -r" +
          options.quality +
          " -dFirstPage=1 -dLastPage=1 -sOutputFile=" +
          imageFilepath +
          " " +
          pdfPath

More details about Ghostscript options you can find it here https://www.ghostscript.com/doc/current/Use.htm

3 => Use helper function code in index file. Also set ghostscriptPath path to "/opt/bin/gs"



const pdf2Img = require("./pdf2Img");
pdf2Img.ghostscriptPath = "/opt/bin/gs";

Create a function that will execute the conversion code;



async function pdfToImage(pdfPath) {
  try {
    const response = await pdf2Img.convert(pdfPath, {});
    if (!response.success) {
      console.log("Error in pdfToImage", response.error);
      return response;
    }
    return {
      contentType: "image/jpeg",
      data: response.data,
    };
  } catch (e) {
    console.log("Error in pdfToImage", e.message);
  }
}



const pdfToImageRes = await pdfToImage(filepath);

4 => Upload the converted image to the bucket.



function uploadFile(bucket, objectname, contentType, data) {
  return new Promise((res, rej) => {
    var params = {
      Bucket: bucket,
      Key: `${somePath}/${objectname}`,
      Body: data,
      ContentType: contentType,
    };
    s3.putObject(params, function (err, data) {
      if (err) {
        console.log(err);
        res(null);
      }
      res(true);
    });
  });
}



const responseUpload = await uploadFile(
  bucket,
  imageName,
  pdfToImageRes.contentType,
  pdfToImageRes.data
);

That's it!

Bucket list REST API

Krishna Pankhania — Tue, 08 Mar 2022 17:36:24 +0000

Intro

I have developed this API to suggest bucket list places, adventures, foods, and many more things(Upcoming) that you can add to your bucket list!

The project is being hosted by Heroku and the code is on GitHub.

Inspiration

I always look forward to doing some new activities and I am a fan of bucket lists so I started this project. I have dug up the internet to find the best items to add in each and every category. I have added all credits to websites and photo sources, most of the photos are from Unsplash and some blogs. Please collaborate with me on GitHub if you have any new categories in mind or want to add new features to this API.

Demo

https://bucket-list-public-api.herokuapp.com

API Base URL

https://bucket-list-public-api.herokuapp.com/api

Endpoints

Endpoint	Parameters	Description
`/`	-	Returns a random suggestion from place,adventure.
`/suggest-place`	-	Returns a random suggestion from places.
`/suggest-adventure`	-	Returns a random suggestion from adventures
`/suggest-food`	-	Returns a random suggestion from foods
`/all`	`page`=page-number `limit`=number-of-suggestions-to-return	Returns all places,adventures.
`/all-places`	`page`=page-number `limit`=number-of-suggestions-to-return	Returns all places.
`/all-adventures`	`page`=page-number `limit`=number-of-suggestions-to-return	Returns all adventures.
`/all-foods`	`page`=page-number `limit`=number-of-suggestions-to-return	Returns all foods.

Example Responses:

Get random suggestions.

https://bucket-list-public-api.herokuapp.com/api

{
    "name": "Walk along the Great Wall of China",
    "details": "The Great Wall of China is a good reason for the existence of the Bucket List! It’s an astonishing relic of China’s history, and it’s a must for many travelers and tourists around...",
    "image":"https://images.unsplash.com/photo-1508804185872-d7badad00f7d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
    "imageCredit":"https://unsplash.com/",
    "from":"https://tourscanner.com/blog/bucket-list-ideas/",
    "category":"adventure"
}

Get all suggestions with pagination.
https://bucket-list-public-api.herokuapp.com/api/all?page=1&limit=3

[
    {
    "name": "Get stunned by the Great Pyramid of Giza",
    "details": "The Great Pyramid of Giza defines bucket...",
    "image": "https://images.unsplash.com/photo-1564554860010-304d58f6edb1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1026&q=80",
    "imageCredit": "https://unsplash.com/",
    "from": "https://tourscanner.com/blog/bucket-list-ideas/",
    "category":"adventure"
  },
  {
    "name": "Walk along the Great Wall of China",
    "details": "The Great Wall of China is a good reason...",
    "image": "https://images.unsplash.com/photo-1508804185872-d7badad00f7d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
    "imageCredit": "https://unsplash.com/",
    "from": "https://tourscanner.com/blog/bucket-list-ideas/",
    "category":"adventure"
  },
  {
    "name": "Explore Petra",
    "details": "Jordan’s rose-colored sandstone city is an extraordinary...",
    "image": "https://images.unsplash.com/photo-1580834341580-8c17a3a630ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80",
    "imageCredit": "https://unsplash.com/",
    "from": "https://tourscanner.com/blog/bucket-list-ideas/",
    "category":"adventure"
  }
]

Github

https://github.com/krishnapankhania/bucket-list-public-api