Giter Club home page Giter Club logo

hades-264 / code-sync Goto Github PK

View Code? Open in Web Editor NEW

This project forked from sahilatahar/code-sync

0.0 0.0 0.0 7.21 MB

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 communicating through group chat

Home Page: https://code-sync-live.vercel.app/

License: MIT License

JavaScript 0.42% TypeScript 94.60% CSS 1.57% HTML 3.41%

code-sync's Introduction

Code Sync - A Realtime Code Editor

Preview Image

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.

GitHub contributors GitHub Repo stars GitHub issues GitHub pull requests GitHub License Visitors

๐Ÿ”ฎ 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

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

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

๐Ÿ”ฎ 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
Sahil Atahar

code-sync's People

Contributors

sahilatahar avatar dependabot[bot] avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.