Coinbase Frontend Engineer System Design Questions

With the dynamic nature of financial applications, a smooth client-side routing experience is integral for user retention on Coinbase.
Problem Statement: You need to implement a class ClientRouter that manages different routes in a single-page application. Users will navigate between different components based on the URL without refreshing the page.
- addRoute(path: string, component: Function): void — Adds a new route along with its corresponding component.
- navigate(path: string): void — Navigates to the given path and renders the associated component.
- getCurrentPath(): string — Returns the current path the user is on.Example 1:
Input: const router = new ClientRouter(); router.addRoute('/home', HomeComponent); router.navigate('/home');
Output: Rendered HomeComponent
Explanation: After navigating to /home, the associated component is rendered.Example 2:
Input: router.addRoute('/about', AboutComponent); router.navigate('/about');
Output: Rendered AboutComponentConstraints:
- All paths are unique and in the format of a valid URL path.

Given the dynamic nature of cryptocurrency data, efficiently updating the UI is essential in the Coinbase platform. A Virtual DOM can help minimize direct manipulation of the actual DOM.
Problem Statement: You need to implement a class VirtualDOM that can create, update, and render a lightweight representation of a real DOM. This is vital to reduce expensive layout recalculations and improve responsiveness.
- createElement(tag: string, props: Object, children: Array<VirtualNode>): VirtualNode — Create a new Virtual Node.
- update(oldNode: VirtualNode, newNode: VirtualNode): VirtualNode — Update an old node to match a new one and return the updated Virtual Node.
- render(node: VirtualNode): HTMLElement — Convert a Virtual Node back into a real DOM HTMLElement.Example 1:
Input: const vNode = virtualDOM.createElement('div', { className: 'container' }, []);
Output: Virtual Node createdExample 2:
Input: virtualDOM.update(oldVNode, newVNode);
Output: Updated Virtual NodeConstraints:
- The tag name contains only alphabetic characters.
- Props is a simple object and children are always an array of Virtual Nodes.