7 Frontend Rounds

Prepare for All Frontend Interview Rounds

Save your time with curated resources and interview questions for freshers and experienced developers — structured by round so you know exactly what to study.

JavaScript

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

— topics·— resources

Machine Coding

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

— topics·— resources

Frontend System Design

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

— topics·— resources

UI Technologies

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

— topics·— resources

React JS

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

— topics·— resources

Angular

Angular Components, Directives, Pipes, Modules etc.

— topics·— resources

DSA For Frontend

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

— topics·— resources

What to expect

Frontend interview rounds explained

Most well-known companies conduct multiple frontend interview technical rounds for individual contributor positions. Round names and order can vary company by company.

01Frontend Machine Coding
02JavaScript + React/Angular
03Frontend System Design
04UI Technologies
05DSA For Frontend

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

Modularity & extendibility of the code — how you break a big problem into smaller problems and organize your code with separation of concerns and reusability. Extendibility tests whether new functionality requires a large rewrite.
Best practices — how you incorporate frontend best practices for variables, functions, classes, and iteration.
Overall functionality — interviewers generally prefer functionality over look and feel, but your application should meet all functional and non-functional requirements.

Essential topics

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

Develop a user interface of a mailing client similar to Gmail, which should have the following 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 clicking 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 a large amount of emails in a performant way.
Accessibility support should be there, including keyboard navigation.

Prepare For Machine Coding Interview Read Machine Coding Blogs

JavaScript + React/Angular Interview Round

In this interview round you can expect output-based questions around JavaScript fundamentals, and questions around JS framework design patterns, differences between patterns, Hooks, and under-the-hood working of JavaScript and frameworks 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

Ability to evaluate the right output and explain under-the-hood working.
Ability to explain how JS and JS framework fundamental concepts work, like closures, currying etc.

Essential topics

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: Design patterns like singleton, factory, hooks, pub-sub etc.

Prepare For JavaScript Interview Read JavaScript Blogs Read React Blogs

Frontend System Design Interview Round

This is a design round where you can expect questions around designing an application, a complex component, or part of an 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

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

Essential topics

Virtualization/Windowing/Lazy Loading: To enable performant long list support
Performance Optimization Techniques: Asset, network, and rendering optimizations
Common Frontend Architecture: Micro-frontend, Monorepos, Monolithic
Communication techniques: REST API, GraphQL, gRPC, tRPC
Data Store Objects

Frontend System Design Interview Read System Design Blogs

UI Technologies Interview Round

In this interview round you can expect questions around frontend technologies primarily involved in making scalable and 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

Ability to showcase in-depth knowledge about UI technologies, including browser, security, performance, and accessibility.
Knowledge about use-cases, pros/cons, and general implementation in a web application.

Essential topics

Browser: How browser works, rendering of a webpage, JS engine etc.
Security: Use-case and implementation of CORS, CSRF, CSP, XSS etc.
Accessibility: Principles, accessibility roles and state (aria-*) etc.
Performance improvement techniques: Asset, network, and rendering optimizations
Authentication: Basic Auth, OAuth2.0, JWT token, OpenID connect etc.

Prepare For UI Technologies Interview Read UI Technologies Blogs

DSA For Frontend Interview Round

In this interview round you can expect questions around data structures and algorithms 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

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

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.

Prepare For DSA Interview Read DSA for Frontend Blogs

Newsletter

Stay Updated

Subscribe to FrontendGeek Hub for frontend interview preparation, interview experiences, curated resources and roadmaps.