Cracking the frontend interview in 2024

Mohit Verma
6 min readOct 23, 2021

It’s hard to find good online resources to prepare for a front-end interview. So here’s my attempt to create one.

Create a reusable stepper component
This question test multiple concepts, like your knowledge of doubly linked list data structure or any other data structure, you come up with to solve this problem. And how well you write an extensible UI component(s) & CSS.

This can be asked to be developed with or without using any UI framework.

Create an image component
This question test multiple areas, like how well you know HTML elements & their attributes. And ways you tackle different edge cases & knowledge about images in general.

Images are the most commonly used HTML element across different websites. And pretty much your website LCP score depends on it a lot.

The interviewer will want you to write the component which shows fallback/placeholder image when image src contains invalid/unreachable URLs. This becomes complex when your website is server-side rendered.

Also, they can ask you how you can lazy load an image on a webpage.

What will be the output of this code & how you can change it to achieve the desired output (i.e 0, 1, 2, 3, 4)
This question will test your knowledge of scoping & async behavior of javascript. The interviewer can also touch base with the event loop concept as well.

Create an observable & subscribe to it
This is part of the reactive programming in javascript. Can refer to this document for a detailed explanation. The interviewer can ask you to implement basic observables in javascript. It’s also good to have a basic hands-on RxJS library.

What is a render tree?
Asked mostly in conjunction with the performance questions.

Write your own custom bind function
This question helps in testing your knowledge on concepts like prototype, bind & this context. Also, similar questions will be to write your own custom setTimeout, map, filter, reduce, call, etc functions.

Create a folder structure with the below-given JSON
This question can be extended to make folder(s) collapsable & expandable on folder click. It can be developed by using any framework or vanilla javascript, HTML & CSS. Make sure you have a good understanding of HTML element children and childNodes & how you can traverse them.

DOM tree problem
Given 2 identical DOM tree structures P & Q with root nodes rootP & rootQ & a leaf node “N”, find the value of a corresponding leaf node “M” in DOM tree Q.

Implement sum(1)(2)(3)(4)……(n)() = 1+2+3+4+5+n
Write a function that will sum all the arguments being passed in the above fashion. For e.g sum(1)(2)(3)() will return 6.

This question tests your currying concept & problem-solving skills. And it’s one of the most asked questions in any front-end interview.

Print all the nested children of a given HTML element
You will be given a parent element, which can be used to find & print all the nested children.

Create your own Javascript Promise function
This is somewhat complicated & challenging problem at the same time to implement. Will require a good understanding of how Promises in JavaScript work in general.
You can also be asked to write your own implementation of Promise.all & Promise.race method.

Perform below currying operation
You are given a function const sum = (a, b, c) => a+b+c. Now write a currying function const curriedSum = curry(sum), which will print the sum irrespective of how the arguments are being passed.

Example
console.log(curriedSum(1, 2, 3)) // output 6
console.log(curriedSum(1, 2)(3)) // output 6
console.log(curriedSum(1)(2)(3)) // output 6

Ways you can improve the performance of a web application
You should know about different web vitals & also the techniques to improve the performance of your components and views.

Example: Interviewer can ask you to list down different methods you can adopt to improve TTI or LCP of a website.

Implement infinite scrolling
It’s a technique in which content is loaded continuously as the user scrolls down the page.

Here is the very basic implementation of infinite scrolling in React, in which 50 items are loaded as a batch on reaching the end of the page.

How will you implement a fetch with a timeout functionality
This is to test your knowledge about AbortController.

Write a feature flag component, which can be used to wrap multiple feature implementations & can be toggled based on the flag value.
This can be asked to be developed in React, vanilla JS, or other frameworks you are comfortable with.

So based on flag name & value, we need to render only a specific feature/component.

Note: Flag values can be derived from some backend service API

SSR and CSR
The interviewer can ask this question to understand your knowledge about server-side rendering and client-side rendering. And what to use when.

Thanks

📖 Suggested books

Introduction to Algorithms
https://amzn.to/3IdqpHu

Data Structures And Algorithms Made Easy: Data Structures
https://amzn.to/3vuqVJE

SPEAKING JAVASCRIPT AN IN-DEPTH GUIDE FOR PROGRAMMERS https://amzn.to/3i149FU

Cracking the Coding Interview
https://amzn.to/3jJnzjm

DESIGNING DATA-INTENSIVE APPLICATIONS
https://amzn.to/3GqD4Wa

Atomic Habits: The life-changing million-copy bestseller https://amzn.to/3IcETHm

System Design Interview — An insider’s guide
https://amzn.to/3jDZtqa

DEEP WORK: RULES FOR FOCUSED SUCCESS IN A DISTRACTED WORLD https://amzn.to/3GrumHg

--

--