Frontend

Front-end questions

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

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

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

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

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

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

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

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

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

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

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

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

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