[Link].
com
35 Machine coding
questions to
Prepare for your
frontend interview.
[Link]
1. Tic-Tac-Toe with bot
(vanillaJs)
Coding Tic-Tac-Toe is a
common question asked in
Atlassian.
The bot is an extra layer I have
added .
[Link]
2. Feature flag component in
React
Another machine-coding
question asked in Atlassian.
Feature flag helps to
dynamically enable UI / features
for certain set of users.
[Link]
3. Multi-stepper component in
React
Multi-step checkout or form is a
common UI component.
It is a classic machine-coding
question that you can expect in
frontend interviews
[Link]
4. Switch-case component
A tricky machine-coding
question where you have to
implement the switch-case logic
through the React component
<switch on={type}>
<case value={”x”}></case>
</switch>
[Link]
5. Infinite-scroll in React
Infinite scroll is an essential UI
feature for news feeds or blogs.
We fetch new items as we scroll
and are about to finish the
existing one.
[Link]
6. Two-step login form in React
What is a website without a login
form?
Learn to design a two-step login
form like Gmail.
Phonenumber + OTP.
[Link]
7. Todo list in React
Another classic machine-coding
question that you can expect in a
frontend interview.
Learn how to create a resilient
TODO list
[Link]
8. Search with pagination in
React
A search can provide a long list
or records, and with offset-
based pagination, it is easier to
navigate the results and share
them with others.
Learn how to implement it.
[Link]
9. Responsive slideshow
Another common machine-
coding question where you have
to slideshow a list of images
Learn how to implement it.
[Link]
10. Responsive slideshow
gallery
In this user is already aware of
the images and can directly
jump to any while sliding.
Learn how to implement it.
[Link]
11. Lightbox in React
When you click on any
Instagram post it is expanded in
a modal and images are viewed
in Large, this is called as
Lightbox
Learn how to implement it.
[Link]
12. Functional Modal in React
Modal is popup or dialog that is
placed on the screen on user
trigger action
Learn how to implement a
controlled modal component.
[Link]
13. Detect overlapping circles in
React
This question was asked in
Uber’s interview. On click
generate a circle and if two
circles overlap, change the color
of the latter one.
Learn how to implement it.
[Link]
14. Animate elements in
sequence
This question was asked in
Uber’s and Navi’s interviews.
On click queue multiple
progress bar, and run the next
progress one when previous one
is finished.
Learn how to implement it.
[Link]
15. Preview zoomed image on
hover
On an E-commerce site when
you hover over the product
image, it is enlarged or zoomed
for better view.
Learn how to implement it.
[Link]
16. Search with autocomplete in
React
On Youtube when you start
typing in the search box, a
suggestion list is displayed
below that.
Learn how to implement it.
[Link]
17. Image auto-carousel in
React
On the website, you may have
seen testimonial images being
auto-rotated.
Learn how to implement it.
[Link]
18. Search with autosuggestion
in vanialljs
Asked in PingIdentity, you will
be given a mock server and you
have to implement the search
with suggestion in Vanilla js.
Learn how to implement it.
[Link]
19. Pagination component in
React
One of the common UI
components, it is frequently
asked in machine-coding
rounds.
Learn how to implement it with
the next and previous
navigation.
[Link]
20. Word typing effect in React
Learn how to implement the
word typing effect in React with
the X words per second speed
and blinking cursor.
[Link]
21. Scroll indicator in React
Learn how to implement the
Scroll indicator that determines
how much of a page has been
scrolled.
[Link]
22. Toggle switch in React
Learn how to implement the
Toggle switch that helps to
implement the boolean change
on the UI, like dark and light
mode .
[Link]
23. Accordion in React
Learn how to implement the
Accordion with accessibility and
key board navigation.
A very common machine-coding
question.
[Link]
24. Capture the product visible
on the viewport when a user
stops scrolling
Learn how to determine what
product the user must be
looking at by capturing the
product visible on the viewport
when a user stops scrolling
asked in Nobrokers interview.
[Link]
25. Create a website
walkthrough assistance.
Learn how to create a JavaScript
library that works as
walkthrough assistance for a
website that provides the feature
and function walkthrough to the
first time user.
[Link]
26. Number increment counter
in React.
Given a number and a duration
animat from 0 to that number in
a given second.
You will learn why setTimeout
and setInterval won’t work and
requestAnimationFramework.
[Link]
27. Highlight text on selection.
Implement Medium-like text
highlighter where selected text
can be Tweeted or shared.
[Link]
28. Batch API calls in sequence.
Learn how to make batch API
calls for a list of APIs after a
certain interval as sked in
Moneycontrol.
[Link]
29. Time in human readable.
Implement a React component
that shows the time in human-
readable format like, a few
seconds ago, 1 hour ago, etc.
[Link]
30. Image comparison slider.
Implement an Image
comparison slider that will
compare two images placed one
above the other with the help of
a slider.
[Link]
31. Preview selected color
swatches.
This question was asked in
Zeta’s frontend interview where
given a list of color swatches,
selecting on it should be
previewed.
[Link]
32. Create a to-do card list.
This question was asked in
Atlassian’s frontend interview,
where an API endpoint that
returns a todo list was given, and
a UI to generate the todo cards.
[Link]
33. Multi-stepper form.
This question was asked in
Zeta’s SDE3 frontend interview,
where you were asked to
implement the multi-stepper
form.
[Link]
34. Create a grid component in
React.
This question was asked in
Microsoft’s frontend interview,
a grid component that works
with flexbox similar to MUI grid.
[Link]
35. Create a spinner with CSS.
This question was asked in
Microsoft’s frontend interview,
where you had to create a
spinner only using CSS.
Enroll today at
[Link]
And get lifetime access
All the resources in one place
to prepare for your frontend
interview at the best price.
[Link]
19 Data structures
implemented in
JavaScript to
Prepare for your
Interview.
