Collaborative Code Editor

📖 Table of Contents

• Overview
• Project Insights
• Live Demo
• Core Features
• Technology Stack
• Getting Started
• Acknowledgments
• Contact
• How to Contribute
• Contributing
• Code of Conduct
• Contribution Guidelines
• Suggestions & Feedback
• Show Your Support
• License
• Stargazers
• Forkers
• Project Admin

🔍 Overview

A modern, real-time collaborative code editor built with React, Vite, Node.js, and Socket.IO. This project enables multiple users to join a shared coding room, edit code together, communicate via chat, and collaborate through integrated video calls—all in the browser, with no login required.

📊 Project Insights

🌟 Stars	🍴 Forks	🐛 Issues	🔔 Open PRs	🔕 Closed PRs	🛠️ Languages	👥 Contributors

🚀 Live Demo

Experience Collaborative-code-editor live here:
👉

🌟 Exciting News...

🚀 This project is now an official part of GirlScript Summer of Code – GSSoC'25! 💃🎉💻 We're thrilled to welcome contributors from all over India and beyond to collaborate, build, and grow Collaborative-code-editor! Let’s make learning and career development smarter – together! 🌟👨‍💻👩‍💻

👩‍💻 GSSoC is one of India’s largest 3-month-long open-source programs that encourages developers of all levels to contribute to real-world projects 🌍 while learning, collaborating, and growing together. 🌱

🌈 With mentorship, community support, and collaborative coding, it's the perfect platform for developers to:

• ✨ Improve their skills
• 🤝 Contribute to impactful projects
• 🏆 Get recognized for their work
• 📜 Receive certificates and swag!

🎉 I can’t wait to welcome new contributors from GSSoC 2025 to this Collaborative-code-editor project family! Let's build, learn, and grow together — one commit at a time. 🔥👨‍💻👩‍💻

🛠️ Technology Stack

• Node.js
• React + Vite
• Socket.io
• Express.js
• Render for Deployment

🌟 Features

🚀 Real-Time Collaborative Code Editing

• Multiple users can join the same room and edit code together in real time.
• Language selection (JavaScript, Python, Java) for syntax highlighting.
• Live user list showing who is present in the room.
• Typing indicator to show when someone is editing.

💬 Real-Time Room Chat

• Integrated chat panel for each code room.
• Send and receive messages instantly with all room participants.
• Usernames displayed with each message.
• No login required—just enter a room ID and your name.

🎥 Video Call Collaboration

• Floating, draggable video call panel in the editor UI.
• All users in a room automatically join the call (camera and mic are off by default).
• Toggle camera and microphone independently at any time.
• Visual indicators show which users have their camera or mic on/off.
• Live microphone volume bar for your own video tile, showing speech intensity in real time.
• Video tiles for all users with camera on; placeholder for those with camera off.

🖥️ Modern UI/UX

• Responsive, clean interface with sidebar for room info and chat.
• Editor powered by Monaco (the same editor as VS Code).
• Floating video call panel can be dragged anywhere in the editor area.

Getting Started

1. Install dependencies:

   • Backend: npm install in the project root
   • Frontend: npm install in frontend/vite-project

2. Start the backend:

   npm run start

3. Start the frontend:

   cd frontend/vite-project
   npm run dev

4. Open your browser:
   • Go to http://localhost:5173 (or the port shown in your terminal)

Tech Stack

• Frontend: React, Vite, Monaco Editor, Socket.IO, Simple-Peer (WebRTC)
• Backend: Node.js, Express, Socket.IO

Usage

• Enter a room ID and your name to join a collaborative session.
• Edit code, chat, and use video call features with other participants in the same room.

Issue Creation ✴

Report bugs and issues or propose improvements through our GitHub repository's "Issues" tab.

Contribution Guidelines 📑

• Firstly Star(⭐) the Repository
• Fork the Repository and create a new branch for any updates/changes/issue you are working on.
• Start Coding and do changes.
• Commit your changes
• Create a Pull Request which will be reviewed and suggestions would be added to improve it.
• Add Screenshots and updated website links to help us understand what changes is all about.

Contributing is fun🧡

We welcome all contributions and suggestions! Whether it's a new feature, design improvement, or a bug fix - your voice matters 💜

Your insights are invaluable to us. Reach out to us team for any inquiries, feedback, or concerns.

🙏 Acknowledgments

• Thanks to all contributors of this project
• Special shoutout to GirlScript Summer of Code (GSSoC’25) for the amazing community and support!
• Built with dedication, collaboration, and lots of chai

📞 Contact

• GitHub Issues: Report bugs or request features
• Email: Contact the maintainers for collaboration opportunities

Feel free to reach out with any questions or feedback!

🤝How to Contribute

We love contributions from the community! Whether it's a bug report, a new feature, or a documentation improvement, we appreciate your help.

How to Contribute

1. Fork the repository and create a new branch for your changes.
2. Make your changes and ensure everything is working as expected.
3. Submit a pull request with a clear description of your changes.

Found a Bug?

• Check the issue tracker to see if the bug has already been reported.
• If not, open a new issue and provide as much detail as possible.

Have a Feature Idea?

• We'd love to hear it! Open an issue to discuss your idea.

🤝 Contributing

We welcome contributions from developers of all skill levels! Here are some ways you can contribute:

Ways to Contribute

• 🐛 Bug fixes - Help us identify and fix bugs
• ✨ New features - Suggest and implement new functionality
• 📚 Documentation - Improve our docs and guides
• 🎨 UI/UX improvements - Make the platform more user-friendly
• 🔧 Performance optimizations - Help make Collaborative-code-editor faster and more efficient
• 📱 Mobile responsiveness - Improve the mobile experience
• 🔒 Security enhancements - Help keep user data safe

Thank you to everyone who has made Collaborative-code-editor better! 💚

📜 Code of Conduct

Please refer to the Code of Conduct for details on contributing guidelines and community standards.

🤝👤 Contribution Guidelines

We love our contributors! If you'd like to help, please check out our CONTRIBUTING.md file for guidelines.

Thank you once again to all our contributors who has contributed to Collaborative-code-editor! Your efforts are truly appreciated. 💖👏

See the full list of contributors and their contributions on the GitHub Contributors Graph.

Show some by starring this awesome repository!

💡 Suggestions & Feedback

Feel free to open issues or discussions if you have any feedback, feature suggestions, or want to collaborate!

🙌 Show Your Support

If you find Collaborative-code-editor project helpful, give it a star! ⭐ to support more such educational initiatives:

• ⭐ Starring the repository
• 🐦 Sharing on social media
• 💬 Telling your friends and colleagues
• 🤝 Contributing to the project

📄 License

This project is licensed under the MIT License - see the License file for details.

⭐ Stargazers

🍴 Forkers

🧑‍💻Project Admin:

Kushika Agarwal

Give us a Star and let's make magic!

👨‍💻 Built with ❤️ by Collaborative-code-editor Team

❤️ Kushika Agarwal and Contributors ❤️

Open an Issue | 🌟 Star on GitHub | 🚀 Live Demo

⬆️ Back to Top

Ready to show off your coding achievements? Get started with Collaborative-code-editor today! �

Feel free to contribute or suggest new features!