Code-Sync
Code-Sync copied to clipboard
Code Sync offers a real-time collaborative code editor featuring unique room generation, syntax highlighting, and auto-suggestions. Users can seamlessly edit, save, and download files while communicat...
Code Sync - A Realtime Code Editor
Code Sync is a collaborative, real-time code editor where users can seamlessly code together. It provides a platform for multiple users to enter a room, share a unique room ID, and collaborate on code simultaneously.
๐ฎ Features
- ๐ป Real-time collaboration on code editing across multiple files
- ๐ Open, edit, save, and delete file functionalities
- ๐พ Option to download files edited within the collaboration session
- ๐ 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
- ๐ฃ 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
-
Fork this repository: Click the Fork button located in the top-right corner of this page to fork the repository.
-
Clone the repository:
git clone https://github.com/<your-username>/Code-Sync.git
-
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
-
Install dependencies: Navigate to the frontend and backend directories separately and run:
npm install
-
Start the frontend and backend servers:
Frontend:cd client npm run dev
Backend:
cd server npm run dev
-
Access the application: Open a browser and enter the following URL:
http://localhost:5173/
๐ฎ Features for next release
- Admin Permission: Implement an admin permission system to manage user access levels and control over certain platform features.
- Search and Replace: Implement a search and replace functionality for efficient code navigation.
๐ค Contribute
We welcome contributions to make Code Sync even better! Whether you're reporting a bug, suggesting a new feature, or fixing a typo, your input is valuable to us. Follow the contribution guidelines to get started.
๐ Support Us
If you find this helpful or valuable, please consider ๐ starring the repository. It helps us gain visibility and encourages further development. We appreciate your support!
๐งพ License
This project is licensed under the MIT License.
๐ Appreciation for Resources
Special thanks to EMKC for providing the Piston API, enabling code execution. For more information, visit the following links:
Also, huge gratitude to Tldraw contributors for their amazing library. For more information about Tldraw, please visit:
โ๏ธ About Developer
Sahil Atahar |
|