How to ace a UI Engineer interview
By: Ayush Singh
Tags: Frontend, JavaScript, Interview, Interview Questions

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.

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

Javascript (In-Depth) Data Structures and Algorithms Problem Solving Frontend frameworks & libraries 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)

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

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 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

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

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:

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

My calendar during peak times :)

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:

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:

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:

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:

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:

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

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: