My Veeam SDE-2 Frontend Interview Experience — [29LPA]

Overview

The candidate applied for a Senior Frontend Engineer position at Veeam via LinkedIn. The interview process was structured into four distinct rounds, designed to assess the candidate's technical proficiency and problem-solving capabilities in frontend development.

Interview Rounds

Round 1: Online Assessment (OA)

The online assessment comprised two sections:

• Section 1: Multiple-choice questions covering HTML, CSS, and JavaScript fundamentals.
• Section 2: A JavaScript coding challenge focused on implementing a tennis score calculator.

Example questions included:

1. CSS background color precedence.
2. HTML tag for emphasized text with strong importance.
3. JavaScript variable hoisting.
4. Coding problem: Tennis Score Calculator. The candidate was tasked with creating a function to determine the winner based on an array of points, accounting for deuce and advantage scenarios.

/**
Implement a JavaScript function that takes an array of strings representing the winner of each point in a tennis match and returns the final result of the game.

The tennis scoring rules are as follows:
A player scores in the order: 0 → 15 → 30 → 40.
If both players reach 40, the game is in DEUCE.
From DEUCE, a player must win two consecutive points:
First point gives ADVANTAGE to that player.
Second point after advantage results in WIN.
If the opponent scores during advantage, the score goes back to DEUCE.

The function should return:
"Player 1 wins" if player 1 wins
"Player 2 wins" if player 2 wins


Input
points: An array of strings, each being either "p1" or "p2" representing the winner of each point.

Output
A string indicating the match result as described above.

Example 1:
Input = ['p1', 'p1', 'p2', 'p1', 'p1']
Output = "Player 1 wins"

Input = ['p1', 'p1', 'p1', 'p2', 'p2', 'p2', 'p1', 'p2']
Output = "DEUCE"
*/

function getMatchResult(points) {
  // Your code
}

Round 2: HR Screening

This round is not detailed in the provided content.

Round 3: Technical 1 (CoderPad + Debugging)

An interviewer with over 10 years of experience revisited the multiple-choice questions and the coding problem from the online assessment. The interviewer identified that the initial coding submission failed some hidden test cases. The round focused on debugging and refining the tennis score logic until all test cases passed.

Round 4: Technical 2 (Deep Dive)

This round involved a deep dive into frontend concepts. The interviewer, with approximately 4 years of experience, covered a range of topics, including:

1. The sequence of events when a URL is entered in a browser.
2. Event propagation (capturing vs. bubbling), stopPropagation() vs. stopImmediatePropagation().
3. Output-based JavaScript questions related to event listeners and the event loop.

const button = document.createElement("button");
const parent = document.createElement("div");
parent.appendChild(button);
document.body.appendChild(parent);

button.addEventListener("click", (e) => {
  e.stopImmediatePropagation();
  console.log("Button is clicked");
});
button.addEventListener("click", (e) =>
  console.log("2nd Click event triggered")
);
button.addEventListener("mouseenter", (e) =>
  console.log("Mouse Enter is triggered")
);
parent.addEventListener("click", (e) => console.log("Parent is clicked"));
document.body.addEventListener("click", (e) => console.log("Body is clicked"));

const mouseEnterEvent = new Event("mouseenter", {
  bubbles: true,
});

button.click();
button.dispatchEvent(mouseEnterEvent);

4. React Hooks: useTransition() vs. useDeferredValue().
5. JavaScript output-based questions related to setTimeout() and Promises.

console.log('1');
setTimeout(() => console.log('2'), 0);
Promise.resolve().then(() => console.log('3'));
console.log('4');

const promise = Promise.resolve();
console.log("one");
setTimeout(() => console.log("two"), 0);
promise.then(() => console.log("three"));
(async () => {
  console.log("four");
  await promise;
  console.log("five");
})();
console.log("six");

6. Passing a function to initialState in useState and the difference between passing a value versus a function.

const [count, setCount] = useState <number>(0);

useEffect(() => {
  setCount((prevCount) => prevCount + 1);
}, []);

7. Debugging a JavaScript issue with button.click().

const button = document.createElement("button");
button.click = () => {};
document.body.appendChild(button);
button.addEventListener("click", () => {
  console.log("should be triggered");
});

button.click(); // Ooops... Not working why? 

// Fix this by writing additional lines of code here

8. Scoping the type of a generic to string | number in TypeScript.

type FooFunc = <B>(bar: B) => B;

let f: FooFunc = (bar) => bar;
let response = f(true);
console.log(response);


// Answer
type FooFunc = <B extends string | number>(bar: B) => B;

Key Takeaways

While the candidate performed well in the coding and initial technical round, they were ultimately rejected. The rejection stemmed from a lack of confidence in answering questions related to React hooks (useTransition() vs. useDeferredValue()), TypeScript generics, and event propagation (stopPropagation() vs. stopImmediatePropagation()). This highlights the importance of maintaining a strong understanding of advanced frontend concepts, even those not frequently used in daily tasks, particularly for senior roles.