Spreadsheet Web Application

This project is a web-based spreadsheet application that mimics the core functionalities of Google Sheets, built using React, Next.js, and Material UI.

🔗 Live Demo : https://gsheets-nu.vercel.app/

Features

1. Edit Cells

• Double click on any cell to start editing.
  

2. Drag Cells

• Drag cells around.
• This is implemented using ContextAPI to track startCell location and endCell location.

3. Select a Group of Cells

• Drag mouse around to select a group of cells.
• This is implemented using ContextAPI to track selected cells and MouseEvents to add or remove cells from the list of selected cells.
  

4. Get SUM, MAX, MIN, AVERAGE, COUNT

• Select a target cell.

• Select the group of cells for which you want the value.

• Type command in the functions box:

  • For sum type: =sum
  • For count type: =count
  • For max type: =max
  • For min type: =min
  • For average type: =average

  

5. Mathematical Functions Retain Their Value

• Cells update their value when cells which were initially used to create them change their values.
• This is implemented using ContextAPI to keep track of cell type.
• useState is used to maintain cells dependency.
  

6. Even More Mathematical Functions

• Toolbar provides even more mathematical functions:

  • Trim: Remove any white-spaces from selected cells.
  • Upper: Converts the selected cell into Uppercase.
  • Lower: Converts selected cell value to Lowercase.
  • Duplicate: Remove duplicates from selected range of cells.

  

Tech Stack

• Next.js: Server-side rendering and static site generation.
• React.js: Component-based UI development.
• Material UI: Prebuilt UI components for styling.
• Context API: Global state management.

Future Enhancements

• Data validation and formatting options.
• Save and load spreadsheet data.
• Add charts and data visualization features.