---

Real-Time Collaborative Code Editor

A real-time code editor designed for seamless collaboration, allowing users to work on projects together in real-time. With support for various programming languages, file management, and collaborative features, it's a powerful platform for both learning and professional development.

🔮 Features

• 💻 Real-time Collaboration: Edit code together with multiple users across different files.
• 📁 File Management: Create, open, edit, save, delete, and organize files and folders effortlessly.
• 💾 Download Codebase: Download the entire project as a zip file for offline access.
• 🚀 Unique Room ID: Collaborate instantly by sharing a unique room ID for each session.
• 🌍 Language Support: Supports multiple programming languages, enabling flexible collaboration.
• 🌈 Syntax Highlighting: Auto-language detection and syntax highlighting for a variety of file types.
• 🚀 Code Execution: Run your code directly within the environment and get instant feedback.
• ⏱️ Real-time Synchronization: Code changes are instantly updated and synchronized for all users in the session.
• 📣 Notifications: Get notified when users join or leave the collaboration session.
• 👥 User Presence List: View a list of users currently in the session, with online/offline status indicators.
• 💬 Real-time Chat: Chat with collaborators while working on the code.
• 🎩 Live Tooltip: See which users are actively editing specific parts of the code.
• 💡 Code Suggestions: Auto-suggestions based on the programming language to help speed up coding.
• 🔠 Customization: Adjust font size and font family to suit your preferences.
• 🎨 Theming: Choose from multiple themes for a personalized coding experience.
• 🎨 Collaborative Drawing: Sketch and draw with your team in real-time to visualize ideas.

🚀 Live Preview

Check out the live demo of the project here.

💻 Tech Stack

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

⚙️ Installation

To get started with the project, follow these steps:

1. Fork the Repository:
   Click the "Fork" button at the top-right corner of this page to fork the repository.

2. Clone the Repository:

   git clone https://github.com/brittytino/Real-Time-Code-Editor.git

3. Set up Environment Variables:
   Rename the .env.example files in the client and server directories to .env and set the following environment variables:

   Frontend (client):

   VITE_BACKEND_URL=<your_server_url>

   Backend (server):

   PORT=3000

4. Install Dependencies:
   Navigate to the frontend and backend directories separately and install the necessary dependencies:

   npm install

5. Start the Servers:

   • Frontend:

     cd client
     npm run dev

   • Backend:

     cd server
     npm run dev

6. Access the Application:
   Open a browser and visit:

   http://localhost:5173/

🔮 Upcoming Features

• Admin Permissions: Introduce an admin permission system to manage user access levels and control over certain platform features.

🤝 Contribute

We welcome contributions! If you'd like to report a bug, suggest a new feature, or contribute to the project, please refer to the contribution guidelines to get started.

🌟 Support Us

If you find this project useful, please consider giving it a star ⭐ on GitHub. It helps the project gain visibility and motivates further development. Thank you for your support!

🧾 License

This project is licensed under the MIT License.

🌟 Acknowledgments

Special thanks to EMKC for providing the Piston API, which enables code execution functionality in the project. For more information, check out:

• Piston Repository
• Piston Documentation

---

This version is more polished, better formatted, and emphasizes the key sections in a more readable layout. Let me know if you need further adjustments!