Realtime Collaborative Code Editor

Código de sincronización: editor de código colaborativo en tiempo real

Introducción

¿Estás cansado de enviar fragmentos de código de un lado a otro, luchando por depurar y colaborar con tu equipo? ¡No busques más! El código de sincronización está aquí para revolucionar la forma en que codifica juntos. Este poderoso e intuitivo editor de código colaborativo está diseñado para capacitar a los desarrolladores y equipos para trabajar sin problemas en tiempo real, independientemente de su ubicación. Con el código de sincronización , puede codificar, depurar juntos y enviar más rápido, juntos.

Características

• Múltiples usuarios pueden unirse a una habitación y editar código juntos
• Los cambios se reflejan en tiempo real
• Copiar botón para copiar la identificación de la habitación en el portapapeles
• Deja el botón para salir de la habitación
• Admite el resaltado de sintaxis para diferentes lenguajes de programación
• Los usuarios pueden elegir el tema según sus preferencias
• Los usuarios pueden salir de la habitación y volver a unirse para continuar editando
• Unirse y salir de los usuarios también se refleja en tiempo real

Requisitos previos

Para correr a través de Docker

• Docker (25.0.4)
• Docker Compose (1.29.2)

Para correr localmente

• Node.js (V20.11.1)
• NPM (10.2.4)
• PM2 (5.3.1): ejecute npm i -g pm2 para instalar PM2 a nivel mundial

Nota: He usado NVM (V0.39.7) para administrar mis versiones de nodo. Ver documentación oficial de NVM para instalarla.

Pila de tecnología

• React.js
• Nodo.js
• Express.js
• Socket.io
• Codemirror
• Reaccionar

Instalación

Ejecutando a través de Docker Image (muy recomendable)

Para ejecutar la imagen Docker, siga los pasos a continuación:

1. Instale Docker en su máquina.
2. Tire de la imagen Docker del Docker Hub ejecutando docker pull mohitur/code-editor
3. Ejecute la imagen Docker ejecutando docker run -p 8000:8000 -p 3000:3000 -p 5000:5000 mohitur/code-editor
4. Vaya a http://localhost:3000 para ver la aplicación
5. Cree una habitación haciendo clic en el botón create new room y colocar un nombre de usuario de su elección 5. Copie la ID de la habitación haciendo clic en el botón Copy ROOM ID
6. Para unirse como otro usuario, abra otro navegador/ventana del navegador o una pestaña de incógnito y vaya a http://localhost:3000
7. Ingrese la misma identificación de la habitación para unirse a la misma habitación

Ahora tanto su editor se sincronizará y puede ver los cambios en tiempo real. Intente abrir la misma habitación en múltiples navegadores/navegadores-windows y vea los cambios.

Nota: Si está utilizando Docker en WSL2/Linux, agregue sudo antes de los comandos de Docker.

Corriendo a través de la construcción de su propia imagen Docker

Para ejecutar la aplicación usando Docker, siga los pasos a continuación:

1. Instale Docker en su máquina.
2. Clonar el repositorio del proyecto y navegar al directorio del proyecto.
3. También tienes que cambiar los valores de env en Dockerfile
4. Reemplace su nombre de usuario en Docker-Compose.yml File.
5. Ejecute el comando Docker Compose: docker-compose up -d
6. Vaya a http://localhost:3000 para ver la aplicación
7. Siga los pasos 5-7 desde la sección de imagen en ejecución a través de Docker para crear y unirse a una habitación

Ejecutando localmente

1. Clonar este repositorio y CD en él
2. Ejecutar npm install para instalar las dependencias
3. Cree el archivo .env en la carpeta raíz y copie Pegue el contenido de Ejemplo.env y agregue las credenciales necesarias.
4. Para iniciar el cliente react de la aplicación, ejecute npm start en un terminal
5. Para iniciar el servidor ejecutar npm server:dev o pm2 start server.js en otro terminal
6. Vaya a http://localhost:3000 para ver la aplicación
7. Siga los pasos 4-7 desde la sección de imagen en ejecución a través de Docker para crear y unirse a una habitación

Nota: Para detener su servidor, presione Ctrl+c o si usó "PM2", luego use pm2 stop server.js en el terminal.

Video del proyecto

Project-walkthrough.mp4

Nota: Si encuentra algún error, cree un problema aquí. Intentaré arreglarlo lo antes posible :)
En caso de que quiera solucionarlo usted mismo, siéntase libre de hacer una solicitud de extracción.

Alcance futuro

1. Resaltado de sintaxis agregado para varios idiomas
2. Soporte agregado para múltiples temas
3. Se agregó soporte para guardar el último tema y idioma seleccionado por el usuario en almacenamiento local
4. Agregue soporte para aceptar o rechazar nuevos usuarios que intenten unirse a la habitación
5. Agregar para implementar la función de chat de video y voz dentro del editor
6. Agregar soporte para la carga de archivos de código local

Contribución de código abierto

Si desea contribuir a estos proyectos, siga los pasos a continuación:

1. Bifurca este repositorio
2. Clon el repositorio bifurcado
   

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

3. CD en el repositorio clonado
4. Crea una nueva rama
   

 git checkout -b your_branch_name

5. Haz tus cambios
6. Comprométete y presiona tus cambios
   

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

7. Finalmente, cree una solicitud de extracción visitando su repositorio bifurcado en GitHub

Nota: Asegúrese de usar su propia rama al contribuir.

Acerca de mí

Soy Mohd Mohitur Rahaman, un geek tecnológico, actualmente persigue una maestría en aplicaciones informáticas (último año) de Kiit, Bhubaneswar. Y con una profunda pasión por la codificación y un fuerte amor por la ciencia y la tecnología, me dedico a perfeccionar mis habilidades y lograr la competencia como desarrollador.

Conéctate conmigo

• LinkedIn
• Github