JioMart Frontend Engineer Interview: Rounds, Questions and Preparation

What the job involves

A Frontend Engineer at an e-commerce or D2C company like JioMart builds and maintains the customer-facing web interfaces for browsing products, adding to cart, checking out, and tracking orders. Day to day, you work with designers and backend engineers to turn UI mockups into responsive, fast-loading pages that handle high traffic during sales. You also fix bugs, improve page performance, and ensure the site works smoothly on low-end phones and slow networks common in India.

Role and E-commerce Frontend Knowledge

1. 1

   What is the difference between a product listing page and a product detail page from a frontend perspective?

   Explain that listing pages need fast rendering of many items with filters and pagination, while detail pages need rich media, reviews, and add-to-cart state. Mention performance and SEO differences.

2. 2

   How would you optimise a product image gallery for users on 3G networks?

   Cover lazy loading, responsive images with srcset, WebP format, low-quality placeholders, and CDN usage. Show awareness of Indian network conditions.

3. 3

   What is the role of a service worker in an e-commerce PWA?

   Mention offline caching of static assets, faster repeat visits, and background sync for cart updates. Relate to improving conversion on flaky connections.

4. 4

   How do you handle currency formatting and price display for Indian users?

   Use Intl.NumberFormat with locale 'en-IN', show MRP, discount, and final price clearly. Avoid layout shifts when prices change.

Technical Fundamentals and Coding

1. 5

   Explain event delegation and how you would use it for a list of product cards with 'Add to Cart' buttons.

   Describe attaching one listener to the parent container, using event.target and closest() to find the button. This reduces memory and works for dynamically added items.

2. 6

   What is the difference between var, let, and const in JavaScript?

   Cover function vs block scope, hoisting, temporal dead zone, and reassignment rules. Give a short example of a loop with closures.

3. 7

   How does React's virtual DOM help in a high-traffic e-commerce site?

   Explain diffing and batched updates that minimise direct DOM manipulation. Mention keys in lists and avoiding unnecessary re-renders with memo or useCallback.

4. 8

   Write a function to debounce a search input for product suggestions.

   Show a clear implementation with setTimeout and clearTimeout. Explain why debouncing reduces API calls and improves performance.

Practical Scenarios and Problem Solving

1. 9

   A user reports that the 'Place Order' button does not work on their phone. How do you debug it?

   Walk through checking browser console, network tab, device emulation, and possible touch event issues. Mention testing on real low-end Android devices.

2. 10

   How would you implement a 'Recently Viewed Products' section that persists across sessions?

   Use localStorage or sessionStorage to store product IDs, then fetch details from API. Discuss privacy and clearing old data.

3. 11

   During a big sale, your page becomes slow. What frontend changes can you make quickly?

   Prioritise critical CSS, defer non-essential scripts, compress images, and use skeleton loaders. Mention monitoring with Lighthouse and real user metrics.

4. 12

   How do you ensure your cart page works correctly when a user has multiple tabs open?

   Use localStorage events or a state management library with sync across tabs. Explain how to avoid race conditions when updating quantities.

Behavioural and HR Questions

1. 13

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

   Use STAR method: describe the project, the technology (e.g., React hooks), how you learned it, and the outcome. Show curiosity and self-learning.

2. 14

   Describe a situation where you disagreed with a teammate on a UI approach. How did you resolve it?

   Focus on listening, data (like performance metrics or user feedback), and compromise. Avoid blaming others.

3. 15

   Why do you want to work in e-commerce frontend rather than other domains?

   Connect personal interest in user experience, scale, and impact on millions of shoppers. Mention specific challenges like cart abandonment or mobile-first design.

4. 16

   How do you handle feedback on your code during a code review?

   Show openness, ask clarifying questions, and treat reviews as learning opportunities. Mention you separate ego from code and iterate quickly.