🚀 My DP World Frontend Engineer Interview Experience (2025) | Sofware Development Engineer 1

Hey folks! 👋
I recently interviewed at DP World for a Frontend Engineer (SDE-1) role, and I wanted to share my complete experience — from DSA and React to Machine Coding and System Design. If you're preparing for frontend interviews, this could really help! 💡

🏃‍♂️ Round 1: DSA & Problem Solving (60 mins)

📋 Format

• Two coding problems on a shared Google Doc
• One open‑ended discussion on JavaScript and web fundamentals

💡 Challenge 1: Flatten a Nested Object

Problem: Given a deep object, produce a flat key-value map with dot‑notation keys.

// Sample user object with nested properties 🧑‍💻
let user = {
  name: 'John', // User's name 👤
  address: {
    country: 'India', // User's country 🇮🇳
    state: 'India', // User's state 🏞
    education: {
      school: 'APS', // User's school 🏫
      year: 2021 // Year of education 📅
    }
  }
};

// Function to flatten a nested object into a single key-value pair 🔑
function flattenObject(obj = {}, parentKey = '') {
  // Using reduce to iterate over the object keys 📍
  return Object.keys(obj).reduce((acc, key) => {
    // Create a new key by combining parentKey with the current key 📌
    const newKey = parentKey ? `${parentKey}.${key}` : key;

    // If the value is a non-null object, recurse 🔄
    if (typeof obj[key] === 'object' && obj[key] !== null) {
      // Recursively flatten the nested object 🌀
      Object.assign(acc, flattenObject(obj[key], newKey));
    } else {
      // If it's a simple value, add it to the accumulator 📥
      acc[newKey] = obj[key];
    }

    // Return the accumulator after each iteration 📈
    return acc;
  }, {}); // Start with an empty accumulator 🧳
}

// Usage: Flatten the nested 'user' object and pass 'user' as the parent key 📜
console.log(flattenObject(user, 'user'));

🔍 Explanation & Tips

• Recursion is your friend for unknown depths.
• Guard against null (since typeof null === 'object').
• reduce() + Object.assign() offers an elegant functional style.
• Tip: Always visualize a small example on paper before coding.

💡 JavaScript Note:

Type Checks — use Array.isArray(val) if you only want to flatten arrays, or val !== null && typeof val === 'object' for objects.

💡 Challenge 2: Build a Progress Bar Component

Task: In vanilla JS (or React), create a progress bar with Start, Pause, Resume, and Reset controls.

Key Considerations

• State management of progress value (0–100%).
• Timers: setInterval vs requestAnimationFrame.
• Edge Cases: Pausing near completion, resetting mid‑animation.

🤔 Discussion Questions

• Closures in JS: How inner functions remember outer variables.
• Single Threaded Model: How the event loop, call stack, task queue, and microtasks work.
• Missing Features: Compare JS to languages with true multi‑threading or pattern matching.

Interview Tip: When asked broad topics, give a concise definition, then a real‑world use case (e.g., closure for memoization or private state).

⚛️ Round 2: React & Machine Coding (90 mins)

📋 Format

• Short React questions on hooks & lifecycle
• Live coding of a reusable component
• Performance deep‑dive
• Interviewer: DP World React Lead

🛠️ React Q&A

1. Which React version & new hooks?

• I’m on React 18: useTransition, useDeferredValue, Concurrent Mode APIs.

2. Fixing unwanted re‑renders

• Problem: useEffect firing incessantly.
• Solution: Add key prop on dynamic lists or use dependency arrays carefully.

🔧 Machine Coding: Breadcrumb Component

Task: Build a <Breadcrumb /> that takes a nested object like a folder tree and renders clickable path segments.

Outline:

1. Props: items = [{ label, path }, …]
2. Render: Map over items with key={path} and use CSS for separators (>).
3. Accessibility: aria‑current="page" for the last item.

// Breadcrumb component to render a navigation trail of links 📍
function Breadcrumb({ items }) {
  return (
    // Main navigation container with 'aria-label' for accessibility 🧑‍💻
    <nav aria-label="breadcrumb">
      {/* Ordered list to display breadcrumb items */}
      <ol className="breadcrumb">
        {/* Loop through each item in the 'items' array */}
        {items.map((item, idx) => (
          <li
            // Unique key for each breadcrumb item, using 'path' to avoid duplicates 🔑
            key={item.path}
            // Conditionally apply the 'active' class to the last item (current page)
            className={`breadcrumb-item ${idx === items.length - 1 ? 'active' : ''}`}
            // Add 'aria-current' to the last item for accessibility
            aria-current={idx === items.length - 1 ? 'page' : undefined}
          >
            {/* If it's the last breadcrumb, don't make it a link */}
            {idx === items.length - 1 ? (
              // Display label for the last breadcrumb (current page)
              item.label
            ) : (
              // If it's not the last breadcrumb, make it a clickable link
              <a href={item.path}>{item.label}</a>
            )}
          </li>
        ))}
      </ol>
    </nav>
  );
}

💡Key Concepts:

• Accessibility: We add aria-label="breadcrumb" to the nav element and aria-current="page" to the last item. These attributes ensure that screen readers can correctly identify the breadcrumb navigation for users with disabilities. 🦻
• Dynamic List Rendering: We're dynamically rendering each breadcrumb item with map(), and conditionally adding the active class to the last item. This makes the last breadcrumb appear differently (without being a clickable link). 🔄
• idx === items.length - 1: This condition checks if the current item is the last item in the array. If it is, we don't wrap it in a link. This is commonly used to highlight the current page in the breadcrumb. 🔚
• Key Prop: The key prop (here, item.path) is crucial in React for optimizing performance when rendering lists of elements. It helps React identify which items have changed, added, or removed. 🔑

👩‍💻 React Performance Tips

• Wrap heavy children in React.memo.
• Use useMemo for expensive computations.
• Debounce search/filter inputs with useCallback and setTimeout.

🌐 SSR vs CSR

• CSR (Client‑Side Rendering): initial load slower, then fast interactivity.
• SSR (Server‑Side Rendering): faster First Contentful Paint, better SEO, but requires hydration overhead.

Tip: Know frameworks like Next.js/Remix for hybrid SSR/CSR strategies.

🧱 Round 3: Frontend System Design (60 mins)

📋 Task: Design a Versatile Button Component

Build a <Button> supporting variants, loading and disabled states.

// 🔘 Define button variants for consistent styling
const VARIANT = {
  PRIMARY: 'primary',     // ✅ Primary action button
  SECONDARY: 'secondary'  // ⚪ Secondary/alternative action
};

/**
 * Button component with loading & disabled states, plus variant styles.
 *
 * @param {string} text       – Button label (default: 'Click') 🏷️
 * @param {Function} onClick  – Click handler function 🔥
 * @param {boolean} isLoading – Show spinner when true ⏳
 * @param {boolean} disabled  – Disable button when true 🚫
 * @param {string} variant    – One of VARIANT.PRIMARY or VARIANT.SECONDARY 🎨
 */
function Button({
  text = 'Click',
  onClick = () => {},     // No-op by default
  isLoading = false,
  disabled = false,
  variant = VARIANT.PRIMARY
}) {
  return (
    <button
      // Apply variant class for styling, e.g. 'btn btn-primary' or 'btn btn-secondary'
      className={`btn btn-${variant}`}  
      // Disable button if loading or explicitly disabled
      disabled={disabled || isLoading}  
      // Trigger onClick when not disabled/loading
      onClick={onClick}               
    >
      {isLoading 
        ? <Spinner />   // 🔄 Show spinner while loading
        : text          // 📄 Otherwise show button text
      }
    </button>
  );
}

🎨 CSS (or CSS‑in‑JS):

.btn-primary { background: white; color: black; }
.btn-secondary { background: black; color: white; }

✨ Key Highlights & Tips

• Variant Styling 🎨
  Use a constant (VARIANT) to avoid typos and keep CSS classes consistent.
• Loading State ⏳
  When isLoading is true, render a <Spinner /> (or any loader) instead of text to indicate progress.
• Disabled Logic 🚫
  Combine disabled and isLoading to prevent clicks during async operations.
• Default Props 🔧
  Providing defaults (text, onClick) ensures the component never breaks if a prop is omitted.
• Accessibility 👍
  Disabled buttons are automatically keyboard‑unreachable and screen‑reader friendly.

🔄 Other Design Topics

• URL Shortener Flow: frontend handles short URL entry, 301 redirect logic, 404 fallback.
• Performance Metrics: Optimizing CLS, LCP, FCP via lazy loading, image optimization, code splitting.
• Conflict Resolution: Describe a time you disagreed with a manager and found common ground.
• Cultural Fit: Why DP World’s values resonate with you and your career goals.

Preparation Tip: Sketch diagrams on paper or whiteboard, talk through your component hierarchy, data flow, and caching strategy.

📦 Offer Details & Decision

I received this SDE‑1 offer 🎉… and then declined it. Here’s why:

❌ Why I Declined?

Despite 2 yrs 10 mos of experience, DP World’s policy requires 3 yrs for an SDE‑II position—my real target role. Waiting just 2 more months would’ve unlocked SDE‑II. ⏳

Insight:
● Long‑term internships (with PPOs) often count as full experience in product companies—why not here?
● Early clarity on experience requirements would save everyone’s time.

Hey there from LearnYard! 👋

Glad to see you exploring the free content from our course! We’ve shared 10 valuable articles at no cost to help you get a real feel of what’s inside.

If you’ve found these helpful, we’d love to know! 💬
Share your thoughts or key takeaways on LinkedIn, Twitter, or Instagram — and don’t forget to tag Gourav Hammad & Mohammad Fraz. We’ll personally respond to your post!

Thanks for being part of the LearnYard journey. Keep learning, keep growing! 🚀

Loved the free content? Want access to the full course — for free? 💸

Here’s how: share the course with your friends using your affiliate link (you’ll find it on your profile or home page), and earn 20% commission on each sale.

Just 4–5 sales and you’ll recover the full course price of ₹999/- 🔁
So why wait? Start sharing, start earning, and unlock the rest of the course effortlessly! 🛠️📈

💡 Final Reflections & Tips

1. Clarify Expectations Early: Always confirm experience cutoffs and role levels in Round 1.
2. Master JavaScript Fundamentals: Closures, prototypes, async/await, event loop.
3. Build Reusable Components: Embrace prop‑drilling solutions, context, or state managers where needed.
4. Performance is Key: Know how to measure and optimize Core Web Vitals.
5. Soft Skills Matter: Communication, conflict resolution, and ownership are as crucial as coding.

💡 Tips to Crack the DP World Frontend Interview

1. Understand the Role & Tech Stack
   Research DP World’s platforms (Next.js, React 18, TypeScript) and tailor your examples to similar projects.
2. Master Core JavaScript
   Be fluent in closures, prototypes, async/await, event loop, and memoization—expect deep‑dive questions.
3. Practice DSA Thoroughly
   Solve recursion, BFS/DFS, and matrix‑spread problems (e.g. “zombie infection”) on CodeSignal or LeetCode under time constraints.
4. Build Reusable React Components
   Show how you use Hooks (useEffect, useMemo, useCallback), React.memo, and prop‑drilling alternatives (Context, Redux).
5. Optimize for Performance
   Be ready to discuss Core Web Vitals (LCP, CLS), lazy loading, code‑splitting, caching, and SSR vs CSR trade‑offs.
6. Design with Scale in Mind
   Sketch UI component architectures (e.g. Button, Breadcrumb), logging/analytics layers, and API‑interaction flows.
7. Prepare Behavioral Stories
   Use the STAR method for teamwork, conflict resolution, and handling tight deadlines.
8. Clarify Requirements Early
   Confirm experience expectations, role level (SDE‑I vs SDE‑II), and process timeline up front to avoid surprises.

📚 Recommended Topics to Prepare

• Data Structures & Algorithms: Recursion, BFS/DFS, priority queues, hash maps.
• Advanced JavaScript: Closures, prototypes, deep vs shallow clones, memoization patterns.
• React & Frontend Architecture: Hooks lifecycle, error boundaries, Context vs Redux, SSR/CSR, Suspense.
• Performance Optimization: Core Web Vitals, lazy loading, code splitting, network throttling, caching strategies.
• System Design: Component folder structures, pluggable logging/analytics services, URL‑shortener flow, real‑time updates with WebSockets.
• Testing & Debugging: Unit tests with Jest/React Testing Library, Chrome DevTools profiling, linting & type safety (ESLint, TypeScript).
• Soft Skills: STAR storytelling, cross‑team collaboration, conflict resolution, stakeholder communication.

📢 Hashtags for Visibility

#DPWorldInterview #FrontendEngineer #ReactJS #JavaScriptDeveloper #SystemDesign #FrontendInterview #TechInterviews #WebDevelopment #DPWorldCareers #WomenInTech #NextJS #CSSAnimations #DSAforFrontend #InterviewTips #SoftwareEngineerLife #TechHiring #CodeNewbie #FrontendMasters #JSInterviewPrep #MachineCodingRound #LearnYard