{"id":1341,"date":"2020-08-14T13:33:35","date_gmt":"2020-08-14T13:33:35","guid":{"rendered":"https:\/\/lvboard.infostore.in.ua\/?p=1341"},"modified":"2020-08-14T16:10:39","modified_gmt":"2020-08-14T16:10:39","slug":"all-front-end-interview-questions","status":"publish","type":"post","link":"https:\/\/lvboard.infostore.in.ua\/?p=1341","title":{"rendered":"All front end Interview questions"},"content":{"rendered":"\n<p>This readme is a compilation of all the question asked during my recent COVID-19 job hunt. I&#8217;ve also attached a list of resources that I&#8217;d referred for the preparations.<br>The questions are divided into following sections.<\/p>\n\n\n\n<!--more-->\n\n\n\n<ul><li>JS<\/li><li>Coding<\/li><li>Assignments<\/li><li>Miscellaneous<\/li><\/ul>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>The solution that were provided by me were not production ready code. Try implementing your own approach.<\/p><\/blockquote>\n\n\n\n<h3>JS<\/h3>\n\n\n\n<p>1) Given a multidimensional array with depth of n, flatten it. Once flattened make it available as a method on&nbsp;<code>array<\/code>&nbsp;instance<\/p>\n\n\n\n<p>Solution<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/**\n * &#91;1,2,&#91;3,4]] -> &#91;1,2,3,4]\n *\/\n\nlet arr = &#91;1,2,&#91;3,4, &#91;5,6, &#91;7, &#91;8, 9, 10]]]]]\n\nfunction flatten(arr) {\n  return arr.reduce(function(acc, next){\n    let isArray =  Array.isArray(next)\n    return acc.concat(isArray ? flatten(next) : next)\n  }, &#91;])\n}\n\nif (!Array.prototype.flatten) {\n  Array.prototype.flatten = function() {\n    return flatten(this)\n  }\n}\nconsole.log(arr.flatten());\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>2) Create a promise from scratch<\/p>\n\n\n\n<p>Solution<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>class CustomPromise {\n  state = \"PENDING\"\n  value = undefined\n  thenCallbacks = &#91;]\n  errorCallbacks = &#91;]\n\n  constructor(action) {\n    action(this.resolver.bind(this), this.reject.bind(this))\n  }\n\n  resolver(value) {\n    this.state = \"RESOLVED\"\n    this.value = value\n    this.thenCallbacks.forEach((callback) => {\n      callback(this.value)\n    })\n  }\n\n  reject(value) {\n    this.state = \"REJECTED\"\n    this.value = value\n    this.errorCallbacks.forEach((callback) => {\n      callback(this.value)\n    })\n  }\n\n  then(callback) {\n    this.thenCallbacks.push(callback)\n    return this \n  }\n\n  catch (callback) {\n    this.errorCallbacks.push(callback)\n    return this \n  }\n}\n\nlet promise = new CustomPromise((resolver, reject) => {\n  setTimeout(() => {\n    const rand = Math.ceil(Math.random(1 * 1 + 6) * 6)\n    if (rand > 2) {\n      resolver(\"Success\")\n    } else {\n      reject(\"Error\")\n    }\n  }, 1000)\n})\n\npromise\n  .then(function(response){\n    console.log(response)\n  })\n  .catch(function(error){\n    console.log(error)\n  })\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>3) Filter movie list by average rating, name. Sort filtered list by any field inside movie object<\/p>\n\n\n\n<p>Solution<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ O(M)\nfunction getMovies() {\n  return &#91;]; \/\/ &#91;{id, name, year}]\n}\n\n\/\/ O(R)\nfunction getRatings() {\n  return &#91;]; \/\/ &#91;{id, movie_id, rating}]   0 &lt;= rating &lt;= 10   \/\/ e.g 9.3\n}\n\n\/**\n * minAvgRating ->\n *    avgRating >= minAvgRating\n *\n * sort ->\n *    name -> ascending order movies by name\n *   -name -> descending\n *\n *    avgRating\n * \n *\n * search ->\n *   'ave' -> 'Avengers'\n *   'avengers' -> 'Avengers'\n *   'AvengersInfinitywar' -> 'Avengers'\n *\/\nconst toLower = str => str.toLocaleLowerCase()\n\nconst getAvrgRating = (movie, movingWithRatings) => {\n  let count = 0;\n  return movingWithRatings.reduce((acc, value, index) => {\n    const movieMatch = movie.id === value.movie_id\n    if (movieMatch) {\n      acc+=value.rating\n      count++\n    }\n    if (index === movingWithRatings.length - 1) {\n      acc = acc\/count\n    }\n    return acc\n  }, 0)\n}\n\nconst isSubString = (str1, str2) => {\n  str1 = toLower(str1.split(\" \").join(\"\"))\n  str2 = toLower(str2.split(\" \").join(\"\"))\n  if (str1.length > str2.length) {\n    return str1.startWith(str2)\n  } else {\n    return str2.startWith(str1)\n  }\n}\n\nconst moviesList = getMovies()\nconst movingWithRatings = getRatings();\nfunction queryMovies({ search, sort, minAvgRating }) {\n  let filteredMovies = movingWithRatings.filter(movie => getAvrgRating(movie, movingWithRatings) >= minAvgRating);\n  filteredMovies = filteredMovies.map(movie => moviesList.filter(listItem => listItem.id === movie.movie_id).pop())\n  filteredMovies = filteredMovies.filter(movie => isSubString(toLower(movie.name), toLower(search)))\n  filteredMovies = filteredMovies.sort((a, b) => {\n    const isDescending = sort&#91;0] === '-' ? true : false\n    let sortCopy = isDescending ? sort.slice(1) : sort\n    const value1 = a&#91;sortCopy]\n    const value2 = b&#91;sortCopy]\n    if (isDescending) {\n      return value1 > value2 ? -1 : 1\n    }else {\n      return value1 &lt; value2 ? -1 : 1\n    }\n  })\n  filteredMovies = filteredMovies.map(movie => ({\n    ...movie,\n    avgRating: movingWithRatings.filter(ratedMovie => ratedMovie.movie_id === movie.id)&#91;0].rating\n  }))\n  return filteredMovies\n}\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>4) Given an end point URL to fetch all the&nbsp;<code>posts<\/code>&nbsp;and&nbsp;<code>comments<\/code>. Do the following.<\/p>\n\n\n\n<ul><li>Map all the comments to the posts it belongs to. The resultant data after mapping should be of below structure.<\/li><\/ul>\n\n\n\n<p><a href=\"https:\/\/github.com\/devAbhijeet\/cure-fit-interview-challenge\/tree\/master\/\">Solution<\/a><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\n\/\/service.js\nconst POSTS_URL = `https:\/\/jsonplaceholder.typicode.com\/posts`;\nconst COMMENTS_URL = `https:\/\/jsonplaceholder.typicode.com\/comments`;\n\nexport const fetchAllPosts = () => {\n  return fetch(POSTS_URL).then(res => res.json());\n};\n\nexport const fetchAllComments = () => {\n  return fetch(COMMENTS_URL).then(res => res.json());\n};\n\n\nimport { fetchAllPosts, fetchAllComments } from \".\/service\";\n\n\n\nconst fetchData = async () => {\n  const &#91;posts, comments] = await Promise.all(&#91;\n    fetchAllPosts(),\n    fetchAllComments()\n  ]);\n\n  const grabAllCommentsForPost = postId =>\n    comments.filter(comment => comment.postId === postId);\n\n  const mappedPostWithComment = posts.reduce((acc, post) => {\n    const allComments = grabAllCommentsForPost(post.id);\n    acc&#91;post.id] = allComments;\n    return acc;\n  }, {});\n\n  console.log(\"mappedPostWithComment \", mappedPostWithComment);\n};\n\nfetchData();\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>5) Implement a method&nbsp;<code>getHashCode<\/code>&nbsp;on string instance. The method should be available on all strings.<\/p>\n\n\n\n<p>Solution<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let s1 = \"sample\"\n\nif (!String.prototype.getHashCode) {\n  String.prototype.getHashCode = function(){\n    console.log('String instance ', this)\n    return this\n  }\n}\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>6) What does the below expressions evaluate to<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>    1+true\n    true+true\n    \u20181\u2019+true\n    \u20182\u2019 > \u20193\u2019\n    \u2018two\u2019>\u2019three\u2019\n<\/code><\/pre>\n\n\n\n<p>Solution<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>2\n2\n1true\nfalse\ntrue\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>7) Implement&nbsp;<code>bind<\/code>&nbsp;and&nbsp;<code>reduce<\/code>.<\/p>\n\n\n\n<p>Solution<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\n\/\/bind\nif (!Function.prototype.bind) {\n  Function.prototype.bind = function(...arg){\n    const func = this\n    const context = arg&#91;0]\n    const params = arg.slice(1)\n    return function(...innerParam) {\n      func.apply(context, &#91;...params, ...innerParam])\n    }\n  }\n}\n\n\/\/reduce\nArray.prototype.reduce = function(func, initState) {\n  const arr = this\n  const callback = func\n  let init = initState\n\n  arr.forEach(function(value, index){\n      init=callback(init, value)\n  })\n  return init\n}\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>8) Implement debounce function<\/p>\n\n\n\n<p>Solution<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const debounce = function(func, interval) {\n  let timerId;\n  return function(e){\n    clearTimeout(timerId)\n    timerId = setTimeout(function(){\n      func.apply()\n    }, interval)\n  }\n}\ndebounce(apiCall, 3000)\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>9) Design API polling mechanism. The API is called after a fixed interval. The API is a stock API that fetches the latest price of stock. Upon fetching the results, render the UI.<\/p>\n\n\n\n<p>The question demands the design aspect of the solution and not the code. It was open ended question.<\/p>\n\n\n\n<p>Solution<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/With setInterval, throttling and flags\nsetInterval=>Endpoint=>Render\n\n\/\/with the inversion of control\n\/\/Endpoint=>Render=>setTimeout=>Endpoint=>Render=>SetTimeout...\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h3>Algorithms<\/h3>\n\n\n\n<p>1) Consider the following series:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>A := 1\nB := A*2 + 2\nC := B*2 + 3 and so on...\n<\/code><\/pre>\n\n\n\n<p>Write a program that:<\/p>\n\n\n\n<p>outputs the number corresponding to a given letter<\/p>\n\n\n\n<p>given a string of letters like &#8216;GREP&#8217;, computes the sum of the numbers corresponding to all the letters in the string (i.e., G + R + E + P), as given by the above series and<\/p>\n\n\n\n<p>given a large number (that would fit into a standard 32-bit integer), finds the shortest string of letters corresponding to it.<\/p>\n\n\n\n<p>You may use a greedy approach for the last part. Compute the values of the numbers corresponding to letters as and when required and DO NOT pre-compute beforehand and store them in a data structure.<\/p>\n\n\n\n<p>Solution<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/A = 1\n\/\/B = A*2 +2 \n\/\/C = B*2+ 3\n\/\/D = C*2+ 3\n\nvar genCharArray = function(charA, charZ) {\n    var a = &#91;], i = charA.charCodeAt(0), j = charZ.charCodeAt(0);\n    for (; i &lt;= j; ++i) {\n        a.push(String.fromCharCode(i));\n    }\n    return a;\n}\n\nvar charMap = {};\nvar charArray = genCharArray('a', 'z');\n\ncharArray.forEach(function(char, index){\n    charMap&#91;char] = Number(index + 1);\n});\n\n\nvar charSequence = function(char){\n    if(typeof char===\"string\"){\n        char = charMap&#91;char];\n    }\n    if(char==1){\n        return 1;\n    }else{\n        return char + 2 * charSequence(char-1);\n    }\n}\n\nvar input = process.argv&#91;2];\n\nif(input.length===1){\n    console.log(charSequence(charMap&#91;input]));\n}else if(input.length>1){\n    var charTotalSequence = input.split(\"\").reduce(function(acc, curr){ \n        return acc + charSequence(charMap&#91;curr]);\n    },0);\n    console.log(charTotalSequence);\n}\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>2) Given an array find a pair such that it sums to a given number<\/p>\n\n\n\n<p>Solution<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let nums = &#91;2, 7, 10, 1, 11, 15, 9]\nlet target = 11\nlet numsMap = new Map()\nlet pairs = nums.reduce((acc, num) => {\n  let numToFind = target - num\n  if (numsMap.get(numToFind)) {\n    return &#91;...acc, &#91;num, numToFind]]\n  } else {\n    numsMap.set(num, true)\n    return &#91;...acc]\n  }\n}, &#91;])\n\nconsole.log(\"Pairs \", pairs)\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>3) Find the local maxima in a given array. A local maxima is a element that is greater than it&#8217;s left and right neighbours. I provided a O(n) solution which was quite straight forward before going for optimisation.<\/p>\n\n\n\n<p>Solution<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let x = &#91;1, 2, 3, 5, 4] \/\/Outputs: 5\nif x.length == 1 return x&#91;0]\nelse \n let i = 1\n for(;i&lt;x.length-1;i++){\n  if x&#91;i-1]&lt;x&#91;i] and x&#91;i] > x&#91;i+1] return x&#91;i]\n }\n if x.length - 1 == i return x&#91;i]\n\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>4) Rotate a matrix clockwise by 90 degree. The solution should be in place.<\/p>\n\n\n\n<p><a href=\"https:\/\/leetcode.com\/problems\/rotate-image\/\">leetcode<\/a><\/p>\n\n\n\n<p>Solution<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91;\n &#91;1, 2, 3],\n &#91;4, 5, 6],\n &#91;7, 8, 9]\n]\n\/\/The solution is to first take the transpose of the matrix.\n\/\/After taking the transpose the resulting matrix is as follows.\n&#91;\n &#91;1, 4, 7],\n &#91;2, 5, 8],\n &#91;3, 6, 9]\n]\n\/\/After the transpose step, All we have to do is to reverse the array @ each entry.\n\/\/The resulting matrix after after reversal is as follows.\n&#91;\n &#91;7, 4, 1],\n &#91;8, 5, 2],\n &#91;9, 6, 3]\n]\n\/\/The above matrix is rotated 90 degree\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>5) Maximum subarray sum modulo m<\/p>\n\n\n\n<p><a href=\"https:\/\/www.geeksforgeeks.org\/maximum-subarray-sum-modulo-m\/\">Solution<\/a><\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>6) Given an array find three element in array that sum to a given target<\/p>\n\n\n\n<p>Solution<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let x = &#91;1, 2, 3, 4, 5]\nlet target = 7\nlet found = &#91;]\n\nconst twoPointer = (l ,r, current) => {\n  while(l&lt;r){\n    const totalSum = current + x&#91;l] + x&#91;r]\n    if (totalSum === target) {\n      found.push(&#91;current, x&#91;l], x&#91;r]])\n      return\n    } else if (totalSum > target) {\n      r--\n    } else {\n      l++\n    }\n  }\n}\n\nconst threeSum = (x, target) => {\n    for (let i=0;i&lt;x.length;i++) {\n      const current = x&#91;i];\n      let leftPointer = i+1\n      let rightPointer = x.length - 1\n\n      if (current+x&#91;leftPointer]+x&#91;rightPointer] === target) {\n        found.push(&#91;current, x&#91;leftPointer], x&#91;rightPointer]])\n      } else {\n        twoPointer(leftPointer, rightPointer, current)\n      }\n  }\n  return found\n}\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>7) Given a string and an integer k, find number of substrings in which all the different characters occurs exactly k times.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.geeksforgeeks.org\/number-substrings-count-character-k\/\">link<\/a><\/p>\n\n\n\n<p>Solution<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const subStrHasSameCharCount = (str, startIndex, endIndex, totalHop) => {\n  let charMap = {}\n  for (let k=startIndex;k&lt;endIndex;k++) {\n    let currentChar = str&#91;k]\n    if (charMap&#91;currentChar]) {\n      charMap&#91;currentChar]++\n    } else {\n      charMap&#91;currentChar] = 1\n    }\n  }\n  let totalCount = Object.values(charMap).length > 0\n  return totalCount ? Object.values(charMap).every(item => item == totalHop) : false\n}\n\n\nconst characterWithCountK = (str, k) => {\n  if (k == 0) return ''\n  let count = 0\n  let initialHop = k\n  while (initialHop &lt; str.length) {\n    for (let j=0;j&lt;str.length;j++) {\n      let startIndex = j\n      let endIndex = j + initialHop\n      if(endIndex > str.length) continue\n      count = subStrHasSameCharCount(str, startIndex, endIndex, k)\n        ? count + 1: count\n    }\n    initialHop+=k\n  }\n  count = subStrHasSameCharCount(str, 0, initialHop, k)\n        ? count + 1: count\n  return count\n}\n\n\nlet str = 'aabbcc'\nlet k = 2\nconsole.log(characterWithCountK(str, k))\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>8) Given two input strings, s1 and s2, containing characters from a-z in different orders, find if rearranging string in s1 results in a string that is equal to s2.<\/p>\n\n\n\n<p>Solution<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let s1 = 'dadbcbc'\nlet s2 = 'ccbbdad'\nlet charMap = {}\n\nconst canBeRearranged = (s1, s2) => {\n  if(s1.length!==s2.length){\n    return false\n  }\n  for(let i=0;i&lt;s1.length;i++){\n    const charFromString1 = s1&#91;i]\n    const charFromString2 = s2&#91;i]\n    if(charFromString1 in charMap){\n      charMap&#91;charFromString1]++\n    } else {\n      charMap&#91;charFromString1] = 1\n    }\n    if(charFromString2 in charMap){\n      charMap&#91;charFromString2]--\n    } else {\n      charMap&#91;charFromString2] = -1\n    }\n  }\n  for(let x in charMap){\n    if (charMap&#91;x]!==0){\n      return false\n    }\n  }\n  return true\n}\n\ncanBeRearranged(s1, s2)\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>9) Given an array or variable input size, write a function to shuffle the array.<\/p>\n\n\n\n<p>Solution<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const swap = (index1, index2, arr) => {\n  let temp = arr&#91;index1]\n  arr&#91;index1] = arr&#91;index2]\n  arr&#91;index2] = temp\n}\n\nconst shuffle = (arr) => {\n  let totalLength = arr.length\n  while(totalLength > 0) {\n    let random = Math.floor(Math.random() * totalLength)\n    totalLength--\n    swap(totalLength, random, arr)\n  }\n  return arr\n}\n\n\nlet arr = &#91;1, 2, 3, 4, 5, 6, 7, 8, 9, 10]\narr = shuffle(arr)\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>10) Calculate the sum of all elements in a multidimensional array of infinite depth.<\/p>\n\n\n\n<p>Solution<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let arr = &#91;4, 5, 7, 8, &#91;5, 7, 9, &#91;3, 5, 7]]]\nlet sum = 0\n\nconst calculateSum = (arr) => {\n  arr.reduce(function(acc, currentVal) {\n    const isEntryArray = Array.isArray(currentVal)\n    if (isEntryArray) {\n      return acc.concat(calculateSum(currentVal))\n    } else {\n      sum+=currentVal\n      return acc.concat(currentVal)\n    }\n  }, &#91;])\n}\ncalculateSum(arr)\nconsole.log(sum)\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>11) Flatten a nested object of varying debt.<\/p>\n\n\n\n<p>Solution<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const obj = {\n  level1: {\n    level2: {\n      level3: {\n        more: 'stuff', \n        other: 'otherz',\n        level4: {\n          the: 'end',\n        },\n      },\n    },\n    level2still: {\n      last: 'one',\n    },\n    am: 'bored',\n  },\n  more: 'what',\n  ipsum: {\n    lorem: 'latin',\n  },\n};\n\nvar removeNesting = function(obj, parent){\n  for (let key in obj){\n    if (typeof obj&#91;key] === \"object\") {\n      removeNesting(obj&#91;key], parent+\".\"+key)\n    } else {\n      flattenedObj&#91;parent+'.'+key] = obj&#91;key]\n    }\n  }\n}\n\nlet flattenedObj = {}\nconst sample = removeNesting(obj, \"\");\nconsole.log(flattenedObj);\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>12) Given a json input, where each entry represents a directory such that each directory in turn can have a nested entry of it&#8217;s own. Create the resulting directory structure.<\/p>\n\n\n\n<p><a href=\"https:\/\/jsbin.com\/gajiweq\/1\/edit?js,console\">Solution<\/a><\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h3>Assignments<\/h3>\n\n\n\n<p>1) Design a parking lot system with following requirements:<\/p>\n\n\n\n<ul><li>It can hold up to N vehicles. Handle availability of parking lot.<\/li><li>Entry and exit log of vehicles.<\/li><li>Automated ticketing system for every vehicle entering\/exiting the parking lot will have vehicle registration with vehicle details like: Registration No., Color, allocated parking slot.<\/li><\/ul>\n\n\n\n<p>I should be able to query:<\/p>\n\n\n\n<ul><li>Registration No. of all vehicles of a particular color.<\/li><li>Parking slot of a vehicle given registration no.<\/li><li>Parking slots for vehicles given a color.<\/li><li>List of available slots in the parking lot.<\/li><\/ul>\n\n\n\n<p>Requirements:<\/p>\n\n\n\n<ul><li>Can use anything to structure the code: Classes\/Structs.<\/li><li>Your solution should be extendable for future use cases.<\/li><\/ul>\n\n\n\n<p>Few code design principles:<\/p>\n\n\n\n<ul><li>Modularity of code.<\/li><li>Naming conventions.<\/li><li>SOLID principles.<\/li><\/ul>\n\n\n\n<p><a href=\"https:\/\/github.com\/devAbhijeet\/parking-lot-design-js\">Solution<\/a><\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>2) Create a react component&nbsp;<code>Ping<\/code>&nbsp;that makes an API call to a given URL. If the API calls returns status code 200 that means the user is online. However, if the API call receives status code other than 200 it means, the user is offline.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>Try changing&nbsp;<code>status<\/code>&nbsp;form dev tools network panel<\/p><\/blockquote>\n\n\n\n<p><a href=\"https:\/\/codesandbox.io\/s\/admiring-davinci-xnjef\">Solution<\/a><\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>3) Create a dynamic form builder from a&nbsp;<code>json<\/code>&nbsp;input. The form can be grouped based on&nbsp;<code>id<\/code>. Each group can have a nested group of it&#8217;s own.<\/p>\n\n\n\n<p><a href=\"https:\/\/codesandbox.io\/s\/great-noyce-75kup\">Solution<\/a><\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>4) Create a minimal excel sheet in pure javascript that supports&nbsp;<code>adding<\/code>&nbsp;and&nbsp;<code>removing<\/code>&nbsp;rows, columns. There was time limit on this question of 40 minutes.<\/p>\n\n\n\n<p><a href=\"https:\/\/codesandbox.io\/s\/smoosh-thunder-krv8m\">Solution<\/a><\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>5) You have to make a search input box which will search over a list of users.<\/p>\n\n\n\n<p>The user object has the following fields<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   id: a unique id\n   name: user\u2019s name\n   items: list of items ordered by user\n   address: address of the user\n   pincode: user address pin code\n<\/code><\/pre>\n\n\n\n<p>You have to implement search on all of the fields.<\/p>\n\n\n\n<p>The search results will show up as a list of User Cards.<\/p>\n\n\n\n<p>To Summarize<br>On typing in the search input box, the search results list opens up. The search could be just a string matching search.<\/p>\n\n\n\n<p>The list of cards can be navigated through keyboard or mouse<br>only one card should highlight at a time if both mouse and keyboard are used for navigation<\/p>\n\n\n\n<p>(keyboard will take preference if mouse is kept hovered on the list, similarly mouse will take preference if keyboard navigation is not used).<\/p>\n\n\n\n<p>This behaviour is similar to how youtube search works<\/p>\n\n\n\n<p>When no search results are found, an empty card is displayed<br>The card list would be scrollable.<\/p>\n\n\n\n<p>The highlighted card (via keyboard\/mouse) will scroll into view<\/p>\n\n\n\n<p><a href=\"https:\/\/codesandbox.io\/s\/silly-moon-31m7u\">Solution<\/a><\/p>\n\n\n\n<h3>Miscellaneous<\/h3>\n\n\n\n<p>1) How would you architect a front end application&nbsp;<a href=\"https:\/\/dev.to\/vycke\/how-to-create-a-scalable-and-maintainable-front-end-architecture-4f47\">click<\/a><br>1) Implement Lazy loading&nbsp;<a href=\"https:\/\/css-tricks.com\/the-complete-guide-to-lazy-loading-images\/\">click<\/a><br>2) What is Server Side Rendering.<br>3) How to deploy a react app to production.<br>4) What are service worker\/web worker.<br>5) How to optimise a web app and make it more performant.<br>6) Explain different type of client side cache strategies.<br>7) What is CORS.<br>8) What are higher order component in react.<br>9) How does connect function work in redux.<br>10) What are pure components in React.<\/p>\n\n\n\n<h3>Resources<\/h3>\n\n\n\n<p><a href=\"https:\/\/github.com\/devAbhijeet\/learning-resources\">link<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This readme is a compilation of all the question asked during my recent COVID-19 job hunt. I&#8217;ve also attached a list of resources that I&#8217;d referred for the preparations.The questions are divided into following sections.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[104],"_links":{"self":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/1341"}],"collection":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1341"}],"version-history":[{"count":1,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/1341\/revisions"}],"predecessor-version":[{"id":1342,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/1341\/revisions\/1342"}],"wp:attachment":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1341"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1341"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1341"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}