VanillaJS Mini Projects

1. Design a pop over (Background should be blur/darker)

2. Design an accordion

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

   • Sort / filter / search

6. Design a navbar

7. Implement infinite scroll

8. Typeahead / autocomplete using trie ( Facebook, good to have )

9. Create an analog clock

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 be asked in various other forms like nested comments

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

2. Execution context

3. Hoisting

4. Scope chain

5. Var, let, const, temporal dead zone

6. this keyword

7. call, apply, bind

8. Closure

9. Constructor functions, classes

10. Prototypal inheritance

11. Implement debounce

12. Implement throttle

13. Polyfill for map, reduce, filter, foreach

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

    • Polyfill for Promise.all

20. Implement curry

21. Spread, rest, destructuring

22. Event delegation and event bubbling

23. Implement setInterval using setTimeout

24. Pollyfill for isArray

    • Understand different types in JavaScript

    • Usage of typeof

25. Memoize any function

26. Implement async series

27. Add event listener to array ( hard? good to have )

28. Generator functions ( Intuit )

29. Tricky interview questions

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 keeping no more than 10 active requests.

Web Performance

1. Critical rendering path (must watch)

2. Caching

   • HTTP requests: Headers like Cache-Control, ETag, and Transfer-Encoding

3. Network waterfall

4. Bundle size optimisation ( good to have webpack basics)

5. Async , defer script attributes

6. preconnect, preload, prefetch

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

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 this list

Make sure to go through this 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

If you need any additional resources/links, please leave a comment. I will update the article accordingly.