A spreadsheet editing app build using Reactjs.
- Editing cells.
- Applying styles to cells.
- Bold.
- Italic.
- Underline.
- Alignment (left, center, right)
- Font Family.
- Font Size.
- Color.
- Background Color.
- Creating and Editing multiple sheets.
- Formula Evaluation.
- Dependent cell value change causes other cell which are dependent on this to update as well.
- Changing the cell contents of a cell directly removes the formula from the content cell directly.
- Formula Evaluation does not support unary operators. eg to do 10 _ (-20) write the formula as 10 _ (0 - 20) {unary '-' is not supported}
- Conversion of sheets to json and reading from json.
- Copying and Pasting of a Single Cell (including formula and styles if any)
- Multi-cell copy paste.
- Export/Import CSVs.
- App currently passes down state and dispaatch function as props modify so that it uses context
- App currently has two different kind of states, merge into one.
- Remove hacky ways to show alert.
- Maybe possible to optimize rerendering using useCallback, useMemo, React.memo. (I am not sure how.)
- Optimization:
- A lot of optimizations were made to how each component should render so as to avoid re rendering of complete app whenever a single cell is being edited.
- Multiple changes were made to how the state was being stored so as to make the optimizations.
- React.memo was used to make sure re rendering is done properly and when required.
- CSS:
- Flexbox is used heavily.
- Some tricks involving opacity set to 0, to hide a component but make sure it's clickable etc were used to display icons for color changing.
- Using infix to postfix conversion and postfix evaluation to parse and evaluate the formula.
- DFS Cycle detection was used to detect if some formula is recursive in nature or not.
Overall a good learning project.