Design a Spreadsheet – Frontend System Design

We’ll walk through the frontend system design for a collaborative spreadsheet like Google Sheets. Our goal is a grid that can hold 10,000 × 100 cells, stay fast while you arrow around, evaluate SUM, AVERAGE, and refs like =A1+B2, and show other people’s selections without turning the sheet into a million DOM inputs.

Interviewers are listening for three ideas: a sparse cell map, a windowed grid with one editor input, and a formula dependency graph that dirties dependents instead of the whole workbook. Collaboration is an operation stream on cells, not a second copy of the grid. You’ll see estimates for a million-cell sheet, the view-model split, and the keyboard model that makes this feel like a spreadsheet.

Problem Statement

Build the frontend for a collaborative spreadsheet like Google Sheets.

Requirements:

• A grid of cells with a formula bar
• Edit a cell, compute formulas that reference other cells
• Virtualize so a 10,000 × 100 sheet stays fast
• Multiple users can edit at once, with live cell selections

Describe the grid, formula evaluation, selection,... premium content.