🚀 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 renders the app title renders the spreadsheet with column headers A-E and rows 1-10 renders cells with initial empty values allows editing a cell and displays the new computed value evaluates a simple fo