Frontend Interview Rounds

In this interview round you can expect development of an application or part of the functionality of a big application that includes functional requirements and non-functional requirements like performance, accessibility support.

Primary objective of this interview round is to test your overall knowledge of frontend skills including JavaScript, HTML & CSS in a real development environment.

Evaluation Pointers

Evaluation of this round is based primarily on the basis of below pointers

• Modularity & extendibility of the code - How you break a big problem into multiple small problems and organize your code by keeping in mind about separation of concerns and reusability. Extendibility is the another criteria to test whether you code requires a a big chunk of rewrite every time when a new functionality will be introduced.
• Best practices - How you are incorporating frontend best practices of defining variables, functions, classes, iteration over items etc
• Overall functionality: In this round, generally interviewers prefer functionality over look and feel, but your application should be able to perform all the mentioned functional requirements and should have capability mentioned as part of non-functional requirements

Essential Topics

Even though this round requires a good knowledge about most of the frontend areas, but few topics are essential. Here is the list of essential topics for this interview.

• JavaScript Basics: Function, Object and Array Methods, closures, this keyword, Iteration constructs, ES6 destructuring, spreading etc.
• Async JavaScript: Promises & its Methods, Async-Await, fetch API call, AbortController, setInterval, setTimeout etc.
• DOM & BOM: Accessing, modification and deletion of DOM elements, x y location specific concepts etc.
• Concepts: Throttling, debouncing, template passing, Exception & error handling etc.
• JavaScript Framework/React: Component creation, Hooks, props propagation, design patterns

Example Question

In this interview round you can expect output based questions around the JavaScript fundamental topics, and questions around JS frameworks design patterns, differences between 2 patterns, Hooks, question around under the hood working of JavaScript as well as JS framework like react.

Primary objective of this interview round is to test your overall knowledge of JavaScript and JS framework fundamentals, and internal working.

Evaluation Pointers

Evaluation of this round is based primarily on the basis of below pointers

• Ability to evaluate the right output and able to explain under the hood working.
• Ability to explain how the JS and JS framework fundamental concepts works like Closures, currying etc.

Essential Topics

Even though this round requires a good knowledge about most of the frontend areas, but few topics are essential. Here is the list of essential topics for this interview.

• JavaScript Basics: Closures, "this" keyword, Currying, Hoisting, Prototypal Inheritance, Classes, Prototype chaining etc.
• Async JavaScript: Promises & its Methods, Async-Await, setInterval, settimeout etc.
• JavaScript Framework/React: JavaScript Design patterns like singleton, factory, hooks, pub-sub etc.

This is a design round, and in this interview round you can expect questions around designing an application, a complex component or a part of the application.

Primary objective of this interview round is to evaluate your frontend system design skills to create a scalable and performant web application or component.

Evaluation Pointers

Evaluation of this round is based primarily on the basis of below pointers

• Ability to drive the design discussion by covering all the necessary questions, scoping etc.
• Ability to provide justifications and tradeoff to all the choices made during the system architecture and communication design.
• Knowledge about the design patterns available to solve the common frontend system design problems.

Essential Topics

Even though this round requires a good knowledge about overall frontend system design aspects, but few topics are essential. Here is the list of essential topics for this interview.

• Virtualization/Windowing/Lazy Loading: To enable performance long list support
• Performance Optimization Techniques: Asset Optimizations, Network Optimizations, Rendering optimizations
• Common Frontend Architecture: Micro-frontend, Monorepos, Monolithic
• Communication techniques: REST Api, GraphQL, gRPC, tRPC
• Data Store Objects

In this interview round you can expect questions around Frontend technologies which are primarily involved in making of scalable & performant enterprise web applications.

Primary objective of this interview round is to evaluate your frontend technologies knowledge and its implementation to enhance web application experience.

Evaluation Pointers

Evaluation of this round is based primarily on the basis of below pointers

• Ability to showcase your in-depth knowledge about the UI technologies, which includes UI technologies related to browser, security, performance and accessibility etc.
• Knowledge about their use-case, pros-cons and general implementation in a web application.

Essential Topics

Here is the list of essential topics for this interview round.

• Browser: How browser works, rendering of a webpage, JS engine etc.
• Security: Knowledge about use-case and implementation of CORS, CSRF, CSP, XSS etc.
• Accessibility: Principals, accessibility roles and state (aria-*) etc.
• Performance Improvement techniques: Techniques around asset, network and rendering optimizations
• Authentication: Basic Auth, OAuth2.0, JWT token, OpenID connect etc.

In this interview round you can expect questions around data structures and algorithms that are commonly used in frontend development, including array manipulation, string processing, tree traversal, and optimization problems.

Primary objective of this interview round is to evaluate your problem-solving skills and understanding of fundamental data structures and algorithms in the context of frontend development.

Evaluation Pointers

Evaluation of this round is based primarily on the basis of below pointers

• Problem-solving approach: How you break down a problem and identify the right data structure and algorithm to use.
• Code efficiency: Ability to write optimized code with good time and space complexity.
• Edge case handling: How well you identify and handle edge cases and boundary conditions.

Essential Topics

Here is the list of essential DSA topics for frontend interviews.

• Arrays & Strings: Manipulation, searching, sorting, two-pointer technique, sliding window etc.
• Hash Maps & Sets: Frequency counting, caching, lookup optimization etc.
• Trees & Graphs: DOM tree traversal, component hierarchy, BFS, DFS etc.
• Recursion & Backtracking: Tree operations, nested structures, memoization etc.
• Time & Space Complexity: Big-O notation, optimization techniques, trade-offs etc.