Create a function `sum` that implements currying. Currying is a transformation of functions that translates a function from being callable as f(x, y, ...
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 ...
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...
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...
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...
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...
Given a data object resembling a folder structure, create a folder structure UI resembling that of VS code with appropriate functionalities.
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...
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...
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. ...
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...
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...
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...
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...
Given a list of checkbox items, transfer checked items from one container to the other.
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...
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...
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...
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 ...
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...
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...
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...
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...