LiveCodeHub

A real-time collaborative code editor featuring unique room generation, syntax highlighting, and auto-suggestions. Users can seamlessly edit, save, and download files while communicating through group chat

🔮 Features

• 💻 Real-time collaboration on code editing across multiple files
• 📁 Create, open, edit, save, delete, and organize files and folders
• 💾 Option to download the entire codebase as a zip file
• 🚀 Unique room generation with room ID for collaboration
• 🌍 Comprehensive language support for versatile programming
• 🌈 Syntax highlighting for various file types with auto-language detection
• 🚀 Code Execution: Users can execute the code directly within the collaboration environment, providing instant feedback and results.
• ⏱️ Instant updates and synchronization of code changes across all files and folders
• 📣 Notifications for user join and leave events
• 👥 User presence list of users currently in the collaboration session, including online/offline status indicators
• 💬 Group chatting allows users to communicate in real-time while working on code.
• 🎩 Real-time tooltip displaying users currently editing
• 💡 Auto suggestion based on programming language
• 🔠 Option to change font size and font family
• 🎨 Multiple themes for personalized coding experience
• 🎨 Collaborative Drawing: Enable users to draw and sketch collaboratively in real-time, enhancing the interactive experience of your project.

🚀 Live Preview

You can view the live preview of the project here.

💻 Tech Stack

⚙️ Installation

1. Fork this repository: Click the Fork button located in the top-right corner of this page to fork the repository.

2. Clone the repository:

   https://github.com/pnkjshahare/LiveCodeHub.git

3. Set .env file: Inside the client and server directories rename the .env.example file to .env and set the following environment variables:

   Frontend:

   VITE_BACKEND_URL=<your_server_url>

   Backend:

   PORT=3000

4. Install dependencies: Navigate to the frontend and backend directories separately and run:

    npm install

5. Start the frontend and backend servers:
   Frontend:

   cd client
   npm run dev

   Backend:

   cd server
   npm run dev

6. Access the application: Open a browser and enter the following URL:

   http://localhost:5173/