DP World Frontend Interview Experience — Offer Declined 🚀 | Frontend Junction

Overview

This document outlines a frontend engineer's interview journey with DP World. The evaluation process included assessments of the candidate's abilities in data structures and algorithms (DSA), React development, and system design. The experience provides insights into the skills and knowledge sought by DP World for a Frontend Engineer role.

Interview Rounds

The interview process comprised three main rounds:

Round 1: DSA + Problem Solving

This round focused on the candidate's proficiency in data structures and algorithms, as well as their problem-solving skills. The candidate faced a coding challenge requiring the flattening of a nested JavaScript object. The task involved transforming the object into a key-value pair format. An example solution was provided:

let user = {
 name: 'John',
 address: {
 country: 'India',
 state: 'India',
 education: {
 school: "APS",
 year: 2021
 }
 }
};

function flattenObject(obj = {}, parentKey = '') {
 return Object.keys(obj).reduce((acc, key) => {
 let updatedKey = parentKey ? `${parentKey}.${key}` : key;
 if (typeof obj[key] === 'object' && obj[key] !== null) {
 Object.assign(acc, flattenObject(obj[key], updatedKey));
 } else {
 acc[updatedKey] = obj[key];
 }
 return acc;
 }, {});
}

let result = flattenObject(user, 'user');
console.log(result);

Expected Output:

{
 'user.name': 'John',
 'user.address.country': 'India',
 'user.address.state': 'India',
 'user.address.education.school': 'APS',
 'user.address.education.year': 2021
}

Round 2: React + Machine Coding

This round assessed the candidate's React skills and their ability to implement components. Questions covered React versions, new hooks, and approaches to solving common React problems. A machine coding challenge required the implementation of a Breadcrumb Component for nested objects, similar to a folder structure.

Key areas explored:

React version and new hooks introduced.
Problem-solving React re-render issues with useEffect using the key prop.
Machine coding implementation of a Breadcrumb Component.
SSR vs CSR and the impact of Server-Side Rendering (SSR) on performance.
Performance optimization techniques for React re-renders, caching, and memory management.
Async vs Defer and their effects on script loading and execution.

Round 3: System Design

This round focused on system design principles and the candidate's ability to design components. The candidate was tasked with designing a Button component.

The provided code snippet demonstrates a basic Button component:

const VARIANT = {
 PRIMARY: 'PRIMARY',
 SECONDARY: 'SECONDARY'
};

const Button = ({ 
 text = '', 
 onClickHandler = () => {}, 
 isLoading = false, 
 isDisabled = false, 
 variant = VARIANT.PRIMARY 
}) => {

 return (
 <button
 className={`button ${variant}`}
 disabled={isDisabled || isLoading}
 onClick={onClickHandler}
 >
 {text}
 </button>
 );
};

CSS Styles:

.button.PRIMARY {
 color: black;
 background: white;
}
.button.SECONDARY {
 color: white;
 background: black;
}

Key Takeaways

The candidate received an offer for the Software Development Engineer I (SDE-1) role, with a total compensation of ₹41LPA in the first year. However, the offer was declined because DP World required three full years of experience for an SDE-2 position, which the candidate was aiming for. The candidate had 2 years and 10 months of experience.