DP World Frontend Interview Experience — Offer Declined 🚀
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
}
Other questions included:
- Building a Progress Bar component with Start, Stop, Pause, and Reset buttons.
- Closures in JavaScript and their usefulness.
- JavaScript's single-threaded nature and its browser behavior.
- Features other languages possess that JavaScript lacks.
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;
}
Other topics discussed included:
- URL Shortener Design and frontend handling of redirections (301, 404).
- Performance Metrics: CLS, LCP, async-defer handling.
- Handling disagreements with a manager.
- Experiences with team conflicts and their resolution.
- Reasons for interest in DP World and reasons for leaving Cars24.
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.
The candidate also suggested that long-term internships, where the intern performed similar tasks to full-time developers, should be considered as full-time experience.
Original Source
This experience was originally published on medium. Support the author by visiting the original post.
Read on medium