React
Questions that involve React
Medium
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
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
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
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
Folder Structure
Given a data object resembling a folder structure, create a folder structure UI resembling that of VS code with appropriate functionalities.
Hard
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
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
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
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
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
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
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
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
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
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
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
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...
Easy
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...