Skip to content

imsoumik03/CoEdit_

ย 
ย 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

4 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

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
  • ๐Ÿ“ 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.

๐Ÿ’ป Tech Stack

React TypeScript React Router Tailwind CSS NodeJS ExpressJS Socket io Git GitHub

โš™๏ธ 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:

    git clone https://github.com/<your-username>/Code-Sync.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/

About

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 96.1%
  • HTML 2.4%
  • CSS 1.2%
  • JavaScript 0.3%