Recurly India Frontend Engineer Interview: Rounds, Questions and Preparation

What the job involves

Frontend engineers at global tech companies like Recurly India build and maintain user interfaces for web applications, often focusing on subscription management dashboards, billing portals, and customer-facing tools. They work with modern JavaScript frameworks, collaborate with designers and backend engineers, and ensure responsive, accessible, and performant experiences. Day to day involves writing reusable components, integrating APIs, debugging UI issues, and participating in code reviews.

Role and Technical Knowledge

1. 1

   What is the difference between controlled and uncontrolled components in React, and when would you use each?

   Explain that controlled components have their state managed by React via props and onChange, while uncontrolled use refs. Mention use cases like forms validation for controlled and simple file inputs for uncontrolled.

2. 2

   How does the virtual DOM work and why does it improve performance?

   Describe how React creates a lightweight copy of the real DOM, diffs it on state changes, and batches minimal updates. Highlight reduced direct DOM manipulation and efficient re-rendering.

3. 3

   Explain the concept of CSS specificity and how you would resolve a specificity conflict.

   Cover inline styles, IDs, classes, and elements in order of precedence. Suggest using more specific selectors, avoiding !important, or restructuring CSS with BEM or CSS modules.

4. 4

   What are some key considerations for making a web application accessible?

   Mention semantic HTML, ARIA roles, keyboard navigation, color contrast, and testing with screen readers. Emphasize that accessibility benefits all users and is often a legal requirement.

Practical Scenarios

1. 5

   You need to build a subscription plan selection page that fetches plans from an API and allows users to toggle between monthly and yearly billing. How would you approach this?

   Outline component structure, state for selected plan and billing cycle, API call with loading/error states, and conditional rendering of prices. Mention debouncing or caching if needed.

2. 6

   A user reports that the checkout page is slow to load on mobile devices. How would you diagnose and fix the issue?

   Suggest using Lighthouse, checking bundle size, lazy loading images, code splitting, and minimizing third-party scripts. Also consider network throttling and performance budgets.

3. 7

   How would you handle a situation where a backend API returns inconsistent data shapes for the same endpoint?

   Propose defensive coding with normalization, using TypeScript or PropTypes, and adding a transformation layer. Also mention communicating with backend to standardize responses.

4. 8

   You are asked to implement a dark mode toggle that persists across sessions. What steps would you take?

   Use CSS variables or a theme context, store preference in localStorage, and respect system preference via prefers-color-scheme. Ensure toggle updates all components without page reload.

Behavioural and HR

1. 9

   Tell me about a time you had to learn a new frontend technology quickly for a project. How did you go about it?

   Use STAR method: describe the project, the technology gap, your learning approach (docs, tutorials, small prototypes), and the successful outcome. Highlight adaptability.

2. 10

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

   Show respect, data-driven reasoning, and willingness to compromise. Emphasize user impact and team goals over personal preference.

3. 11

   Why do you want to work as a frontend engineer at a global tech company like Recurly India?

   Connect your interest in building user-centric subscription experiences, the company's scale, and your desire to learn from diverse teams. Avoid generic answers; mention specific products or values.

4. 12

   Where do you see yourself in three years, and how does this role fit into that plan?

   Show ambition to grow into a senior or lead frontend role, deepening expertise in performance, architecture, or mentoring. Align with the company's growth path.

Coding and Problem Solving

1. 13

   Write a function that takes an array of objects representing subscription plans and returns the total price for a given billing cycle.

   Clarify input format, handle edge cases like empty array or missing prices, and use reduce or map/filter. Discuss time complexity and possible optimizations.

2. 14

   Implement a debounce function in JavaScript and explain its use in a search input.

   Show a closure-based implementation with setTimeout and clearTimeout. Explain how it limits API calls and improves performance for user input.

3. 15

   Given a nested comment thread data structure, write a recursive component in React to render it.

   Define a Comment component that renders itself for each child. Discuss keys, performance with React.memo, and avoiding deep recursion limits.

4. 16

   How would you flatten a nested array in JavaScript without using Array.flat()?

   Use recursion or reduce with concat, or a stack-based iterative approach. Mention handling of non-array elements and potential stack overflow for deep nesting.