Realtime Collaborative Code Editor

Код синхронизации: редактор совместного кода в реальном времени

Введение

Вы устали от отправки фрагментов кода туда -сюда, изо всех сил пытаетесь отлаживать и сотрудничать с вашей командой? Не смотри дальше! Sync Code здесь, чтобы революционизировать то, как вы кодируете вместе. Этот мощный и интуитивно понятный редактор совместного кода предназначен для расширения возможностей разработчиков, и команды легко работать в режиме реального времени, независимо от их местонахождения. С помощью кода синхронизации вы можете вместе кодировать, отлаживать вместе и быстрее отправлять.

Функции

• Несколько пользователей могут присоединиться к коду и редактировать код вместе
• Изменения отражаются в реальном времени
• Кнопка копирования, чтобы скопировать идентификатор комнаты в буфер обмена
• Оставьте кнопку, чтобы покинуть комнату
• Поддерживает выделение синтаксиса для различных языков программирования
• Пользователи могут выбрать тему на основе своих предпочтений
• Пользователи могут покинуть комнату, а позже вернемся, чтобы продолжить редактирование
• Присоединение и уход пользователей также отражается в режиме реального времени

Предварительные условия

Для бега через Docker

• Docker (25.0.4)
• Docker Compose (1.29.2)

Для бега на месте

• Node.js (v20.11.1)
• NPM (10.2.4)
• PM2 (5.3.1): запустите npm i -g pm2 для установки PM2 в мире

Примечание: я использовал NVM (v0.39.7) для управления версиями моих узлов. Посмотреть официальную документацию NVM для его установки.

Технический стек

• React.js
• Node.js
• Express.js
• Сокет.io
• Кодовой
• Реагировать

Установка

Запуск на Docker Image (настоятельно рекомендуется)

Чтобы запустить изображение Docker, следуйте шагам ниже:

1. Установите Docker на свою машину.
2. Вытащите изображение Docker из концентратора Docker, запустив docker pull mohitur/code-editor
3. Запустите изображение Docker, запустив docker run -p 8000:8000 -p 3000:3000 -p 5000:5000 mohitur/code-editor
4. Перейдите на http://localhost:3000 чтобы просмотреть приложение
5. Создайте комнату, нажав на кнопку create new room и поместите имя пользователя по вашему выбору 5. Скопируйте идентификатор комнаты, нажав на кнопку Copy ROOM ID
6. Чтобы присоединиться в качестве другого пользователя, открыть другой браузер/браузер-Window или вкладку Incognito и перейдите на http://localhost:3000
7. Введите тот же идентификатор комнаты, чтобы присоединиться к той же комнате

Теперь оба вашего редактора будут синхронизироваться, и вы можете увидеть изменения в режиме реального времени. Попробуйте открыть одну и ту же комнату в нескольких браузерах/браузерах и увидите изменения.

Примечание. Если вы используете Docker в WSL2/Linux, добавьте sudo перед командами Docker.

Бег через создание собственного изображения Docker

Чтобы запустить приложение с помощью Docker, выполните следующие шаги:

1. Установите Docker на свою машину.
2. Клонировать репозиторий проекта и перейдите в каталог проекта.
3. Также вы должны изменить значения ENV в DockerFile
4. Замените свое имя пользователя в файле docker-compose.yml.
5. Запустите команду Docker Compose: docker-compose up -d
6. Перейдите на http://localhost:3000 чтобы просмотреть приложение
7. Следуйте шагам 5-7 из секции «Запуск на докере», чтобы создать и присоединиться к комнате

Бег на местном уровне

1. Клонировать этот репозиторий и CD в него
2. Запустите npm install для установки зависимостей
3. Создайте .ENV -файл в корневой папке и скопируйте содержимое примера.env и добавьте необходимые учетные данные.
4. Чтобы запустить приложение React Client запустить npm start в одном терминале
5. Чтобы запустить сервер запустить npm server:dev или pm2 start server.js в другом терминале
6. Перейдите на http://localhost:3000 чтобы просмотреть приложение
7. Следуйте по шагам 4-7 из секции «Запуск на докере», чтобы создать и присоединиться к комнате

Примечание. Чтобы остановить свой сервер, нажмите Ctrl+c или, если вы использовали «PM2», затем используйте pm2 stop server.js в терминале.

Проект видео

Project-walkthrough.mp4

Примечание. Если вы найдете какие -либо ошибки, создайте проблему здесь. Я постараюсь исправить это как можно скорее :)
Если вы захотите исправить это самостоятельно, не стесняйтесь сделать запрос на тягу.

Будущая область

1. Добавлено выделение синтаксиса для нескольких языков
2. Добавлена ​​поддержка нескольких тем
3. Добавлена ​​поддержка для сохранения последней темы и языка, выбранных пользователем в локальном хранилище
4. Добавьте поддержку, чтобы принять или отклонить новых пользователей, пытающихся присоединиться к комнате
5. Добавить в реализацию функции видео и голосового чата внутри редактора
6. Добавить поддержку для загрузки файла локального кода

Вклад с открытым исходным кодом

Если вы хотите внести вклад в эти проекты, выполните приведенные ниже шаги:

1. Вилка этого хранилища
2. Клонировать раздвоенный репозиторий
   

 git clone https://github.com/your-github_username/Realtime-Collaborative-Code-Editor.git

3. CD в ​​клонированный репозиторий
4. Создать новую ветку
   

 git checkout -b your_branch_name

5. Внесите свои изменения
6. Сделайте и протолкните свои изменения
   

 git add . <br>
git commit -m "your commit message" <br>
git push origin your_branch_name

7. Наконец, создайте запрос на привлечение, посетив ваш раздвоенный репозиторий на GitHub

Примечание. Пожалуйста, обязательно используйте свою собственную филиал при вклад.

Обо мне

Я - Мохд Мохитур Рахаман, технический компьютер, в настоящее время занимающийся магистратурой компьютерных приложений (последний год) от Kiit, Bhubaneswar. И с глубокой страстью к кодированию и сильной любовью к науке и технике, я посвятил себя оттачиванию своих навыков и достижению мастерства в качестве разработчика.

Связаться со мной

• LinkedIn
• GitHub