Coinbase Frontend Engineer Interview Questions

As a finance platform, accurately maintaining user balances is fundamental. Understanding closures helps in creating a secure balance management system.
Problem Statement: You need to define a function createAccountManager(initialBalance: number): { deposit: Function; withdraw: Function; getBalance: Function; } that returns an object with methods to deposit, withdraw, and getBalance. Using closures, ensure that the balance is encapsulated and not directly accessible.
- deposit(amount: number): void — Adds an amount to the balance.
- withdraw(amount: number): void — Reduces the balance by the specified amount if sufficient funds are available.
- getBalance(): number — Returns the current balance.Example 1:
Input: const account = createAccountManager(100); account.deposit(50); account.getBalance();
Output: 150
Explanation: The initial balance was 100, and after depositing 50, it became 150.Example 2:
Input: account.withdraw(30); account.getBalance();
Output: 120
Explanation: After withdrawing 30, the balance updates to 120.Constraints:
- The initialBalance is a non-negative integer.
- Withdrawals cannot exceed the current balance.

In the context of synchronous and asynchronous operations, understanding how the event loop handles tasks is crucial for performance in high-frequency trading platforms like Coinbase.
Problem Statement: You need to implement a function simulateEventLoop(tasks: Array<Promise<void>>): void that takes an array of promises representing asynchronous tasks and executes them in a way that reflects the behavior of the event loop. Ensure that any tasks scheduled in the event loop (using setTimeout or similar) are executed only after the current stack is clear.
- simulateEventLoop(tasks: Array<Promise<void>>): void — Simulates the event loop and executes tasks in order.Example 1:
Input: simulateEventLoop([Promise.resolve(), new Promise((res) => setTimeout(res, 100)), Promise.resolve()])
Output: Executed (in order: resolve, wait, resolve)
Explanation: The first promise is resolved immediately, then the second waits for 100ms before executing, followed by the final promise.Example 2:
Input: simulateEventLoop([new Promise((res) => setTimeout(res, 50)), Promise.resolve(), new Promise((res) => setTimeout(res, 20))])
Output: Executed (in order: wait 50ms, resolve, wait 20ms)Constraints:
- 1 <= tasks.length <= 10^4
- Each task will either be a resolved promise or a promise that resolves after a timeout.

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.