My Microsoft Frontend Interview Experience

Overview

This document outlines a candidate's experience interviewing for a frontend engineering position at Microsoft's Bengaluru office. The process involved multiple rounds, assessing technical skills, system design knowledge, and problem-solving abilities. The candidate demonstrated proficiency in various areas but ultimately declined the offer due to personal reasons and location constraints.

Interview Rounds

The interview process consisted of the following stages:

1. Hiring Manager (HM) Round: This round focused on the candidate's project experience, particularly challenging projects. The interviewer probed the design decisions made and the rationale behind them. Questions included:

   • What was the most challenging project you've worked on?
   • What were the specific challenges in that project, and how did you solve them?
   • Client-Side vs. Server-Side Rendering: When should you choose one over the other, and when would you opt for hybrid rendering in a web application?
   • Web Performance: How can you improve the performance of a web application?
   • Web Security: How do you protect an application from XSS, CSP violations, and ClickJacking attacks?

2. Technical Round 1: This round involved technical assessments, including writing a polyfill for the Promise API in JavaScript. The candidate provided a functional implementation.

   function CustomPromise(executor) {
     let value;
     let onResolve;
     let isFullFilled = false;
     let isCalled = false;
     let isRejected = false;
     let onReject;
     let error;
   function resolve(val) {
       value = val;
       isFullFilled = true;
       if (!isCalled && typeof onResolve === 'function') {
         onResolve(value);
         isCalled = true;
       }
     }
     function reject(err) {
       error = err;
       isRejected = true;
       if (!isCalled && typeof onReject === 'function') {
         onReject(err);
         isCalled = true;
       }
     }
     this.then = function(thenHandler) {
       onResolve = thenHandler;
       if (isFullFilled && !isCalled) {
         thenHandler(value);
         isCalled = true;
       }
       return this;
     }
     this.catch = function(catchHandler) {
       onReject = catchHandler;
       if (isRejected && !isCalled) {
         onReject(error);
         isCalled = true;
       }
       return this;
     }
     executor(resolve, reject);
   }
   CustomPromise.resolve = function(value) {
     return new CustomPromise((resolve) => resolve(value));
   }
   CustomPromise.reject = function(error) {
     return new CustomPromise((_, reject) => reject(error));
   }
   // Example usage:
   const p1 = new CustomPromise((resolve, reject) => {
     setTimeout(reject, 1000, 'Error occurred');
   });
   const p2 = CustomPromise.resolve(100);
   const p3 = CustomPromise.reject('Some error occurred');
   p3.catch(err => console.log(err));