Home /

Frontend Interview

JavaScript

JavaScript Internals, Hoisting, Scope, Prototypal Inheritance, DOM Events, Polyfills etc.

Machine Coding

Component & App Feature Implementation like Modals, Accordions, Games etc.

Frontend System Design

System Design Fundamentals, Component system design, Application system design etc.

UI Technologies

Browser, Authentication, Security, Performance Optimization, Accessibility, i18n etc.

React JS

React Basics, Component LifeCycle, React Design Patterns, Hooks, Custom Hooks etc.

DSA For Frontend

Big-O Complexity, Array, String, Tree & Graph Basics, Recursion, Sorting, Searching etc.

Frontend Interview Rounds Explained

Most of the well-known companies conduct 4 types of frontend interview technical rounds for any individual contributor positions. Here we will only be going to cover the technical rounds involved in the process. Interview round names and the order can be vary company by company

# Frontend Machine Coding Interview Round

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 key word, 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:

Develop a user interface of a mailing client similar to Gmail, which should have below functional and non functional requirements.

Functional requirements:
Able to view all the emails in a list format by sorting order, default by date Able to view the email content in a modal when click on any of the mails in the list. Able to search for a particular mail through mail summary heading.

Non-functional requirements:
Able to handle large amount of emails in a performance way. Accessibility support should be there, keyboard navigation.

Prepare For Machine Coding Interview

# JavaScript + React/Angular Interview Round

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.

# Frontend System Design Interview Round

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
Prepare For Frontend System Design Interview

# UI Technologies Interview Round

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

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
We are listening 👂
Share 💖Love for FrontendGeek, Report a 🐛Bug in Application Or Share any General ✍Feedback.
FrontendGeek
FrontendGeek

© 2024 FrontendGeek. All rights reserved