CodeBridge — A Platform Where Coders and Their Codes Connect

CodeBridge is an interactive, real-time collaborative web application designed to provide coders a seamless platform for working together. It offers dynamic real-time code editing, code running, and multi-user collaboration, creating an optimized coding experience.

🔮 Features

• 💻 Real-time Collaborative Editing: Seamlessly edit code together in real time across multiple files.
• 📁 File Management: Create, open, edit, save, delete, and organize files and folders easily.
• 💾 Download Codebase: Option to download the entire codebase as a zip file for convenience.
• 🚀 Dynamic Room Generation: Unique room creation with room IDs for instant collaboration.
• 🌍 Multi-Language Support: Comprehensive support for a wide range of programming languages.
• 🌈 Syntax Highlighting: Automatic language detection and syntax highlighting for enhanced readability.
• 🚀 In-Editor Code Execution: Execute code directly within the platform for immediate feedback and results.
• ⏱️ Instant Synchronization: Real-time updates and code synchronization across all users and files.
• 📣 User Notifications: Receive notifications when users join or leave the collaboration session.
• 👥 User Presence Indicators: View the list of active users with their online/offline status.
• 💬 Real-Time Group Chat: Communicate instantly with team members through integrated chat.
• 🎩 Live Tooltip: See real-time updates on which users are currently editing specific sections of the code.
• 💡 Language-Specific Auto-Suggestions: Get context-aware code suggestions based on the selected language.
• 🔠 Font Customization: Adjust font size and family to personalize your coding environment.
• 🎨 Customizable Themes: Choose from a variety of themes to suit your coding style.
• ✏️ Collaborative Drawing: Sketch and draw together in real time to brainstorm or explain ideas interactively.

🚀 Live Preview

You can view the live demo of the project here.

💻 Tech Stack

⚙️ Installation

To run CodeBridge on your local machine:

1. Clone this repository:

   git clone https://github.com/SharkyBytes/CodeBridge.git

2. Set up the Backend:

   • Navigate to the server directory:

   cd server

   • Install dependencies:

   npm install

   • Run the server:

   npm run dev

   The backend will be available on http://localhost:5000.

3. Set up the Frontend:

   • Navigate to the client directory:

   cd client

   • Install dependencies:

   npm install

   • Run the frontend:

   npm run dev

   The frontend will be available on http://localhost:5173.

4. Access the Application: Open your browser and navigate to http://localhost:5173 to start coding collaboratively.

🔮 Future Features

• Admin Permissions: Implement a system for admins to manage user access and control features within the platform.
• Additional Programming Languages: Extend language support to include more languages and frameworks for broader compatibility.

🌟 Support Us

If you find CodeBridge useful, please consider 🌟 starring the repository. It helps us gain visibility and motivates us to continue improving the platform.

---