Frontend
Front-end questions
Easy
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
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
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
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
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
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
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.
Easy
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
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
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...
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. ...
Medium
Transfer List
Given a list of checkbox items, transfer checked items from one container to the other.
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
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
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
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
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 ...
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...
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
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...