🚀 New React Challenge: Build a Spreadsheet with Formula Evaluation

You've built todo apps, counters, and forms. But can you handle a grid of 50 cells that reference each other through formulas? This challenge pushes your state management skills into real spreadsheet territory — formula evaluation, two-way cell bindings, and an interface that juggles editing, selection, and keyboard shortcuts all at once.

🔥 Start the Challenge Now

---

🧩 Overview

Build a spreadsheet with real-time formula evaluation. You'll wire up a 10-row × 5-column grid where cells support basic values and Excel-style formulas (like =A1+B2), column and row selection, and a formula bar that mirrors what you're typing.

---

✅ Requirements

• Render a spreadsheet with column headers A through E and rows 1 through 10
• Each cell uses an <output> element for the computed value and an <input> overlaid for editing
• Click a cell to edit; press Enter or blur to commit the change
• Formulas starting with = must be evaluated:
  • Arithmetic: =1+1 → 2
  • Cell references: A1=5 and B1==A1+3 → 8
• Click a column header to select/deselect that column
• Click a row number to select/deselect that row
• Selecting a column deselects any row and vice-versa
• Backspace clears the selected column or row
• Click outside the table deselects everything
• A formula bar (fx) mirrors the editing cell's value
• Cells must start empty — no default values

---

💡 Notes

• Use useState for cells, selected column, and selected row. No need for useReducer here.
• Each cell uses two overlapping layers: a visible <output> for the computed value and an invisible <input> for the raw formula. Toggle with opacity-0 / opacity-100 so the input stays mounted.
• Evaluate formulas with eval: generate JS const declarations from all cell values, wrap them in an IIFE, and evaluate. Recompute every cell on any change — cells can reference each other.

---

🧪 Tests

1. renders the app title
2. renders the spreadsheet with column headers A-E and rows 1-10
3. renders cells with initial empty values
4. allows editing a cell and displays the new computed value
5. evaluates a simple formula
6. evaluates a formula with cell references
7. re-evaluates formulas when a referenced cell is cleared
8. selects a column when clicking the column header
9. deselects column when clicking the same header again
10. selects a row when clicking the row number
11. deselects row when clicking the same row number again
12. deselects column when selecting a row and vice-versa
13. clears the column when Backspace is pressed with a column selected
14. clears the row when Backspace is pressed with a row selected
15. deselects column when clicking outside the spreadsheet

---

🔥 Start the Challenge Now

This one will stretch your understanding of React state in ways a simple counter or todo list never could. Formula engines, overlay editing, and cascading recomputation — all with just hooks and vanilla React.