Frontend developer II

Implement our version of Promise.all(), a promiseAll function, with the difference being the function takes in an array instead of an iterable.

Example: 
const p0 = Promise.resolve(3);
const p1 = 42;
const p2 = new Promise((resolve, reject) => {
 setTimeout(() => {
   resolve('foo');
 }, 100);
});

await promiseAll([p0, p1, p2]); // [3, 42, 'foo']

Implement a function setCancellableInterval, that acts like setInterval but instead of returning a timer ID, it returns a function that when called, cancels the interval. The setCancellableInterval function should have the exact same signature as setInterval:

Example:
setCancellableInterval(callback);
setCancellableInterval(callback, delay);
setCancellableInterval(callback, delay, param1);
setCancellableInterval(callback, delay, param1, param2);
setCancellableInterval(callback, delay, param1, param2, /* … ,*/ paramN);

It is a Machine Coding Round, you are required to use Vanilla JavaScript to develop a custom table with the following specifications:

Initial Setup: Create a table where both the columns and data are retrieved from the backend. The columns are specified as an array of objects, such as [{key: 'Sno', value: 's_no'}, {key: 'First Name', value: 'first_name'}, {key: 'Last Name', value: 'last_name'}], and the data comes from the backend as well.

Search Functionality: Implement a search feature that allows users to filter the table's contents without losing the current state.

Render Props Pattern: Use the render props pattern to enable the customization of individual cells within the table.

Virtualization: How to optimize the table by implementing virtualization to handle large datasets efficiently.

Pagination: Implement different types of pagination techniques to manage the display of table data.

Infinite Scrolling vs. Virtual Scrolling: Understand and compare infinite scrolling and virtual scrolling approaches to determine which is more suitable for your use case.

Performance Optimization: Explore further optimization strategies to enhance the table's performance.

Design an e-commerce website that allows users to browse products and purchase them.

The problem is then broken down into several detailed discussions. 

1. What are the core features to be supported?
- Browsing products.
- Adding products to the cart.
- Checking out successfully.

2. What are the pages in the website?
- Product listing page (PLP)
- Product details page (PDP)
- Cart page
- Checkout page

3. What product details will be shown on the PLPs and PDPs?
- PLPs: Product name, Product image, Price.
- PDPs: Product name, Product images (multiple), Product description, Price.

4. What do the user demographics look like?
International users of a wide age range: US, Asia, Europe, etc.

5. What are the non-functional requirements?
Each page should load under 2 seconds. Interactions with page elements should respond quickly.

6. What devices will the application be used on?
All possible devices: laptop, tablets, mobile, etc.

7. Do users have to be signed in to purchase?
Users can purchase as a guest without being signed in.

8. Core Web Vitals
Know the various core web vital metrics, what they are, and how to improve them. 
LCP, FID and CLS

9. Server-side Rendering or Client-side Rendering?
10. Data Model
11. Search Engine Optimization
12. Best Practices for Payment and Address Forms like i18n, Accessibility and User Experience