A real-time collaborative code editor that enables multiple developers to code together in the same room, communicate instantly, and collaborate seamlessly using WebSockets.
Kolab is a collaborative coding platform designed to make remote programming simple and efficient. Developers can create or join coding rooms using a unique Room ID, edit code simultaneously, and see updates in real time.
The application uses Socket.IO to synchronize code changes instantly between connected users, making it suitable for pair programming, coding interviews, collaborative learning, and team projects. Real-time synchronization is a common architecture for collaborative code editors and pair-programming platforms. :contentReference[oaicite:0]{index=0}
- 🚀 Real-time collaborative code editing
- 👥 Create and join coding rooms
- 🔄 Instant code synchronization
- ⚡ WebSocket communication using Socket.IO
- 🎨 Clean and responsive interface
- 📝 Live code updates
- 🔗 Unique Room ID generation
- 🌐 Multi-user collaboration
- 📱 Responsive design
- ⚙️ Fast React-based frontend
- React.js
- JavaScript (ES6+)
- CSS3
- HTML5
- Node.js
- Express.js
- Socket.IO
- WebSockets
- Socket.IO
- Git
- GitHub
Kolab/
│
├── client/
│ ├── public/
│ │ ├── _redirects
│ │ ├── kolab.png
│ │ ├── robots.txt
│ │ └── sitemap.xml
│ │
│ ├── src/
│ │ ├── assets/
│ │ ├── components/
│ │ │ ├── Client.jsx
│ │ │ ├── Editor.jsx
│ │ │ ├── EditorPage.jsx
│ │ │ └── Home.jsx
│ │ ├── App.jsx
│ │ ├── App.css
│ │ ├── Socket.js
│ │ ├── index.css
│ │ └── main.jsx
│ │
│ ├── package.json
│ ├── vite.config.js
│ └── README.md
│
├── server/
│ ├── index.js
│ ├── package.json
│ └── package-lock.json
│
└── README.md
git clone https://github.com/HarshKumar7687/kolab.gitcd kolabcd client
npm installcd ../server
npm installnpm startor
node index.jscd client
npm run devThe application will be available at
http://localhost:5173
- User opens the application.
- Create a new room or join an existing room using a Room ID.
- Share the Room ID with collaborators.
- Every connected user can edit code simultaneously.
- Changes are synchronized instantly across all users.
- Collaborators can work together in real time without refreshing the page.
Add screenshots here.
screenshots/
│
├── home.png
├── editor.png
├── room.png
└── collaboration.png
This project helped strengthen my understanding of:
- React Component Architecture
- WebSocket Communication
- Socket.IO
- Real-Time Event Handling
- Client-Server Architecture
- REST APIs
- State Management
- Responsive UI Design
- Frontend and Backend Integration
- Git & GitHub Workflow
- 💬 Integrated Chat System
- 🎤 Voice Chat
- 📹 Video Calling
- 🌙 Dark Mode
- 🌐 Multiple Programming Language Support
▶️ Code Execution- 📂 File Explorer
- 💾 Save Projects
- 🔐 Authentication
- 👨💻 User Profiles
- 📝 Collaborative Whiteboard
- 🕒 Version History
Contributions are welcome!
-
Fork this repository
-
Create your feature branch
git checkout -b feature-name- Commit your changes
git commit -m "Added new feature"- Push to GitHub
git push origin feature-name- Open a Pull Request
Harsh Kumar
B.Tech Computer Science Engineering
Institute of Technical Education and Research (ITER), SOA University
- 💼 LinkedIn: https://www.linkedin.com/in/harsh-kumar-91aa8132b/
- 💻 GitHub: https://github.com/HarshKumar7687
- 🌐 Portfolio: https://harshkumar-dev-portfolio.netlify.app/
If you found this project helpful, please consider giving it a ⭐ on GitHub.
It motivates me to build more open-source projects and improve this application.