A lightweight Excel clone built with React.js, designed as a learning project for students to understand React concepts, state management, and collaborative development through GitHub. This project implements basic spreadsheet functionality and provides opportunities for enhancement through structured issues and features.
- Understanding React components and state management
- Working with complex user interactions
- Implementing grid-based data structures
- Collaborative development using Git and GitHub
- Writing maintainable and scalable code
- Testing and debugging web applications
- Interactive spreadsheet grid
- Cell selection and editing
- Formula bar
- Column and row headers (A, B, C... and 1, 2, 3...)
- Real-time cell updates
- Keyboard navigation
- Basic formula support
- Cell styling and formatting
- Copy/paste functionality
- Multiple cell selection
- Data persistence
- CSV import/export
- And more...
- Node.js (v14 or higher)
- npm (v6 or higher)
- Git
- Clone the repository
git clone https://github.com/Scaler-Innovation-Labs/Excel_Clone_SST_OS.git
cd excel-clone- Install dependencies
npm install- Start the development server
npm start- Open http://localhost:3000 in your browser
excel-clone/
├── src/
│ ├── components/
│ │ ├── ExcelClone.js # Main spreadsheet component
│ │ ├── Toolbar.js # (to be created)
│ │ └── FormulaBar.js # (to be created)
│ ├── utils/
│ │ ├── formulas.js # (to be created)
│ │ └── cellUtils.js # (to be created)
│ ├── App.js
│ └── index.js
├── public/
├── package.json
└── CONTRIBUTING.md
- Fork the repository
- Find an issue you want to work on
- Create a new branch for your feature
git checkout -b feature/issue-number- Make your changes
- Commit and push your changes
git add .
git commit -m "Descriptive commit message"
git push origin feature/issue-number- Create a Pull Request
good-first-issue: Perfect for beginnersenhancement: New features or improvementsbug: Something isn't workingdocumentation: Documentation improvementsadvanced: Complex features requiring more experience
- Follow the existing code style
- Write meaningful commit messages
- Add comments for complex logic
- Update documentation as needed
- Write tests for new features
- Test your changes thoroughly
# Run tests
npm test
# Run tests in watch mode
npm test -- --watchnpm start # Start development server
npm test # Run tests
npm run build # Build for production
npm run lint # Check code style- React - Frontend framework
- Tailwind CSS - Styling
- Jest - Testing framework
-
Basic Spreadsheet Functionality
- Cell editing
- Basic navigation
- Formula bar
-
Data Management
- Formula support
- Copy/paste
- Data validation
-
Advanced Features
- Multiple sheets
- Cell formatting
- Import/export
- Ensure you're using the state update function correctly
- Check if the cell coordinates are correct
- Verify event handlers are properly bound
- Check formula syntax
- Verify cell references exist
- Look for circular dependencies
Please review our Code of Conduct before contributing to the project.
This project is licensed under the MIT License - see the LICENSE file for details.
- Inspired by Microsoft Excel and Google Sheets
- Built as an educational project for learning React
- Thanks to all contributors who participate in this learning journey
If you need help:
- Check the documentation
- Look through existing issues
- Create a new issue with a detailed description
- Ask for help in the discussions section
- Pick an issue to work on
- Join project discussions
- Share your progress
- Help others learn
Happy coding! 🎉