Frontend

Front-end questions

Easy

20 minutes

Implement Currying

Create a function `sum` that implements currying. Currying is a transformation of functions that translates a function from being callable as f(x, y, ...

Medium

60 minutes

Feedback Stars

Create a feedback rating component that takes in a number of stars and outputs the corresponding star SVGs on the output window. When the user clicks ...

Easy

60 minutes

Countries List with Debounce

Debouncing is a method of preventing a function from being invoked too often, and instead of waiting a certain amount of time until it was last called...

Medium

60 minutes

Polyfills

A polyfill is a code snippet (in terms of javascript web architecture) used for modern world functionalities on older browsers that do not implement i...

Easy

30 minutes

useOutsideClick Custom Hook

useOutsideClick custom hook can be used to determine if a click event was triggered outside of the target element's boundary. Create a function called...

Easy

20 minutes

Memoization

Memoization is a way for a function to remember or cache the results. Given an expensive function that takes a long time to compute for the same resul...

Easy

60 minutes

Job Feed

Create a Job Feed page where the latest job postings are fetched from the Hackernews API. On clicking the job posting, the user should be able to land...

Medium

60 minutes

Folder Structure

Given a data object resembling a folder structure, create a folder structure UI resembling that of VS code with appropriate functionalities.

Easy

25 minutes

Flatten A Nested Object

Flatten a nested object that contains arrays and objects as children. The task is to make the object flat, i.e. there should be no nested children lef...

Hard

45 minutes

Countdown Timer

A countdown timer has hours, minutes, and seconds that count down to 0 when started. In this problem, you are required to create a Countdown component...

Medium

60 minutes

Infinite Autoplay Slider

As seen on the TailwindCSS website, create a horizontal grid of moving cards that loop infinitely. When hovered over, the cards slow down and are clic...

Easy

20 minutes

useKeyPress Custom Hook

Keypress events are triggered whenever a user hits any of the keys on the keyboard and some action happens on the web application. Create a custom hoo...

Medium

35 minutes

Toasts And Notifications

Toasts are the small little notification messages that popup on front-end applications to notify the user of some current actions that have happened. ...

Medium

30 minutes

Transfer List

Given a list of checkbox items, transfer checked items from one container to the other.

Easy

45 minutes

Select All Checkboxes

Given a `Select All` checkbox - toggle the children's checkboxes in such a way that when the `select all` button is clicked, all the boxes are checked...

Easy

30 minutes

Local Storage Custom Hook

Implement a custom hook to get and set values from and to Local Storage. A custom hook is a way (or rather a mechanism) to reuse stateful logic. State...

Easy

45 minutes

Full Screen Modal

A modal is an overlay screen that appears when the user performs some action on the website. For example, You must be familiar with a window popping o...

Medium

60 minutes

Lightbox Gallary

Create a minimal Lightbox Gallery. A lightbox gallery is an image gallery with many images lined up as tiles. Once a tile is clicked, a full-screen im...

Easy

20 minutes

Multiple Filters

Given a list of products and a list of filters, create a multi-filters buttons bar with a list of filters. If any of the filter is clicked, the list o...

Easy

40 minutes

Form Validation

Create a Form Component in React that renders out a list of input fields and validates them before finally submitting the form. Create the form from s...

Easy

40 minutes

Link Previewer

Create a Link Previewer component in React that takes in children prop, that, when hovered over, displays the link that was provided to the component ...

Easy

30 minutes

Typewriter Effect

A Typewriter Effect is something where a piece of text constructs itself with some milliseconds in delay. You will see the text getting generated from...

Hard

90 minutes

Command Palette

Create a Command Palette that opens up with Keyboard events like Command + K. In this problem, The command palette will have navigation links to which...

Easy

45 minutes

Insert Text In Document

Given a textarea and a document box, Insert the text in the document in such a way that it HIGHLIGHTS the text content which is most recently added to...