Realtime Collaborative Code Editor

Kode Sinkronisasi: Editor Kode Kolaboratif Realtime

Perkenalan

Apakah Anda bosan mengirim cuplikan kode bolak -balik, berjuang untuk men -debug dan berkolaborasi dengan tim Anda? Tidak terlihat lagi! Kode sinkronisasi ada di sini untuk merevolusi cara Anda kode bersama. Editor kode kolaboratif yang kuat dan intuitif ini dirancang untuk memberdayakan pengembang, dan tim untuk bekerja dengan mulus secara real-time, terlepas dari lokasi mereka. Dengan kode sinkronisasi , Anda dapat membuat kode bersama, men -debug bersama, dan mengirim lebih cepat, bersama -sama.

Fitur

• Beberapa pengguna dapat bergabung dengan kamar dan mengedit kode bersama
• Perubahan tercermin secara real time
• Salin tombol untuk menyalin ID kamar ke clipboard
• Tinggalkan tombol untuk meninggalkan ruangan
• Mendukung Sintaks Sorot untuk berbagai bahasa pemrograman
• Pengguna dapat memilih tema berdasarkan preferensi mereka
• Pengguna dapat meninggalkan ruangan dan bergabung kembali nanti untuk terus mengedit
• Bergabung & Meninggalkan Pengguna juga tercermin secara real time

Prasyarat

Untuk berjalan melalui Docker

• Docker (25.0.4)
• Docker Compose (1.29.2)

Untuk berjalan secara lokal

• Node.js (v20.11.1)
• NPM (10.2.4)
• PM2 (5.3.1): Jalankan npm i -g pm2 untuk menginstal PM2 secara global

Catatan: Saya telah menggunakan NVM (v0.39.7) untuk mengelola versi node saya. Lihat dokumentasi resmi NVM untuk menginstalnya.

Tumpukan teknologi

• React.js
• Node.js
• Express.js
• Socket.io
• Codemirror
• Bereaksi-bereaksi

Instalasi

Berjalan melalui gambar Docker (sangat disarankan)

Untuk menjalankan gambar Docker, ikuti langkah -langkah di bawah ini:

1. Instal Docker di mesin Anda.
2. Tarik gambar Docker dari hub Docker dengan menjalankan docker pull mohitur/code-editor
3. Jalankan gambar Docker dengan menjalankan docker run -p 8000:8000 -p 3000:3000 -p 5000:5000 mohitur/code-editor
4. Pergi ke http://localhost:3000 untuk melihat aplikasi
5. Buat kamar dengan mengklik tombol create new room dan letakkan nama pengguna pilihan Anda 5. Salin ID Kamar dengan mengklik tombol Copy ROOM ID
6. Untuk bergabung sebagai pengguna lain membuka browser/browser-window atau tab penyamaran dan pergi ke http://localhost:3000
7. Masukkan ID kamar yang sama untuk bergabung dengan ruangan yang sama

Sekarang kedua editor Anda akan disinkronkan dan Anda dapat melihat perubahan secara real time. Coba buka ruangan yang sama di beberapa browser/browser-windows dan lihat perubahannya.

Catatan: Jika Anda menggunakan Docker di WSL2/Linux, lalu tambahkan sudo sebelum perintah Docker.

Berjalan melalui membangun gambar Docker Anda sendiri

Untuk menjalankan aplikasi menggunakan Docker, ikuti langkah -langkah di bawah ini:

1. Instal Docker di mesin Anda.
2. Kloning repositori proyek dan navigasikan ke direktori proyek.
3. Anda juga harus mengubah nilai Env di DockerFile
4. Ganti nama pengguna Anda dalam file Docker-Compose.yml.
5. Jalankan perintah Docker Compose: docker-compose up -d
6. Pergi ke http://localhost:3000 untuk melihat aplikasi
7. Ikuti Langkah 5-7 dari bagian Running Via Docker Image untuk membuat dan bergabung dengan ruangan

Berjalan secara lokal

1. Klon repositori dan cd ini ke dalamnya
2. Jalankan npm install untuk menginstal dependensi
3. Buat file .env di folder root dan salin tempel konten contoh.env, dan tambahkan kredensial yang diperlukan.
4. Untuk memulai klien aplikasi reaksi, jalankan npm start di satu terminal
5. Untuk memulai server, jalankan npm server:dev atau pm2 start server.js di terminal lain
6. Pergi ke http://localhost:3000 untuk melihat aplikasi
7. Ikuti Langkah 4-7 dari bagian Running Via Docker Image untuk membuat dan bergabung dengan ruangan

Catatan: Untuk menghentikan server Anda, tekan Ctrl+c atau jika Anda menggunakan "PM2", maka gunakan pm2 stop server.js di terminal.

Video Proyek

Project-Walkthrough.mp4

Catatan: Jika Anda menemukan bug, buat masalah di sini. Saya akan mencoba memperbaikinya sesegera mungkin :)
Jika Anda ingin memperbaikinya sendiri, jangan ragu untuk membuat permintaan tarik.

Ruang lingkup masa depan

1. Menambahkan Sigori Sintaks untuk Berbagai Bahasa
2. Menambahkan dukungan untuk banyak tema
3. Menambahkan dukungan untuk menyimpan tema dan bahasa terakhir yang dipilih oleh pengguna di penyimpanan lokal
4. Tambahkan dukungan untuk menerima atau menolak pengguna baru yang mencoba bergabung dengan ruangan
5. Tambahkan untuk mengimplementasikan fitur video dan obrolan suara di dalam editor
6. Tambahkan dukungan untuk pengunggahan file kode lokal

Kontribusi Sumber Terbuka

Jika Anda ingin memberikan kontribusi untuk proyek ini, ikuti langkah -langkah di bawah ini:

1. Garakan repositori ini
2. Kloning repositori forked
   

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

3. CD ke dalam repositori yang dikloning
4. Buat Cabang Baru
   

 git checkout -b your_branch_name

5. Membuat perubahan Anda
6. Berkomitmen dan dorong perubahan Anda
   

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

7. Terakhir, buat permintaan tarik dengan mengunjungi repositori bercabang Anda di github

Catatan: Pastikan untuk menggunakan cabang Anda sendiri saat berkontribusi.

Tentang saya

Saya Mohd Mohitur Rahaman, seorang geek teknologi, yang saat ini mengejar master dalam aplikasi komputer (tahun terakhir) dari Kiit, Bhubaneswar. Dan dengan hasrat yang mendalam untuk pengkodean dan cinta yang kuat untuk sains & teknologi, saya berdedikasi untuk mengasah keterampilan saya dan mencapai kemahiran sebagai pengembang.

Terhubung dengan saya

• LinkedIn
• GitHub