Comprehensive front-end interview guide Mega Thread 🧵 Original blog : codewithsimran.substack.com
💥 Machine coding round 💥 1. Design a pop over (Background should be blur/darker) [youtube.com/watch?v=XH5OW4…] 2. Design an accordion [youtube.com/watch?v=dr8Emh…]
3. 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
4. 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. 5. A list in JavaScript that supports the following 👉 Pagination [medium.com/geekculture/bu…] 👉 Sort / filter / search
6. Design a navbar [youtube.com/watch?v=gXkqy0…] 7. Implement infinite scroll [youtube.com/watch?v=xHm6Ab…] 8. Typeahead / autocomplete using trie ( Facebook, good to have )
9. Create an analog clock [youtube.com/watch?v=9DxdE_…] 10. Implement a poll widget 11. Implement folder / files structure ( trending , must do ) 👉 Each folder can be expanded/collapsed 👉 Each folder can have either files/sub folders Can also be asked as a nested comments problem
12. Design an app like Jira (Atlassian) 👉 Should be able to move cards between different states like to-do, in progress, dev complete
💥 JavaScript 💥 1. How does JavaScript work / Event loop [youtube.com/watch?v=m0_e9h…] 2. Execution context [youtube.com/watch?v=lT0Lf2…] 3. Hoisting [youtube.com/watch?v=7XbfeM…] 4. Scope Chain [youtube.com/watch?v=oS8rtS…]
5. Var, let, const, temporal dead zone [youtube.com/watch?v=mxqjBt…] 6. this keyword [youtube.com/watch?v=Qew1GY…] 7. call, apply, bind [youtube.com/watch?v=OSjTmE…] 8. Closure [youtube.com/watch?v=qikxEI…] 9. Constructor functions, classes 10. Prototypal inheritance
11. Implement debounce [youtube.com/watch?v=Zo-6_q…] 12. Implement throttle [youtube.com/watch?v=81NGEX…] 13. Polyfill for map, reduce, filter, foreach [reeversedev.com/polyfill-for-f…] 14. Polyfill for call, apply, bind
15. Polyfill for flat method 👉 Infinite depth flatten and flatten by a certain number 👉 Implement both recursive and iterative approaches 16. Currying
17. 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) 18. Implement observable ( not very common , good to have )
19. Promises 👉 Polyfill for promises [levelup.gitconnected.com/learn-javascri…] 👉 Polyfill for Promise.all [jsvault.com/promise-all] 20. Implement curry [bigfrontend.dev/problem/implem…] 21. Spread, rest, destructuring 22. Implement setInterval using setTimeout
23. Pollyfill for isArray 👉 Understand different types in JavaScript 👉 Usage of typeof 24. Event delegation [youtube.com/watch?v=3KJI1W…] and event bubbling [youtube.com/watch?v=aVSf0b…]
25. Memoize any function [jsvault.com/memoize-functi…] 26. Implement async series [jsvault.com/async-series] 27. Add event listener to array ( hard? good to have ) [jsvault.com/array-listener] 28. Generator functions ( Intuit ) [youtube.com/watch?v=IJ6Egd…]
29. Tricky interview questions [linkedin.com/pulse/top-10-t…]
30. 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
💥 Web performance 💥 1. Critical rendering path (must watch) [udacity.com/course/website…] 2. Caching 👉 HTTP requests: Headers like Cache-Control, ETag, and Transfer-Encoding [youtube.com/watch?v=HiBDZg…] 3. Network waterfall 4. Bundle size optimisation ( good to have webpack basics)
5. Async, defer script attributes [youtube.com/watch?v=IrHmpd…] 6. preconnect, preload, prefetch [youtube.com/watch?v=5s7tQj…] 7. Image optimization (jpeg v/s png v/s svg)
💥 Web security 💥 1. XSS ( understand why we need cookies ) 2. CSRF 3. Content security policy
💥 React 💥 1. Virtual DOM 2. How does React state (usestate) work internally [dev.to/rembrandtreyes…] 3. How does useEffect work internally 4. Optimization hooks 👉 useMemo 👉 useCallback 👉 How is React.memo different from useMemo ( two very different things )
5. useReducer, useContext hook 6. 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 seanprashad.com/leetcode-patte… Make sure to go through hackernoon.com/14-patterns-to… understand the different patterns.
💥 Design round 💥 1. Design snake and ladder 2. Design chess 3. Design parking lot 4. Design lift system 5. Design patterns
This is a great thread! Please keep on updating your substack blog with more resources in future. That is a gold mine. Thank you very much!!
This is amazing Simran.👏👏 Thanks for taking this much effort and creating such a valuable thread. Bookmarked.🙏🙏
United States Trends
- 1. Obamacare 162K posts
- 2. Texas Tech 8,670 posts
- 3. St. John 4,120 posts
- 4. Gameday 15.3K posts
- 5. #SaturdayVibes 5,303 posts
- 6. Sesko 48.5K posts
- 7. #Caturday 5,440 posts
- 8. Parker Kingston N/A
- 9. Ugarte 16.9K posts
- 10. Calen Bullock N/A
- 11. Trump Stadium 3,160 posts
- 12. Beaver Stadium N/A
- 13. Good Saturday 34.8K posts
- 14. Insurance 208K posts
- 15. Miss St N/A
- 16. Sunderland 68.8K posts
- 17. #sjubb N/A
- 18. Luis Diaz 29.5K posts
- 19. #BYUFOOTBALL N/A
- 20. Behren Morton N/A
Something went wrong.
Something went wrong.