Realtime Collaborative Code Editor

Code de synchronisation: éditeur de code collaboratif en temps réel

Introduction

Êtes-vous fatigué d'envoyer des extraits de code dans les deux sens, de lutter pour déboguer et collaborer avec votre équipe? Ne cherchez pas plus loin! Le code de synchronisation est là pour révolutionner la façon dont vous codez ensemble. Cet éditeur de code collaboratif puissant et intuitif est conçu pour permettre aux développeurs et aux équipes de travailler de manière transparente en temps réel, quelle que soit leur emplacement. Avec le code de synchronisation , vous pouvez coder ensemble, déboguer ensemble et expédier plus rapidement, ensemble.

Caractéristiques

• Plusieurs utilisateurs peuvent rejoindre une pièce et modifier le code ensemble
• Les modifications se reflètent en temps réel
• Copier le bouton pour copier l'ID de la pièce dans le presse-papiers
• Laisser le bouton pour quitter la pièce
• Prend en charge la mise en évidence de la syntaxe pour différents langages de programmation
• Les utilisateurs peuvent choisir le thème en fonction de leurs préférences
• Les utilisateurs peuvent quitter la pièce et rejoindre plus tard pour continuer à éditer
• La rejoindre et le départ des utilisateurs se reflète également en temps réel

Condition préalable

Pour courir via Docker

• Docker (25.0.4)
• Docker Compose (1.29.2)

Pour courir localement

• Node.js (v20.11.1)
• NPM (10.2.4)
• PM2 (5.3.1): Exécutez npm i -g pm2 pour installer PM2 à l'échelle mondiale

Remarque: J'ai utilisé NVM (V0.39.7) pour gérer mes versions de nœud. Affichez la documentation officielle de NVM pour l'installer.

Pile technologique

• React.js
• Node.js
• Express.js
• Socket.io
• Codemiror
• Réagir

Installation

Exécution via l'image docker (fortement recommandé)

Pour exécuter l'image Docker, suivez les étapes ci-dessous:

1. Installez Docker sur votre machine.
2. Tirez l'image Docker de la hub Docker en exécutant docker pull mohitur/code-editor
3. Exécutez l'image Docker en exécutant docker run -p 8000:8000 -p 3000:3000 -p 5000:5000 mohitur/code-editor
4. Allez sur http://localhost:3000 pour afficher l'application
5. Créez une pièce en cliquant sur le bouton create new room et mettre un nom d'utilisateur de votre choix 5. Copiez l'ID de la pièce en cliquant sur le bouton Copy ROOM ID
6. Pour rejoindre un autre utilisateur, ouvrez un autre navigateur / navigateur-fenêtre ou un onglet incognito et aller sur http://localhost:3000
7. Entrez la même pièce d'identité pour rejoindre la même pièce

Désormais, votre éditeur sera synchronisé et vous pouvez voir les changements en temps réel. Essayez d'ouvrir la même pièce dans plusieurs navigateurs / navigateurs-fenêtres et voyez les modifications.

Remarque: Si vous utilisez Docker dans WSL2 / Linux, ajoutez sudo avant les commandes Docker.

Courir via la construction de votre propre image Docker

Pour exécuter l'application à l'aide de Docker, suivez les étapes ci-dessous:

1. Installez Docker sur votre machine.
2. Clone le référentiel du projet et accédez au répertoire du projet.
3. Vous devez également changer les valeurs env dans le dockerfile
4. Remplacez votre nom d'utilisateur dans le fichier docker-compose.yml.
5. Exécutez la commande docker compose: docker-compose up -d
6. Allez sur http://localhost:3000 pour afficher l'application
7. Suivez les étapes 5-7 de la section d'image en cours d'exécution via Docker pour créer et rejoindre une pièce

Courir localement

1. Cloner ce référentiel et CD dedans
2. Exécutez npm install pour installer les dépendances
3. Créez un fichier .env dans le dossier racine et copiez le contenu de l'exemple.env et ajoutez les informations d'identification nécessaires.
4. Pour démarrer le client React App Run, npm start dans un terminal
5. Pour démarrer le serveur, exécutez npm server:dev ou pm2 start server.js dans un autre terminal
6. Allez sur http://localhost:3000 pour afficher l'application
7. Suivez les étapes 4-7 de la section d'image en cours d'exécution via Docker pour créer et rejoindre une pièce

Remarque: Pour arrêter votre serveur, appuyez sur Ctrl+c ou si vous avez utilisé "PM2", utilisez pm2 stop server.js dans le terminal.

Vidéo de projet

project-walkthrough.mp4

Remarque: Si vous trouvez des bogues, créez un problème ici. J'essaierai de le réparer dès que possible :)
Si vous souhaitez le réparer vous-même, n'hésitez pas à faire une demande de traction.

Portée future

1. Ajout de la syntaxe Souvante pour plusieurs langues
2. Ajout de la prise en charge de plusieurs thèmes
3. Ajout de la prise en charge de la sauvegarde du dernier thème et de la langue sélectionnés par l'utilisateur dans le stockage local
4. Ajouter un support pour accepter ou rejeter de nouveaux utilisateurs en essayant de rejoindre la salle
5. Ajouter pour implémenter la fonction de chat vidéo et vocale dans l'éditeur
6. Ajouter la prise en charge du téléchargement de fichiers de code local

Contribution open source

Si vous souhaitez contribuer à ces projets, suivez les étapes ci-dessous:

1. Fourchez ce référentiel
2. Cloner le référentiel fourchu
   

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

3. CD dans le référentiel cloné
4. Créer une nouvelle branche
   

 git checkout -b your_branch_name

5. Apporter vos modifications
6. Engager et pousser vos modifications
   

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

7. Enfin, créez une demande de traction en visitant votre référentiel fourchu sur github

Remarque: Veuillez vous assurer d'utiliser votre propre succursale lors de la contribution.

Sur moi

Je suis Mohd Mohitur Rahaman, un geek technologique, poursuivant actuellement une maîtrise en applications informatiques (dernière année) de KIIT, Bhubaneswar. Et avec une profonde passion pour le codage et un fort amour pour la science et la technologie, je me consacre à perfectionner mes compétences et à acquérir des compétences en tant que développeur.

Connectez-vous avec moi

• Liendin
• Github