Noise Frontend Engineer Interview: Rounds, Questions and Preparation

What the job involves

A Frontend Engineer at an e-commerce, retail, or D2C company like Noise builds and maintains the customer-facing web storefront. Day to day you work with designers, backend engineers, and product managers to implement product listing pages, cart and checkout flows, and responsive UI components that load fast on Indian mobile networks. You also debug cross-browser issues, optimise page speed, and integrate with APIs for inventory, payments, and user accounts.

Role and Sector Knowledge

1. 1

   What do you understand about the day-to-day work of a frontend engineer in an e-commerce or D2C company?

   Mention building product pages, cart, checkout, integrating with payment gateways, and ensuring fast load times on mobile. Show awareness of Indian shoppers using low-end devices and slow networks.

2. 2

   How would you optimise a product listing page for a D2C brand that gets heavy traffic during a sale?

   Talk about lazy loading images, using CDNs, code splitting, caching, and reducing third-party scripts. Mention measuring with Lighthouse and prioritising above-the-fold content.

3. 3

   What frontend metrics matter most for an e-commerce site, and why?

   Focus on Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS) because they affect user experience and conversion. Relate them to cart abandonment and SEO.

4. 4

   How would you handle a situation where a design looks great on desktop but breaks on a budget Android phone?

   Explain mobile-first CSS, testing on real devices or emulators, using relative units, and flexible layouts. Mention using Chrome DevTools device toolbar and checking touch targets.

Technical Fundamentals

1. 5

   Explain the difference between let, const, and var in JavaScript, with an example relevant to a shopping cart.

   Cover block scoping, hoisting, and reassignment. Give a cart example where const is used for an array of items and let for a changing total.

2. 6

   How does the virtual DOM work in React, and why is it useful for a dynamic product page?

   Describe diffing and efficient updates. Relate it to frequent UI changes like updating cart count or filtering products without full page reloads.

3. 7

   What are the different ways to centre a div in CSS, and which one would you use for a modal on a product page?

   Mention Flexbox, Grid, and absolute positioning with transform. For a modal, Flexbox with justify-content and align-items is clean and responsive.

4. 8

   How do you manage state in a React e-commerce app with a cart, user login, and product filters?

   Discuss local state vs global state, using Context API or Redux for cart and auth, and keeping filters in URL params for shareability. Mention avoiding prop drilling.

Practical Scenarios

1. 9

   You need to build a reusable product card component that shows image, title, price, discount, and an add-to-cart button. How would you approach it?

   Talk about props for data, conditional rendering for discount, handling click events, and making it responsive. Mention accessibility like alt text and button labels.

2. 10

   A user reports that the checkout button does not work on Safari but works on Chrome. How do you debug this?

   Check console for errors, test on Safari, look for unsupported JavaScript features or CSS, and use polyfills if needed. Mention checking event handling and form validation differences.

3. 11

   How would you implement a search bar with autocomplete suggestions for products?

   Explain debouncing input, calling an API, displaying a dropdown, and handling keyboard navigation. Mention caching results and showing a loading state.

4. 12

   You are asked to reduce the bundle size of a React app by 30 percent. What steps would you take?

   Suggest code splitting with React.lazy, tree shaking, removing unused dependencies, compressing images, and using production builds. Mention analysing with Webpack Bundle Analyzer.

Behavioural and HR

1. 13

   Tell me about a time you had to learn a new frontend technology quickly for a project.

   Use STAR format. Highlight how you found resources, practised, and applied it. Show curiosity and ability to learn on the job.

2. 14

   Describe a situation where you disagreed with a designer or senior about a UI decision. How did you handle it?

   Show respect, data-driven reasoning, and willingness to compromise. Mention user impact and testing ideas rather than personal preference.

3. 15

   Why do you want to work in the e-commerce or D2C sector, and why this company?

   Connect personal interest in online shopping or D2C brands, mention the company's products or market position, and express eagerness to build customer-facing experiences.

4. 16

   How do you prioritise tasks when you have multiple deadlines, like fixing a bug and building a new feature?

   Talk about impact vs urgency, communicating with your manager, and using tools like Jira or Trello. Give an example of a time you managed both.