Realtime Collaborative Code Editor

Synchronisierungscode: Realtime Collaborative Code Editor

Einführung

Sind Sie es leid, Code -Snippets hin und her zu schicken und mit Ihrem Team zu debuggen und zusammenzuarbeiten? Suchen Sie nicht weiter! Sync Code ist hier, um die Art und Weise zu revolutionieren, wie Sie gemeinsam codieren. Dieser leistungsstarke und intuitive Kooperationscode-Editor soll Entwicklern und Teams unabhängig von ihrem Standort nahtlos in Echtzeit arbeiten. Mit Sync Code können Sie zusammen codieren, zusammen debuggen und schneller versenden.

Merkmale

• Mehrere Benutzer können sich einem Raum anschließen und Code gemeinsam bearbeiten
• Änderungen spiegeln sich in Echtzeit wider
• Kopieren Sie die Schaltfläche, um die Raum -ID in die Zwischenablage zu kopieren
• Lassen Sie den Knopf, um den Raum zu verlassen
• Unterstützt die Syntax -Hervorhebung für verschiedene Programmiersprachen
• Benutzer können ein Thema basierend auf ihren Vorlieben auswählen
• Benutzer können den Raum verlassen und sich später wieder anschließen, um die Bearbeitung weiter zu bearbeiten
• Der Beitritt und das Verlassen von Benutzern spiegelt sich auch in Echtzeit wider

Voraussetzungen

Zum Laufen über Docker

• Docker (25.0.4)
• Docker Compose (1.29.2)

Für lokales Laufen

• Node.js (v20.11.1)
• NPM (10.2.4)
• PM2 (5.3.1): Führen Sie npm i -g pm2 aus, um PM2 global zu installieren

Hinweis: Ich habe NVM (v0.39.7) verwendet, um meine Knotenversionen zu verwalten. Sehen Sie sich die offizielle Dokumentation der NVM an, um sie zu installieren.

Tech Stack

• React.js
• Node.js
• Express.js
• Socket.io
• Codemirror
• Reagieren

Installation

Laufen über Docker -Bild (sehr empfohlen)

Befolgen Sie die folgenden Schritte, um das Docker -Bild auszuführen:

1. Installieren Sie Docker auf Ihrem Computer.
2. Ziehen Sie das Docker-Bild aus dem Docker Hub, indem Sie docker pull mohitur/code-editor
3. Führen Sie das Docker -Bild aus, indem Sie docker run -p 8000:8000 -p 3000:3000 -p 5000:5000 mohitur/code-editor
4. Gehen Sie zu http://localhost:3000 um die App anzuzeigen
5. Erstellen Sie einen Raum, indem Sie auf die Schaltfläche create new room und einen Benutzernamen Ihrer Auswahl 5 geben. Kopieren Sie die Raum -ID, indem Sie auf die Schaltfläche Copy ROOM ID
6. Um sich als ein anderer Benutzer anzuschließen, öffnen Sie einen weiteren Browser/Browser-Window oder eine inkognito-Registerkarte und gehen Sie zu http://localhost:3000
7. Geben Sie denselben Raum -ID ein, um sich demselben Raum anzuschließen

Jetzt wird beide Redakteur synchronisiert und Sie können die Änderungen in Echtzeit sehen. Öffnen Sie denselben Raum in mehreren Browsern/Browsern-Windows und sehen Sie die Änderungen an.

Hinweis: Wenn Sie Docker in WSL2/Linux verwenden, fügen Sie sudo vor den Docker -Befehlen hinzu.

Laufen durch Erstellen eines eigenen Docker -Images

Um die App mit Docker auszuführen, befolgen Sie die folgenden Schritte:

1. Installieren Sie Docker auf Ihrem Computer.
2. Klonen Sie das Projektrepository und navigieren Sie zum Projektverzeichnis.
3. Außerdem müssen Sie die Env -Werte in der Dockerfile ändern
4. Ersetzen Sie Ihren Benutzernamen in der Datei docker-compose.yml.
5. Führen Sie den Befehl Docker Compose aus: docker-compose up -d
6. Gehen Sie zu http://localhost:3000 um die App anzuzeigen
7. Befolgen Sie die Schritte 5-7 aus dem Abschnitt über Docker-Bild, um einen Raum zu erstellen und zu verbinden

Vor Ort laufen

1. Klonen Sie dieses Repository und die CD hinein
2. Führen Sie npm install aus, um die Abhängigkeiten zu installieren
3. Erstellen Sie .Env -Datei im Stammordner und kopieren Sie den Inhalt von Beispiel.EnV und fügen Sie die erforderlichen Anmeldeinformationen hinzu.
4. So starten Sie den React App -Client -Ausführen npm start in einem Terminal
5. So starten Sie den Server -Ausführen npm server:dev oder pm2 start server.js in einem anderen Terminal
6. Gehen Sie zu http://localhost:3000 um die App anzuzeigen
7. Befolgen Sie die Schritte 4-7 aus dem Abschnitt über Docker-Bild, um einen Raum zu erstellen und zu verbinden

HINWEIS: Um Ihren Server zu stoppen, drücken Sie Ctrl+c oder wenn Sie "PM2" verwendet haben, verwenden Sie pm2 stop server.js im Terminal.

Projektvideo

Projekt-WalkThrough.mp4

Hinweis: Wenn Sie Fehler finden, erstellen Sie hier ein Problem. Ich werde versuchen, es so schnell wie möglich zu beheben :)
Wenn Sie es selbst reparieren möchten, können Sie eine Pull -Anfrage stellen.

Zukünftiger Umfang

1. Syntax -Hervorhebung für mehrere Sprachen hinzugefügt
2. Unterstützung für mehrere Themen hinzugefügt
3. Unterstützung für das Speichern des letzten Themas und die Sprache, die vom Benutzer im lokalen Speicherplatz ausgewählt wurden
4. Fügen Sie Unterstützung hinzu, um neue Benutzer zu akzeptieren oder abzulehnen, die versuchen, sich dem Raum anzuschließen
5. Hinzufügen, um Video- und Sprach -Chat -Funktionen im Editor zu implementieren
6. Fügen Sie Unterstützung für lokale Codedatei -Hochladen hinzu

Open Source -Beitrag

Wenn Sie einen Beitrag zu diesen Projekten leisten möchten, befolgen Sie die folgenden Schritte:

1. Fork dieses Repository
2. Klonen Sie das Forked Repository
   

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

3. CD in das geklonte Repository
4. Erstellen Sie einen neuen Zweig
   

 git checkout -b your_branch_name

5. Nehmen Sie Ihre Änderungen vor
6. Verpflichten Sie und drücken Sie Ihre Änderungen
   

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

7. Erstellen Sie schließlich eine Pull -Anfrage, indem Sie Ihr Forked Repository auf GitHub besuchen

HINWEIS: Bitte verwenden Sie Ihre eigene Filiale, wenn Sie einen Beitrag leisten.

Über mich

Ich bin Mohd Mohitur Rahaman, ein Tech -Geek, der derzeit einen Master in Computeranwendungen (letztes Jahr) aus Kiit, Bhubaneswar, verfolgt. Und mit einer tiefen Leidenschaft für das Codieren und einer starken Liebe zu Wissenschaft und Technologie bin ich bestrebt, meine Fähigkeiten zu verbessern und als Entwickler die Fähigkeiten zu erzielen.

Verbinde mich mit mir

• LinkedIn
• Github