alpha.learnersbucket.
com
35 Machine coding
questions to
Prepare for your
frontend interview.
alpha.learnersbucket.com
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 .
alpha.learnersbucket.com
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.
alpha.learnersbucket.com
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
alpha.learnersbucket.com
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>
alpha.learnersbucket.com
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.
alpha.learnersbucket.com
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.
alpha.learnersbucket.com
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
alpha.learnersbucket.com
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.
alpha.learnersbucket.com
9. Responsive slideshow
Another common machine-
coding question where you have
to slideshow a list of images
Learn how to implement it.
alpha.learnersbucket.com
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.
alpha.learnersbucket.com
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.
alpha.learnersbucket.com
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.
alpha.learnersbucket.com
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.
alpha.learnersbucket.com
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.
alpha.learnersbucket.com
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.
alpha.learnersbucket.com
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.
alpha.learnersbucket.com
17. Image auto-carousel in
React
On the website, you may have
seen testimonial images being
auto-rotated.
Learn how to implement it.
alpha.learnersbucket.com
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.
alpha.learnersbucket.com
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.
alpha.learnersbucket.com
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.
alpha.learnersbucket.com
21. Scroll indicator in React
Learn how to implement the
Scroll indicator that determines
how much of a page has been
scrolled.
alpha.learnersbucket.com
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 .
alpha.learnersbucket.com
23. Accordion in React
Learn how to implement the
Accordion with accessibility and
key board navigation.
A very common machine-coding
question.
alpha.learnersbucket.com
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.
alpha.learnersbucket.com
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.
alpha.learnersbucket.com
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.
alpha.learnersbucket.com
27. Highlight text on selection.
Implement Medium-like text
highlighter where selected text
can be Tweeted or shared.
alpha.learnersbucket.com
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.
alpha.learnersbucket.com
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.
alpha.learnersbucket.com
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.
alpha.learnersbucket.com
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.
alpha.learnersbucket.com
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.
alpha.learnersbucket.com
33. Multi-stepper form.
This question was asked in
Zeta’s SDE3 frontend interview,
where you were asked to
implement the multi-stepper
form.
alpha.learnersbucket.com
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.
alpha.learnersbucket.com
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
alpha.learnersbucket.com
And get lifetime access
All the resources in one place
to prepare for your frontend
interview at the best price.
alpha.learnersbucket.com
19 Data structures
implemented in
JavaScript to
Prepare for your
Interview.
