Frontend Developer

Developed a web-based drawing application using React that allows multiple users to collaborate on a digital canvas in real time.

The project featured:

• Drawing Tools: Implementation of freehand drawing, shapes, and an eraser using the HTML5 Canvas API.
• State Management: Efficient handling of canvas data and tool configurations using React hooks (useRef, useState).
• Real-Time Sync: Logic for broadcasting and receiving coordinate data to ensure all users see updates simultaneously.
• UI/UX: A responsive interface focused on low-latency interactions and clean tool selection.

In your collaborative whiteboard, if 50 users are drawing simultaneously, the component may re-render hundreds of times per second. How would you use React.memo, useMemo, or requestAnimationFrame to ensure the UI does not lag?

JavaScript is single-threaded. If heavy canvas calculations (such as a flood-fill algorithm) are processed on the main thread, the UI may freeze. How would you use Web Workers to offload this work?

Explain the CSS Box Model and how box-sizing: border-box changes layout calculations. Also, how would you ensure that a toolbar always stays above the drawing canvas, regardless of the drawing elements’ positions (z-index and stacking context)?

What is the difference between useRef and useState when handling canvas coordinates? Why might using useState for every mouse movement be a bad idea?

Write a function that takes a deeply nested object (commonly used in whiteboard state or configurations) and flattens it into a single-level object using dot-notation keys.

Input:
{ user: { profile: { name: "John" } }, tool: "pen" }

Output:
{ "user.profile.name": "John", "tool": "pen" }

Implement a class or a custom React hook, useHistory, that manages an Undo/Redo feature for a canvas.

Requirements:

• A save(state) method to push a new canvas snapshot.
• undo() and redo() methods to move the pointer backward and forward through the history.
• Handle the edge case: if a user undoes actions twice and then draws something new, the redo history must be cleared.