Frontend Interview Experience in Flipkart (UI 2)

Overview

This document details the interview process for a UI Engineer 2 (Senior Frontend Developer) position at Flipkart. The process consisted of multiple rounds, including machine coding, technical interviews, data structures and algorithms, a hiring manager round, and debugging challenges. The assessment focused on evaluating the candidate's proficiency in frontend technologies, problem-solving abilities, and architectural thinking.

Interview Rounds

Round 1: Machine Coding (Vanilla JS — Live Coding)

Candidates were tasked with building an eCommerce platform using vanilla JavaScript within a two-hour timeframe. The requirements included creating category and product lists, cards, rendering tabs, and implementing multiple wish lists with appropriate CSS styling.

Round 2: Machine Coding Review + Technical Concepts

This round involved a detailed code review of the solution developed in the previous round. The candidate was required to explain each line of code and justify their approach to specific implementation choices. Topics discussed included functional vs. class-based approaches, performance optimizations (structure, logic, DOM manipulations), debounce function implementation, pagination, infinite scrolling, virtualization, CSR vs. SSR, React vs. Next.js, React Hooks, and diffing algorithms.

Round 3: UI Technical Concepts

The candidate was presented with an unstable API (resolving in either 10ms or 1sec) and challenged to create a circuit breaker that waits for 300ms. If the API resolves within the timeframe, the data should be returned; otherwise, an error should be thrown or a retry mechanism implemented. Other topics included a polyfill for the reduce method, CSRF tokens, security vulnerabilities, cookies, auth tokens, garbage collection, WeakMap in JavaScript, hoisting, closures, Web Vitals, requestIdleCallback, prefetch, preconnect, preload, tree shaking, dynamic chunking, and breaking long tasks.

Round 4: Data Structures and Algorithms

• Question 1: Merge Intervals Variation
• Question 2: Character Array Compression (e.g., aabb -> a2b2)

Round 5: Hiring Manager Round

This round focused on assessing soft skills, leadership potential, product thinking, and long-term vision. Topics included:

• UI Library: Purpose, use cases, hosting details (public vs. private npm packages), and handling secrets/credentials in public packages.
• Design of a reusable and scalable input field.
• Metrics for tracking the success of a UI library.
• Design of a login system: From product requirement to production, including architectural decisions, scalability considerations, API flow, and change management.
• Server-side event storm handling: Short polling, WebSockets, and throttling.
• Web Vitals: CLS, LCP, INP, and TBT.
• Error logging and relevant metrics.
• Personal goals: Motivation for joining Flipkart, a five-year plan, daily agile routines, and positive/negative aspects of the current organization.

Round 6: Debugging and Problem Solving in React

The candidate was given a React component fetching data from a buggy API. The task involved identifying and resolving the bugs, then implementing new features in a product-oriented manner. Specific tasks included:

• Adding pagination and making it scalable for filtering and sorting.
• Implementing virtualization.
• Adding debounce.
• Using useMemo and useCallback.
• Adding Abort Controllers.
• Adding filtering and reducing re-renders.
• Discussing infinite scrolling and virtualization.
• Adding timeouts and intervals with pause/resume functionality for the API, along with debounce.
• Deep dive into how the web works, from DNS resolution to rendering.
• Explanation of the inner workings of the diffing algorithm.
• Discussion of async and defer attributes and their impact on script load order. The candidate was provided with multiple scripts having different timings and async/defer flags, and had to predict the order of execution.

Key Takeaways

The Flipkart interview process thoroughly evaluates a candidate's frontend engineering capabilities. It assesses deep knowledge of JavaScript fundamentals, web security, and authentication flows, as well as the ability to build real-world features and design reusable, scalable architectures. The emphasis is not only on writing code but also on building for scale, performance, and a positive user experience.