H&M India Frontend Engineer Interview: Rounds, Questions and Preparation

What the job involves

A Frontend Engineer in e-commerce, retail, and D2C builds and maintains the customer-facing web interfaces that drive online sales, such as product listing pages, product detail pages, shopping carts, and checkout flows. Day to day involves writing clean HTML, CSS, and JavaScript, collaborating with designers and backend engineers, and optimising for speed, accessibility, and mobile responsiveness. At a company like H&M India, you would work on high-traffic pages where performance and seamless user experience directly impact conversion rates.

Role and Technical Knowledge

1. 1

   How would you ensure a product listing page loads quickly even with hundreds of product images?

   Discuss lazy loading, responsive images with srcset, using CDNs, and optimising image formats like WebP. Mention measuring performance with Lighthouse.

2. 2

   Explain the difference between server-side rendering (SSR) and client-side rendering (CSR) in the context of an e-commerce site.

   Cover SEO benefits of SSR for product pages, faster first paint, and when CSR is suitable for interactive elements like filters. Relate to frameworks like Next.js or Nuxt.

3. 3

   What are some key accessibility considerations for a checkout form?

   Mention proper labels, ARIA attributes, keyboard navigation, error handling with clear messages, and sufficient colour contrast. Reference WCAG guidelines.

4. 4

   How would you handle state management for a shopping cart in a React application?

   Discuss local state vs. global state (Context API, Redux, Zustand), persisting cart data in localStorage, and syncing with backend on login.

Practical Scenarios

1. 5

   You are asked to build a size selector for a clothing product page. How would you approach it?

   Outline fetching available sizes, disabling out-of-stock sizes, updating the UI on selection, and ensuring it works on mobile. Mention handling edge cases like no size selected.

2. 6

   A user reports that the 'Add to Cart' button sometimes does not work on older Android phones. How would you debug this?

   Suggest checking browser compatibility, event listeners, and touch events. Use remote debugging, test on real devices, and consider polyfills or alternative event handling.

3. 7

   How would you implement a promotional banner that appears only for first-time visitors and can be dismissed?

   Use localStorage or cookies to track visits, conditionally render the banner, and store dismissal state. Discuss cookie consent and GDPR implications.

4. 8

   You need to integrate a third-party payment gateway on the checkout page. What steps would you take?

   Mention reading API docs, handling tokenisation securely, testing in sandbox, managing loading and error states, and ensuring PCI compliance awareness.

Behavioural and HR

1. 9

   Tell me about a time you had to meet a tight deadline for a project. How did you manage it?

   Use STAR method: describe the project, prioritised tasks, communicated with team, and delivered on time. Highlight learning from the experience.

2. 10

   Why do you want to work as a frontend engineer in the e-commerce and retail sector?

   Show passion for user experience, interest in how small UI changes impact sales, and awareness of trends like mobile shopping and personalisation.

3. 11

   Describe a situation where you disagreed with a teammate's technical approach. How did you handle it?

   Focus on respectful communication, data-driven discussion, and willingness to compromise. Emphasise team success over personal preference.

4. 12

   How do you keep your frontend skills up to date?

   Mention following blogs, taking courses, contributing to open source, and experimenting with new tools. Relate to e-commerce trends like PWAs and voice search.

Coding and Problem Solving

1. 13

   Write a function that takes an array of product objects and returns only those that are in stock and under a given price.

   Use filter with conditions, handle edge cases like empty array, and write clean, readable code. Discuss time complexity.

2. 14

   Given a string representing a product SKU, check if it is valid according to a pattern (e.g., two letters, four digits, two letters).

   Use regular expressions, explain the pattern, and test with examples. Mention how to handle invalid inputs gracefully.

3. 15

   Implement a simple debounce function and explain where you would use it on an e-commerce site.

   Write a debounce that delays invocation, and mention use cases like search autocomplete or resize events. Discuss immediate vs. trailing options.

4. 16

   How would you find and fix a memory leak in a single-page e-commerce application?

   Discuss using browser dev tools, identifying detached DOM nodes, removing event listeners, and avoiding global variables. Mention profiling tools.