Prototypr Logo

How to Ace a UI Engineer Interview

I was recently interviewed at Flipkart, Paytm, RazorPay, PhonePe, BharatPe, and others. I received multiple offers (and a few rejections as well). Sharing a consolidated guide where I document everything.

As a UI/frontend Engineer, you have to keep up with a lot of things. This guide will enable you to link missing pieces in your equation, and hopefully, land you your dream job!

Prerequisite — Prepare a plan

I started my preparation journey without keeping a track of things 1.5 years ago. I was doing things all over the place. As you might imagine, things didn’t work out. It was time to prepare a strategy!

If you fail to plan, you plan to fail!

I documented my learnings on Notion

It was a game-changer. Everything you learn, topics you need to revisit, topics that are relatively hard, all under one roof as a Drag-Drop Kanban board.

UI Engineer prep resources - Kanban board on Notion
My Kanban on Notion

I am sharing the link of my Kanban Board. Feel free to create a copy of it, and customize it as per your needs.

Okay, but how to use it?

  • Document Everything!

Read an informative article? Embed it! Eureka moment? Note that down!

  • List down everything you already know.

For all the topics which you already understand, create cards for those.

  • Feel free to divide things into subtasks

If you feel the topic has too many things to cover in a single go, that is your hint to divide it into subtasks.

  • Assign a difficultly level based on your understanding of the topic

This will come in handy when it’s show-time and revision.

  • Don’t hesitate to keep expanding the scope.

For things, you don’t realize you don’t know.

  • Read interview experiences for preparing the list.

Confused about where to start? Read interview experiences online (from Leetcode discuss, Team Blind, Online blogs, GeeksForGeeks) to prepare a list of topics you need to study.

Don’t try to mug things up for the sake of the interviews. Enjoy the learning process & be consistent with your plan.

Execute your plan 🚀

Okay, now that you’re ready with a solid plan, It’s time for execution!

My 5 pillar approach to UI Engineering

  1. JavaScript (In-Depth)

  2. Data Structures and Algorithms

  3. Problem Solving

  4. Frontend frameworks & libraries

  5. UI Technologies & Challenges

I will touch on these topics in brief over here. All links and resources for a detailed plan can be found on my Notion.

1. JavaScript (In-Depth)

Human evolution banner (from ape to man in computer) with the word JS on top
Pic Courtesy: Victor

Goes without saying how important it is to know JavaScript. Here are some topics to know well:

  • Inheritance + Prototype Chain

  • Closures & Hoisting

  • Scope & Execution context

  • this Keyword

  • Functional Programming

  • Latest features: ES6, ES7, ES8, ES9, ES10, ES2020

  • Module Patterns — ES6/AMD/UMD/FESM

  • Object-Oriented Programming

  • Event Loop and how JS works under the hood

  • Event Delegation/Event Bubbling

  • Array, String, Object, Function, and Promise methods

  • and much more I forgot

Refer to the JavaScript module in my Notion board.

2. Data Structures and Algorithms

I always dreaded DSA back in college time. Questioned that why a Frontend Engineer needs to know all this. I started learning DSA back in 2019, with no intention to finish by any deadline. Had to revisit the same concepts multiple times.

Finally, a year ago, I decided to change this. Started learning from a DSA Udemy course. Began with easy questions on Hackerrank and Leetcode. Eventually gained confidence and started the Blind 75 & LC Interview series for learning problem-solving patterns. I quickly realized how much this has helped me in my day-to-day tasks as a Frontend Engineer.

How much PS/DSA for UI Engineers?

  • Linked Lists (SLL/DLL)

  • Strings / Arrays

  • Trees (BST)

  • Stack/Queues

  • Heap (Priority Queue)

  • Hash Maps

  • Graphs (Basic)

  • Dynamic Programming (Memoization)

For more insights, Refer to the DSA module in my Notion board.

3. Problem Solving

Frontend problem solving can be divided as follows:

  • Polyfill based problems

E.g: Write a polyfill for Array map/reduce/filter, Set, Map, Promise.all, Object.create, setInterval, EventEmitter, Observable, etc

  • DOM API related problems

E.g.: Traverse DOM level by level, Implement Virtual DOM like React, Write a basic Diffing algorithm, Find unique tags in a given DOM tree, DOM tree height, etc

  • Function-based problems

Lodash methods like .get, .set, _.cloneDeep, etc. Flattening a multi-dimensional array, Currying problems, Generic composition & pipes, debounce, throttling, etc..

BFE.dev reference

BFE.dev is a great resource for the above-mentioned problems. Also, you can find my solutions for all kinds of problems in my Notion BFE card.

4. Frontend frameworks and libraries

Angular, React, Vu logos
Pic courtesy: Vamshi

Frameworks and libraries can be very opinionated. I personally learned Angular (v2+, not v1) back in 2016 for a college project. I did multiple large-scale enterprise projects using the framework. Last year, I decided to jump on React train. If you’re well versed with how SPAs work, it’s easy to switch between the ecosystems. I like both Angular and React, and both can be useful in different use cases. But, that’s a topic for another day.

I would suggest picking one and learn in-depth. Question everything! How does routing actually work? What are EventEmitter/Observables? How to prevent re-renders in your app. Advantages of components? Or maybe, do you even need a framework/library for your project?

Since I was getting started with React a year ago, I have curated resources that I used to learn. Refer to React card on my Notion.

5. UI Technologies & Challenges

Once you’re well versed with JavaScript and a framework. It’s time to study more advanced concepts. Some topics you can find on my Notion:

  • Web Performance and JANK reduction (Very important skill)

  • Progressive Web Application (PWAs)

  • State management strategies — Redux, RxJS

  • Data flow — Flux architecture, 2-way data binding

  • Change detection/Reconciliation

  • Server-side rendering/Static site generation

  • Web security — XSS/CSRF/Clickjacking/Auth

  • Virtual Scroller

  • Infinite Scroller

  • JavaScript Proxy

  • Deployment strategy — CDN/Caching/HTTP2/SSL

  • Core Web Vitals

  • Symbols, Generators, and Iterators

  • Frontend System Design

Some UI challenges that I developed on Vanilla JS (Github link):

  • Calendar

  • Todo

  • Carousel

  • nth-level comment widget

  • Giphy search engine with the infinite scroller

  • Task tracker (kanban)

  • JS-only SPA like Routing

  • Email app (Gmail/Outlook)

  • Tic tac toe

1*DPTnJJWubT9m-3JwE2Iv9Q.jpeg

Usually, you might encounter these challenges in MC/OA rounds of interviews. Many companies recommend these to be developed without frameworks on Vanilla JS. Use of module bundlers is allowed so you can prepare scaffold beforehand. Split your code into an MVC pattern. Give yourself around 2–3 hours while developing these to mock the interview environment. More details on the Notion.

Bringing it all together — It’s Showtime!

A sample 5 week training plan could look something like this:

UI engineer interview preparation process
Can be repeated for multiple weeks until you’ve covered all the topics

Remember I told you, don’t study for the sake of interviews. Eventually, you will feel so confident about the topics that you can answer questions/write code right off the bat! Once you’ve gone through your Prep strategy at least once, all you have to do is to revise your weak areas before the interview.

You already know what you need to revise because everything is well documented. Notice how every card has a key for capturing ‘Last Read’.

This will help you pick the right cards before going through a loop.

PS: Don’t study new topics right before the interviews

My interview experiences

Interviews calendar
An onsite a day keeps nervousness away

Now the fun stuff! With all this preparation, it was time to attempt the interviews. As I mentioned, I won’t be sharing exact questions. You should be able to answer these if you’ve followed the prep guide.

1. Paytm

How did I apply- I contacted the recruiter.

The entire process took about 10 days. There were 4 rounds in total:

1. Online Assessment:

A Mettl test link was shared. There were around 20 questions in total:

  • One question for implementing IE compatible DOM APIs for a layout

  • 5–6 questions on AngularJS (Yes! Angular 1 😅)

  • 5–6 questions on React.

  • 7–8 JavaScript & HTML/CSS output based questions.

2. Problem-Solving round:

  • Questions about my Resume projects

  • Problem-solving question on Array/Hashmap

  • JS Concepts like Promises, async/await, event loop, call, bind

  • CSS basics and HTML semantics

  • Basic React questions

3. Data Structures round:

  • Questions about my recent project and why I used SSR/SSG approach

  • Output-based questions on type coercion, sparse arrays

  • Array data structure problem

  • Binary tree problem involving DFS

4. Hiring Manager round:

  • Questions about my Resume projects

  • Web security questions

  • Discussion on culture, roles, and responsibilities

2. Flipkart

How did I apply- I applied on the careers portal 2–3 months before getting a call.

The entire process took about 8 days. There were 4 rounds in total:

1. Machine Coding round:

  • Create an application based on a written problem statement.

  • API endpoints were provided

  • Vanilla HTML/CSS/JS was expected

  • I followed the ES6 module and MVC pattern

  • Webpack bundler was allowed, so prepare a scaffold beforehand

  • Finished a running code in about 1 hour 20 mins, we later discussed things I would improvise if I had more time.

  • We discussed about Intersection Observer and Symbols.

2. UI Tech round:

  • Questions about my Resume projects

  • A problem statement involving Recursion

  • An in-depth discussion on Web performance

  • Some JavaScript concepts

3. Problem-solving round (PS/DS)

  • A problem on linked lists (leetcode easy)

  • A problem related to array intervals

  • A problem related to strings

4. Hiring manager round

  • An in-depth discussion on my background and journey so far

  • In-depth analysis on my decisions and work on one of my projects

  • Pretty standard HM questions

3. BharatPe

How did I apply- I applied on their careers portal when I saw they’re offering BMW bikes and 1 month Dubai workation 😛

The entire process took about 10 days. There were 5 rounds in total:

1. Technical discussion with CTO:

  • About my journey, interests, and future plans

  • 1 question around a simple lodash helper method implementation

  • Discussion about BharatPe and future plans

2. UI Technologies

  • Questions about my Resume projects

  • React concepts like Pure Components, Reconciliation, Memoization, etc

  • JS questions on closures, event loop, Microtasks/Macrotasks

  • Service workers and web workers

  • Other basic frontend questions

3. Home Assignment

Take-home assignment to be made in under 48 hours. Use of frameworks was allowed, Bonus points for React, Good UI, and Optimised code. Since I already practiced UI challenges during my prep, I made my submission in 4 hours.

4. Technical Discussion:

  • Introduction and resume based questions

  • Code reviews and practices

  • Tech stack I use

5. Cultural Fitment round:

  • My Career aspirations

  • What is my plan for the next 5 years

  • Questions on my entrepreneurial gig

  • Basically checking if I am fit culturally

4. RazorPay

At this point, I was already holding the above offers. Had signed an offer with Flipkart. The entire process took 5 days, there were 4 rounds in total:

1. Tech Deep Dive

  • Fair discussion on my resume pointers

  • SSR/SSG and why did I use

  • An in-depth discussion on UI scenarios (React)

  • Redux v/s Context API

Expectations: Solid frontend career, React knowledge was a must

2. UI Challenge:

  • Create an application based on a written problem statement.

  • Use of React was recommended, I prepared a scaffold beforehand.

  • Styling wasn’t expected, I did basic styling and layout using Tailwind

  • Solved the problem using Intersection Observer and React Hooks

  • Finished a running code (with one bug) in about 1 hour 10 mins, we discussed the strategies to mitigate it.

3. Web fundamentals round:

  • An in-depth discussion on Cross-origin resource sharing

  • Scenario-based problems assessing my decision making

  • Open-ended conversation on Web performance and JANK reduction

  • Web security and vulnerability mitigation strategies

  • React v/s Angular — key differences, pros/cons

4. HM round

I was ghosted for a while, One of those days when I did not perform well so I didn’t contact either. The above rounds were the learning experience I was looking for.

5. PhonePe

The entire process took about 1 month, I had applied 3–4 months before actually receiving OA over email. There were 4 rounds in total:

1. Online Assessment

  • 90-minute test on Codesignal IDE with Camera and Screen sharing

  • 1 DSA question on Strings/DP (hard)

  • 2 JS Debugging questions

  • 5 React MCQ

  • 5 JS MCQ

  • Some other HTML/CSS questions that I forgot

2. UI Tech round

  • Questions from my resume and introduction I gave

  • JANK reduction strategy, Critical rendering path entire lifecycle

  • Standard CSS questions

  • React Memoization and a problem to code a generic memo function

  • One question on writing a polyfill

  • Redux pattern and data flow, React lifecycle hooks

3. Problem solving round (PS/DS)

  • One question around an n-ary tree to code a React-like diffing algorithm.

  • Sample inputs for Virtual DOM and Real DOM objects were given

  • It was a BFE style problem, with multiple edge cases

  • I coded 2 out of 3 edge cases

  • Discussion on time complexity and optimizations I would do to my code

  • Overall, the best DSA round experience I ever had

4. HM round

I was ghosted for a while. I got a rejection mail after 2 weeks, which I didn’t expect considering I performed pretty decently. Nonetheless, free practice :)

Other offers: 2 early-stage startups, had similar interview experiences.

Mindset & Personality Development

No matter how skilled you are, if you aren’t a good communicator, things can turn against you. There are certain questions that interviewers ask almost every candidate, in an attempt to get a read on their personality and potential. You’ll likely be asked about your strengths and weaknesses, your leadership style, and other basic professional attributes. This LinkedIn course will help you understand the psychology behind the questions.


Lastly, some underrated advice. You can skip this if you feel too confident :)

Dopamine detox

I don’t know where you’re coming from, but if you are someone who gets distracted easily, you may follow these steps:

Cross-legged seating position
Dopamine detox
  • Try to incorporate a fitness regime

  • Eat clean food

  • Caffeine, maybe?

  • Envision yourself in your dream company — Yes, that should be your dopamine rush

  • Meditation can be helpful too

I personally am a fitness freak. I’ve been lifting for the past 6 years now. Every morning I chugged my caffeine pills and hit an intense weight training session. That helped me stay focused for the rest of the day.

Enjoy the process than the outcome

Ikigai chart
Ikigai
  • It’s the passion that should drive the fire inside you.

  • Good things take time.

  • Results are just a matter of time.

  • The interview always has a touch of a lottery.

  • A big part of it is pure luck.

  • Stop taking this personally and start treating it like a game or a sport that requires strategy and prep.

  • An interview is a 2-way street, think of it as a discussion

Rejection? I call it free practice!

Just do what needs to be done and don’t care about results.

I recently joined the company I was literally dreaming of! Had lots and lots of learnings during my prep and interview cycles. And what gets me excited is that this is just the beginning of my journey at Flipkart. I hope this will help you ace your interviews. But what about landing an interview? Well, that’s a story for another day!

For more updates give me a follow on LinkedIn or Twitter.

Share to your friends
Share on twitter
Author avatar

Written by

Ayush Singh

UI Engineer with a thing for Fitness ⚡ | Currently @Flipkart

Stories like this, every week

Get a roundup of the best design articles sent to your inbox.