Role: Senior Frontend Engineer

Designation: Senior Software Engineer

Location: Berlin, Germany

Interview Mode: Online

Result: Selected

Online Coding Test

The coding test was on Codility. The problem statement was pretty straightforward. It was a take-home test for 3 hours.

Question: React-Node-based application to design a search box with auto-suggestion list on every keystroke.

I implemented it with React and Node and added the required test cases.

The solution was accepted. In my opinion, a few things that we should care about while submitting a solution like this include:

• Implementing basic required features
• Writing better Unit Tests (add multiple scenarios)
• Writing better comments in code for each function and complex logic
• Using meaningful variable names (do not use foo, bar, etc.)
• Implementing techniques for better performance (used debouncing in keystroke event)

Always keep in mind, when the problem is complex in nature, it means evaluating your problem-solving skill and abilities to break down big problems into small ones and then solve them. When the problem is straightforward and easy to implement, it means they want to know how beautifully and perfectly you can solve the problem, because they are aware that this problem can be solved by a lot of candidates.

// Example implementation of a debouncing function in JavaScript
function debounce(func, wait) {
    let timeout;
    return function(...args) {
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(this, args), wait);
    };
}

// Usage of debounce in a React component
import React, { useState, useEffect } from 'react';

const SearchBox = () => {
    const [query, setQuery] = useState('');
    const [suggestions, setSuggestions] = useState([]);

    useEffect(() => {
        const fetchSuggestions = debounce(async (query) => {
            // Fetch suggestions from API
            const response = await fetch(`api/suggestions?query=${query}`);
            const result = await response.json();
            setSuggestions(result);
        }, 300);

        if (query) {
            fetchSuggestions(query);
        }
    }, [query]);

    return (
        <div>
            <input 
                type="text" 
                value={query} 
                onChange={(e) => setQuery(e.target.value)} 
                placeholder="Search..." 
            />
            <ul>
                {suggestions.map((suggestion, index) => (
                    <li key={index}>{suggestion}</li>
                ))}
            </ul>
        </div>
    );
};

export default SearchBox;

Solution Discussion | Round 1 (45 Min)

In this round, a senior software engineer was taking my interview. It was pretty easygoing; he made me comfortable by asking general questions about the day and slowly started to deep dive into the code that I had submitted in the coding challenge.

The main purpose of this interview was to understand my ability to explain the code that I wrote. Some of the questions were:

• What will happen if we removed imports?
• How can you optimize the application further?
• Can you write your own debouncing method?

This round was mainly for evaluating that I had submitted the code and that I know how things work in React.

JavaScript Technical Interview (1 Hour)

In this round, two senior frontend engineers were taking my interview. It was purely JavaScript-focused. They covered topics from ES6 features to JavaScript execution, event loop, and more.

Topics covered:

• DOM Tree, DOM Parsing (with async, defer), CSSOM, FCP (First Contentful Paint), Time to Interaction, rendering time, server-side rendering, non-blocking and blocking loading
• CSS Specificity, HTML5 semantic elements, Web Accessibility (roles, alt, aria-hidden, aria-labelledby, aria-describedby), reading with screen reader like VoiceOver, sprite vs. SVG
• JavaScript types, functions, objects, prototyping
• ES6 features like map, object destructuring, filters, array.some
• Builder Pattern, SOLID principles
• Request header, cookies, clickjacking, Cross-Site Scripting (XSS)
• Webpack, minification, and bundling, bundle optimization

Apart from JavaScript, some questions were also on:

• Dockerization
• CI/CD Pipeline
• Automated Testing
• Git Hooks

This round was mainly to evaluate my experience and expertise in these topics.

System Design (1 Hour)

This round was scenario-based. A Senior Principal Engineer was taking this round. I was given a scenario that uses a load balancer for HTTP requests and how we can optimize the database read-write operation in the same system.

This was mainly a discussion and drawing of the system architecture. For database read-write operation performance optimization, I represented something like this:

This was mainly to evaluate my understanding of the complete system (including server, loading, database) and common solution approaches to load balancing, database operation, etc.

Discussion with Engineering Manager (45 min)

As you all know, this is not a technical discussion. The discussion with the Engineering Manager was mainly to understand my personality and teamwork capabilities. Some interesting questions included:

• What will you do immediately if your code breaks the production system?
• What will you do if you are not feeling motivated to work?
• How will you resolve team conflicts?
• What is your idea about leading a team?
• Are you comfortable working in a cross-functional team?

It was a very long day and these interviews back-to-back were intense. But I appreciate each interviewer from Zalando; they made me very comfortable. My overall experience was great. 😊

I got my result after 2 weeks of interviews. It was a tough waiting time for me, but everything paid off in the end.