Software Engineer 2 UI Interview at Microsoft

Hello there,

For those who don't know me, do check out my website and my other blogs.

I recently accepted Microsoft's offer for Software Engineer II at IDC, Bangalore. I realized a blog about this might help a few :)

In this post, I'll take you through my preparation, strategies, interview rounds, and things to look out for in each round. This will be in a Q&A format.

Disclaimer:
The following incidents are completely based on my view and what I have observed from my experience and it might vary from one individual to the other.

Firstly, why do I have to write this in a blog?

• When I got called for the interviews, I was searching all over the Internet to find out how interviews are done for the Frontend domain in Microsoft. I found very less content. And I had to go for the interview without any knowledge about rounds. So I thought of letting others know more about the rounds so that they are prepared.
• When I posted my Job switch news on LinkedIn, surprisingly I got numerous chat requests where people asked me about my preparation and my interview experience.

How did I apply?

I had my profile listed in Instahyre, a famous job search portal in India, with the Actively looking for opportunities option enabled. One evening, I got a call from a person (working in a third-party headhunting firm on behalf of Microsoft) asking if I am interested in the role. And it began...

How did I Prepare?

I was attending a few other interviews prior to the above interview call. So when I got the call I was almost in a good position to attend the interview. As it was for the Frontend Engineer role I brushed up on JS basics, Web Performances, my current projects, and Leetcode. I did about 240+ Leetcode Questions by the time I gave the Interview. (It might just be 0 for someone :P). I highly advise anyone attending FE interview at Microsoft or any top MNCs(Amazon, Google,...) and many other top Startups(Rubrik, Flipkart,...) to have enough knowledge on Data Structures and Algorithm. There is no escaping from DS & Algo as it is considered heavily to rate your problem-solving skills. Attaching my leetcode profile here for reference. Feel free to follow.

Resources for Frontend?

• Javascript from W3 Schools, techsith tutorials, You Don't Know JS
• React from udemy.
• Web Fundamentals & performances
• Latest technology updates from Twitter.

Do I get to know which team I am being hired before giving the interview?

If you are part of a massive Interview Drive, you will have to wait until you meet your potential Hiring Manager(sometimes even the one taking your Managerial Round won't be your actual HM). However, you might get to know the product in which you will be working on before the interview(Azure, Office365, etc).

How do I know which Level I am being hired for?

From what I have observed and read about, Microsoft does not assign you a Level based on your years of experience. I have seen a lot of posts in blind, leetcode, etc where 8YOE are given L61 and 4YOE are given L62. So, it all boils down to how well you performed in your interview.

Okay enough, tell me about the rounds already!

Due to COVID-19, all interviews happened virtually through Microsoft Teams.

Round 1 (Machine Coding): (2 hours)

As a Frontend Engineer, I was expected to start with a machine coding round where I was given a problem statement which I have to complete in 2 hours. If you have any doubts regarding the problem you can ask the interviewer. You might be given a zip containing initial boilerplate.

Example Questions:

 - Design an Email Client like MS Outlook.
 - Create a chat interface like MS teams.
 - Create a Notification interface like MS teams.

Things to look out for:

• Don't jump to writing answers unless you understand the question thoroughly.
• There could be few jargons which could be part of your question, make sure you ask clarifying questions and don't assume anything :)
• Write Semantic HTML with proper tagging (Don't make everything a div)!!! Important
• Know the tradeoffs, if you have to dynamically create a complex DOM tree, using JS APIs like document.createElement() then it would consume a hell lot of time. So think if that suits you or you should go with innerHTML approach.
• Understand flexbox or grid as they will come in handy in creating a responsive layout.
• Try using the latest ES6, ES2020 concepts, it is a platform to show that you are aware of the latest updates.
• Incrementally build your application and make sure to submit the working code :P

Round 2 (Javascript): (1 hour)

Here I was evaluated on my Javascript knowledge.

For the first 10 minutes, from the code that I wrote earlier in my machine coding round, I was asked to discuss the following:

• Why did I choose a particular approach?
• What other alternatives are there?
• What are the tradeoffs I chose to complete the problem at a specified time?
• If I were to get more time, what would I do better?

Review your code and prepare for these questions before you enter the next round.

After this, it was full-on javascript questions, where I was asked to write a polyfill for some js APIs introduced in ES6 or ES2020. For me, it was to write a Promise polyfill.

Adding to the above question I was asked to implement the following.

Promise based memoization with a given cache size behaving
as an LRU cache with an expiry time and auto cache burst

Here I was grilled on my JS knowledge on async, promises, higher-order components, etc.

Round 3 (Design / HLD + LLD /): (1 hour)

In this round I was asked to design a ChessBoard, as I don't know how to play chess😅😅, I told the interviewer and he modified the question to,

Design Snakes and ladders game

I was asked to write the Classes and methods involved in each one of them. Not expected to run it in the console. It happened over the VS code editor.

Expectations on this round were:

• How good am I in identifying the Top-level classes and if I am able to breakdown the tasks into small meaningful chunks.
• What is the overall Data structure that I am using to store the data?
• How readable is the code?
• Am I good at identifying the corner cases?
• How scalable the architecture I used will be?

Round 4 (PSDS) : (1 hour)

This is a problem-solving round. To evaluate my Problem-solving skills and how quickly am I able to achieve an optimized solution.

Here I was asked 2 questions:

• Find the starting and ending indices of all repeated characters from a string.

const input =“hellooooloo”;
const op = getRepeated(input);
console.log(op) // [(2,3), (4,7), (9,10)]

• The next problem is a String Backtracking approach, an extension of the previous one, where I have to check if I can form a word in the dictionary by removing one or more repeated letters.

const dictionary = {
    'hellolo': true
};
const input = “hellooooloo”;
const op = canBeFormed(input);
console.log(op) // true,
// because by deleting the repeated characters of `o` we can form `hellolo` which is present in the dictionary

Round 5 (Hiring Manager): (typically 45 mins - 1 hour)

I was asked questions on multiple fronts like Javascript, performances, and Problem-solving. It was like a combination of all the above rounds.

• I was given a snippet in JS and asked about its output and how does it work under the hood. (Macro and micro queues related).
• What are the strategies that I follow to increase the speed of any website?
• Web vitals and how they are measured?
• Browser Execution of Document.
• Problem: Space Separator, another string based backtracking question.

const dict = {
 hi: true
 hello: true,
 world: true
};

const str = spaceSeparator('helloworld'); // "hello world"
const str2 = spaceSeparator('helloworldhi'); // "hello world hi"
const str2 = spaceSeparator('helloworldh'); // "" , as h is not present in dict we throw "" as output

The code I wrote here for the problem was asked to run on the browser console after completion, to verify its correctness.

Round 6 (As Appropriate): (1 hour)

This is the final round and it is important to get a hire in this round too. It is not a gimmick, as I have read posts where people got rejected in this round.

Here I interacted with an Interviewer who was at a GM/Partner level in Microsoft. This round could be as simple as knowing about your interests and your past project to Complex Data structures. And for me its the latter :P

It started slowly with an introduction and my background and landed on a data structure question. I was asked to write the following program.

This was an interesting problem and I encountered this for the first time in this interview.

Consider you are getting millions of tweets per second,
you have to alert whenever a particular word is repeated 
billion times in any 1 hour time frame (moving window)

• I had to decide the Data structure for each tweet.
• I had to decide how I want to store it in my memory.
• I had to come up with an optimal solution.

What Next?

Now you wait!!!

Microsoft has a lot of applicants for each role, so before they confirm that you are selected they do make sure they have evaluated other candidates who might be a better fit. So, you will have to wait for them to come back.

It took me 2 weeks to know that I was selected. And releasing the offer took another week. And you will have 5 days to accept the offer.

Overall I would say the entire journey was smooth and I'll be part of MicrosoftTeams Development. An enterprise chat application used by millions of people.

So excited!!!! Wish me luck!!!🤩 🥳

Don't forget to follow me!😄

If you have more questions add it over the comments section I'll try giving the input if I know the answers😛

My Website, blogs, and Twitter

That's all Folks!!!

Comments

[ALANKRIT{v}]

Congrats sir,
I wanted to know if they will let you solve the DS algo problems in javascript or its benificial to go for python,java or c++
And which language did you choose to practice ds-algo problems on leecode?
I am a begineer and only know javascript so should I continue to practice ds in javascript or do I have to learn python/java for that.
Thank you for your time!

[Dhilip kumar]

As the role was for UI Engineer, it is best that you use javascript to code! I coded in javascript and practised in leetcode in Js

[ALANKRIT{v}]

Thank you so much sir! and again congratulation on your new job 😊

[Dhilip kumar]

Thanks man 🤓

[Vaibhav Sharma]

Are there any restrictions in machine coding round? Like you have to use pure JavaScript only etc. Or do they allow using any FE frameworks also?

[Dhilip kumar]

Yes, 😅Vanilla JavaScript and No Css Frameworks allowed!!!

[Pankaj Kumar]

Do you need to create backend as well or you will get json response for mail/chat application?

[Dhilip kumar]

You don't have to create backend! The package you receive will have a dummy function which keeps giving you data in a regular interval, all you need to do it listen to it.

[Pankaj Kumar]

Basically you need to call the api, create skeleton and add filters on Json , right?

[Dhilip kumar]

On those lines along with the constraints added in the requirements

[Pankaj Kumar]

Thanks 😊

[Vaibhav Sharma]

Thanks. Great article!!

[Dhilip kumar]

As per the "Industry standards" 😛

[Ronaldo]

Hi Dhilip, could you please share resources from where we can prepare for the same. I got rejected by Flipkart and the rounds were same. 1st Machine Coding, 2nd- Problem Solving/DS, 3rd- UI Tech, 4th- Product Round, 5th- Final Round.

Apart from practising on the leetcode, please share other resource from which the UI Developers should prepare for Machine Coding, UI Tech rounds. It will be a great help.

Thanks

[Benjamin Gruenbaum]

This annoyed me so much I signed up to dev.to

[Dhilip kumar]

Hey Benjamin,

I am not sure why you're annoyed about the post😅😅 but the implementation didn't actually call for handling all the edge cases, they were looking into how I was able to think through if I were to design its polyfill.

[Benjamin Gruenbaum]

To be clear - I am not annoyed about your post but about your experience. It just sounds way too hard for an hour interview :]

[Pawan Kumar]

`
function findRepeatingIndex(string) {
const map = {};
for (let i = 0; i < string.length; i++) {
const char = string[i];
if (!map[char]) {
map[char] = { startingIndex: i };
} else {
map[char].endIndex = i;
}
}
const result = [];
for (const [char, charIdx] of Object.entries(map)) {
const { startingIndex, endIndex } = charIdx;
if (endIndex > 0) {
result.push([startingIndex, endIndex]);
}
}

return result;
}

console.log(findRepeatingIndex("hellooooloo"));

const dictionary = {
hellolo: true,
};

function canBeFormed(input) {
if (input in dictionary) {
return true;
}
for (let i = 0; i < input.length; i++) {
if (input[i] === input[i + 1]) {
const newInput = input.slice(0, i) + input.slice(i + 1);
if (canBeFormed(newInput)) {
return true;
}
}
}
return false;
}

const input = "hellooooloo";
const op = canBeFormed(input);
console.log(op); // true

const dict = {
hi: true,
hello: true,
world: true,
};

function spaceSeparator(input) {
if (input === "") {
return "";
}
for (let i = 1; i <= input.length; i++) {
const word = input.slice(0, i);
if (word in dict) {
const rest = spaceSeparator(input.slice(i));
if (rest !== null) {
return word + " " + rest;
}
}
}
return null;
}

const str = spaceSeparator("helloworld"); // "hello world"
const str2 = spaceSeparator("helloworldhi"); // "hello world hi"
const str3 = spaceSeparator("helloworldh"); // ""
console.log(str);
console.log(str2);
console.log(str3);

const word = "example";
const threshold = 1000000000;
const windowSize = 3600; // 1 hour in seconds
const counts = new Array(windowSize).fill(0);
let totalCount = 0;

function processTweet(tweet) {
if (tweet.includes(word)) {
const timestamp = Math.floor(Date.now() / 1000); // current timestamp in seconds
const index = timestamp % windowSize; // index in the counts array
totalCount -= counts[index]; // subtract the count at the index from the total count
counts[index] = tweet.split(word).length - 1; // count the number of occurrences of the word in the tweet
totalCount += counts[index]; // add the new count to the total count
if (totalCount >= threshold) {
console.log(
Alert: ${word} repeated ${totalCount} times in the last hour
);
}
}
}

// Example usage:
processTweet("This is an example tweet");
processTweet("Another example tweet with the word example");

class LRUCache {
constructor(maxSize, expiryTime) {
this.maxSize = maxSize;
this.expiryTime = expiryTime;
this.cache = new Map();
this.head = null;
this.tail = null;
}

async get(key, fn) {
const entry = this.cache.get(key);
if (entry) {
if (Date.now() < entry.expiryTime) {
this.moveToHead(entry);
return entry.value;
} else {
this.removeEntry(entry);
}
}
const value = await fn();
const newEntry = { key, value, expiryTime: Date.now() + this.expiryTime };
this.cache.set(key, newEntry);
this.addToHead(newEntry);
if (this.cache.size > this.maxSize) {
const removedEntry = this.removeTail();
console.log(Cache burst: removed entry with key ${removedEntry.key});
}
return value;
}

addToHead(entry) {
entry.prev = null;
entry.next = this.head;
if (this.head) {
this.head.prev = entry;
} else {
this.tail = entry;
}
this.head = entry;
}

moveToHead(entry) {
if (entry === this.head) {
return;
}
if (entry === this.tail) {
this.tail = entry.prev;
this.tail.next = null;
} else {
entry.prev.next = entry.next;
entry.next.prev = entry.prev;
}
this.addToHead(entry);
}

removeEntry(entry) {
if (entry === this.head) {
this.head = entry.next;
} else if (entry === this.tail) {
this.tail = entry.prev;
this.tail.next = null;
} else {
entry.prev.next = entry.next;
entry.next.prev = entry.prev;
}
this.cache.delete(entry.key);
}

removeTail() {
const entry = this.tail;
this.tail = entry.prev;
if (this.tail) {
this.tail.next = null;
} else {
this.head = null;
}
this.cache.delete(entry.key);
return entry;
}
}

// Example usage:
const cache = new LRUCache(3, 10000); // max size of 3 entries, expiry time of 10 seconds
async function fetchData(key) {
console.log(Fetching data for key ${key});
return new Promise((resolve) =>
setTimeout(() => resolve(Data for key ${key}), 1000)
);
}
console.log(await cache.get("key1", () => fetchData("key1")));
console.log(await cache.get("key2", () => fetchData("key2")));
console.log(await cache.get("key3", () => fetchData("key3")));
console.log(await cache.get("key1", () => fetchData("key1"))); // should hit cache
console.log(await cache.get("key4", () => fetchData("key4"))); // should trigger cache burst
console.log(await cache.get("key2", () => fetchData("key2"))); // should hit cache

`

Answers for above quetions . Hope it helps someone

[Umut Topuzoğlu]

Were you allowed to google stuff?

[Dhilip kumar]

In round 1 yes! But not in the other rounds!

[Pranav Karawale]

Could you please tell me about what to pursue as formal education because I am in 11th and I too want to pursue web development in the future. BTW I liked your article and experience :) !!

[Dhilip kumar]

Pursuing BE in Computer science and engineering gave me a better understanding about computer software, its internals and mainly data structures & algo. If you want to pursue formal education + web you could do the same! However there are people who are not even attending colleges and getting enough knowledge abt web through bootcamps and their own projects and are getting placed in MNCs.

[Pranav Karawale]

Thank you Dhilip!! I was in a big confusion about this but finally you helped me!! :)

[vijayprwyd]

Thanks very much for sharing the questions . Just a doubt , Is round 4 Problem 2 a backtracking problem ? Can't we solve it with 2 loops ( one iterating each element of dictionary until a match is found and the inner one for comparing string and dictionary element ) and use 2 pointer here ? Are there any optimised solutions ?

[Jane Tracy 👩🏽‍💻]

All the best. You got this!!!!