Comprehensive front-end interview guide
Frontend interviews can be challenging and overwhelming considering the variety of topics to prepare. This guide will help you get your hands on all the areas you need to focus on.
VanillaJS Mini Projects
Design a pop over (Background should be blur/darker)
Design a Carousel
It should stop moving/pause on hover
Resume on mouse out
It should be automatically moving
Should have next and previous button for manual options
Make a to-do list
It should support add, delete, edit.
Save the to-do to local storage and maintain the previous state on page refresh.
A list in JavaScript that supports the following
Sort / filter / search
Typeahead / autocomplete using trie ( Facebook, good to have )
Implement a poll widget
Implement folder / files structure ( trending , must do )
Each folder can be expanded/ collapsed
Each folder can have either files / sub folders
Can be asked in various other forms like nested comments
Design an app like Jira (Atlassian)
Should be able to move cards between different states like to-do, in progress, dev complete
JavaScript
Constructor functions, classes
Prototypal inheritance
Polyfill for call, apply, bind
Polyfill for flat method
Infinite depth flatten and flatten by a certain number
Implement both recursive and iterative approaches
Currying
Given an object make the keys as values and values as keys. Definitely have to handle duplicates and make an assumption that it's values are only String (Src. leetcode)
Implement observable ( not very common , good to have )
Promises
Spread, rest, destructuring
Implement setInterval using setTimeout
Pollyfill for isArray
Understand different types in JavaScript
Usage of typeof
Add event listener to array ( hard? good to have )
Generator functions ( Intuit )
Implement performance bottleneck ( Hard, for senior JavaScript devs )
Your website makes 1000s of calls on initial page load and you need to optimise this by limiting the active calls to 10 at a time.
Use promises, everytime a promise resolves you can send a new request keeping no more than 10 active requests.
Web Performance
Critical rendering path (must watch)
Caching
HTTP requests: Headers like Cache-Control, ETag, and Transfer-Encoding
Network waterfall
Bundle size optimisation ( good to have webpack basics)
Image optimization (jpeg v/s png v/s svg)
Web security
XSS ( understand why we need cookies )
CSRF
Content security policy
React
Virtual DOM
How does useEffect work internally
Optimization hooks
useMemo
useCallback
How is React.memo different from useMemo ( two very different things )
useReducer, useContext hook
react-redux vs context API vs passing props
Data structures and algorithms
This is a vast topic and hard to predict for an interview. Practise is key here.
For problems by different patterns, go through this list
Make sure to go through this to understand the different patterns.
Design round
Design snake and ladder
Design chess
Design parking lot
Design lift system
Design patterns
If you need any additional resources/links, please leave a comment. I will update the article accordingly.
hello simran,
Thanks for sharing this. I am seeing this guide and you have not added anything related to class based components for react. Most of all the info for react is with functional based component. I am beginner in react. Is is ok if i skip class based component and learn only functional components.
I saved it for future reference.