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!

Letter

An AI-assisted newsletter builder for content creators, designers, and developers.

This article is supported by Letter.

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

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)

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

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

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.

How to Ace a UI Engineer Interview