Realtime Collaborative Code Editor

同期コード：リアルタイムコラボレーションコードエディター

導入

コードスニペットをやり取りしたり、チームとデバッグしたり協力したりするのに苦労しているのにうんざりしていますか？もう探すことはできません！同期コードは、一緒にコーディングする方法に革命をもたらすためにここにあります。この強力で直感的なコラボレーションコードエディターは、開発者やチームがその場所に関係なく、リアルタイムでシームレスに作業できるように設計されています。同期コードを使用すると、一緒にコーディングし、一緒にデバッグし、より速く一緒に出荷できます。

特徴

• 複数のユーザーが部屋に参加してコードを一緒に編集できます
• 変更はリアルタイムで反映されます
• ボタンをコピーして、部屋IDをクリップボードにコピーします
• 部屋を出るためにボタンを残します
• さまざまなプログラミング言語の構文強調表示をサポートします
• ユーザーは、好みに基づいてテーマを選択できます
• ユーザーは部屋を離れて後で再生して編集を続けることができます
• ユーザーの参加と退去もリアルタイムで反映されています

前提条件

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
• socket.io
• Codemirror
• 反応する

インストール

Docker画像を介して実行される（強くお勧め）

Docker画像を実行するには、以下の手順に従ってください。

1. マシンにDockerをインストールします。
2. Docker HubからDockerイメージを引っ張ってdocker pull mohitur/code-editor
3. docker run -p 8000:8000 -p 3000:3000 -p 5000:5000 mohitur/code-editorを実行してDocker画像を実行する
4. http://localhost:3000にアクセスして、アプリを表示します
5. create new roomボタンをクリックして部屋を作成し、選択したユーザー名を配置します5。 Copy ROOM IDボタンをクリックして部屋IDをコピーします
6. 別のユーザーとして参加するには、別のブラウザ/ブラウザウィンドウまたはシークレットタブを開き、 http://localhost:3000にアクセスしてください
7. 同じ部屋に参加するために同じ部屋IDに入る

これで、両方の編集者が同期され、リアルタイムの変更が表示されます。複数のブラウザ/ブラウザウィンドウで同じ部屋を開いてみてください。変更を確認してください。

注： WSL2/LinuxでDockerを使用している場合は、Dockerコマンドの前にsudoを追加します。

独自のDocker画像を構築して実行します

Dockerを使用してアプリを実行するには、以下の手順に従ってください。

1. マシンにDockerをインストールします。
2. プロジェクトリポジトリをクローンし、プロジェクトディレクトリに移動します。
3. また、dockerfileのenv値を変更する必要があります
4. docker-compose.ymlファイルでユーザー名を置き換えます。
5. Docker Composeコマンドを実行： docker-compose up -d
6. http://localhost:3000にアクセスして、アプリを表示します
7. Docker Imageセクションを介してランニングから5-7の手順に従って、部屋を作成して参加する

ローカルで実行されます

1. このリポジトリとCDをクローンします
2. npm install実行して、依存関係をインストールします
3. ルートフォルダーに.ENVファイルを作成し、Example.Envのコンテンツを貼り付け、必要な資格情報を追加します。
4. Reactアプリクライアントを開始するにはnpm start 1つの端末から実行します
5. サーバーを起動するには、 npm server:devまたはpm2 start server.js
6. http://localhost:3000にアクセスして、アプリを表示します
7. Docker Imageセクションを介してランニングから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でフォークリポジトリにアクセスしてプルリクエストを作成します

注：寄付時には、必ず自分のブランチを使用してください。

私について

私は、ハイテクオタクのMohd Mohitur Ra​​hamanで、現在BhubaneswarのKiitからコンピューターアプリケーション（最終年度）の修士号を追求しています。そして、コーディングへの深い情熱と科学技術への強い愛情を抱いて、私は自分のスキルを磨き、開発者として習熟度を達成することに専念しています。

私とつながります

• LinkedIn
• github