CodStak Weekly Challenge #9: Click Tracker with Undo/Redo

React Interview Question

Hey Coders,

I have a really interesting challenge for you today. You need to implement undo and redo in real life. How exciting? Below is the summary of the challenge.

Your task is to build a Click Tracker that lets users click anywhere on the screen to leave a "+" sign at that location. The application should also allow users to undo their last click or redo a previously undone click. This challenge will test your skills in managing state effectively and implementing features like undo and redo in React.

Requirements:

Click to Add:

When a user clicks on the screen, a red "+" sign should appear at the clicked position. Undo Functionality:

Provide an Undo button that removes the most recently added "+" sign. If there are no "+" signs left to undo, disable the Undo button. Redo Functionality:

Provide a Redo button that restores the most recently undone "+" sign. If there are no undone "+" signs left to redo, disable the Redo button. Position Tracking:

Track the exact coordinates of each "+" sign and display them in their correct positions on the screen.

UI Design Example:

A full-page area with a border for clicks. Two buttons: Undo and Redo, placed above the clickable area. "+" signs positioned dynamically based on click coordinates. Hints:

You can use a stack-like approach to manage undo and redo operations. Make use of array methods like slice and concat to manipulate the state without mutating it. Acceptance Criteria:

"+" signs appear at the correct position when clicked. Undo removes the last "+" sign, and Redo restores it. Buttons are correctly disabled when no action is available.

This kind of challenges are regularly asked in an interview, so make sure you don’t miss this one.

If you have any questions and concerns, please reach out to me via X.

That’s all from this week’s challenge, see you next week!