Realtime Collaborative Code Editor

Código de sincronização: editor de código colaborativo em tempo real

Introdução

Você está cansado de enviar trechos de código para frente e para trás, lutando para depurar e colaborar com sua equipe? Não procure mais! O código de sincronização está aqui para revolucionar a maneira como você codifica. Este poderoso e intuitivo editor de código colaborativo foi projetado para capacitar desenvolvedores e equipes a trabalhar perfeitamente em tempo real, independentemente de sua localização. Com o código de sincronização , você pode codificar juntos, depurar juntos e enviar mais rápido.

Características

• Vários usuários podem se juntar a uma sala e editar o código
• As mudanças são refletidas em tempo real
• Botão de copiar para copiar o ID da sala para a área de transferência
• Saia do botão para sair da sala
• Suporta o destaque da sintaxe para diferentes linguagens de programação
• Os usuários podem escolher o tema com base em suas preferências
• Os usuários podem sair da sala e se juntar mais tarde para continuar editando
• Juntar e sair dos usuários também se reflete em tempo real

Pré -requisitos

Para correr via Docker

• Docker (25.0.4)
• Docker Compose (1.29.2)

Para executar localmente

• Node.js (v20.11.1)
• NPM (10.2.4)
• PM2 (5.3.1): Execute npm i -g pm2 para instalar o PM2 globalmente

NOTA: Eu usei o NVM (v0.39.7) para gerenciar minhas versões de nó. Veja a documentação oficial do NVM para instalá -lo.

Pilha de tecnologia

• React.js
• Node.js
• Express.js
• Socket.io
• Codemirror
• React-testify

Instalação

Correndo via imagem do Docker (altamente recomendado)

Para executar a imagem do Docker, siga as etapas abaixo:

1. Instale o docker em sua máquina.
2. Puxe a imagem do docker do hub do docker, executando docker pull mohitur/code-editor
3. Execute a imagem do Docker executando docker run -p 8000:8000 -p 3000:3000 -p 5000:5000 mohitur/code-editor
4. Vá para http://localhost:3000 para ver o aplicativo
5. Crie uma sala clicando no botão create new room e colocar um nome de usuário de sua escolha 5. Copie o ID da sala clicando no botão Copy ROOM ID
6. Para participar como outro usuário, abra outro navegador/navegador-window ou uma guia Incognito e vá para http://localhost:3000
7. Digite o mesmo ID da sala para se juntar à mesma sala

Agora, o seu editor será sincronizado e você poderá ver as mudanças em tempo real. Tente abrir a mesma sala em vários navegadores/navegadores e veja as alterações.

Nota: Se você estiver usando o Docker no WSL2/Linux, adicione sudo antes dos comandos do Docker.

Correndo através da construção de sua própria imagem do Docker

Para executar o aplicativo usando o Docker, siga as etapas abaixo:

1. Instale o docker em sua máquina.
2. Clone o repositório do projeto e navegue até o diretório do projeto.
3. Você também tem que mudar os valores Env no Dockerfile
4. Substitua seu nome de usuário no arquivo docker-compose.yml.
5. Run the Docker Compose Command: docker-compose up -d
6. Vá para http://localhost:3000 para ver o aplicativo
7. Siga as etapas 5-7 da seção de imagem de corrida via Docker para criar e participar de uma sala

Executando localmente

1. Clonar este repositório e CD nele
2. Execute npm install para instalar as dependências
3. Crie o arquivo .env na pasta root e copie o conteúdo do exemplo.env e adicione as credenciais necessárias.
4. Para iniciar o cliente React App, execute npm start em um terminal
5. Para iniciar o servidor Run npm server:dev ou pm2 start server.js em outro terminal
6. Vá para http://localhost:3000 para ver o aplicativo
7. Siga as etapas 4-7 da seção Running via Docker Image para criar e participar de uma sala

Nota: Para interromper o servidor, pressione Ctrl+c ou se você usou "PM2", use pm2 stop server.js no terminal.

Vídeo do projeto

Project-walkthrough.mp4

Nota: Se você encontrar algum bug, crie um problema aqui. Vou tentar corrigi -lo o mais rápido possível :)
Caso você queira consertar você mesmo, fique à vontade para fazer uma solicitação de tração.

Escopo futuro

1. Sintaxe adicionada destaque para vários idiomas
2. Suporte adicionado para vários temas
3. Adicionado suporte para salvar o último tema e idioma selecionado pelo usuário em armazenamento local
4. Adicione suporte para aceitar ou rejeitar novos usuários tentando ingressar na sala
5. Adicionar para implementar o recurso de bate -papo de vídeo e voz dentro do editor
6. Adicione suporte para o upload de arquivo de código local

Contribuição de código aberto

Se você deseja dar contribuição para esses projetos, siga as etapas abaixo:

1. Fork este repositório
2. Clonar o repositório bifurcado
   

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

3. CD no repositório clonado
4. Crie um novo ramo
   

 git checkout -b your_branch_name

5. Faça suas alterações
6. Compromete e empurre suas mudanças
   

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

7. Por fim, crie uma solicitação de tração visitando seu repositório bifurcado no Github

Nota: Certifique -se de usar sua própria filial ao contribuir.

Sobre mim

Sou Mohd Mohitur Rahaman, um nerd de tecnologia, atualmente buscando um mestrado em aplicativos de computador (último ano) de Kiit, Bhubaneswar. E com uma profunda paixão pela codificação e um forte amor pela ciência e tecnologia, me dedico a aprimorar minhas habilidades e alcançar a proficiência como desenvolvedor.

Conecte -se comigo

• LinkedIn
• Github