How I built a real-time collaborative IDE with video chat

How I built a real-time collaborative IDE with video chat

Piyush Garg
·May 24, 2021·

2 min read

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

Hey there, Welcome back. In this article, I would be showing you how I made a collaborative IDE with a video call. The main application of this application is that you can create a room and people can join the room. You have the ability to write markdowns on the given text area, people would see a real-time markdown preview of your content. Now, I made this only for my understanding of webRTC and SFU stuff. Nothing serious. But somehow I felt to share this project with you all.

Producer side

Producer Screen | Piyush Garg

Consumer side

Consumer screen | Piyush Garg

and it's all real-time.

Tech stack

  • Backend: Node.js & Express
  • Front-End: React.js
  • Video Confrence: WebRTC
  • Real-Time code sharing: Socket.io

Important

Now, I am deciding to implement more features such as chatting, IDE with compiling options, and way more. For that I need collaborators, and If you feel like you can collaborate with me, please drop your details in the comments section.

Also, it's really difficult to explain and show the code of the whole project, but I would be sharing the GitHub URL of the backend code. Also, I would be sharing the front-end code only with my subscribers. So, If you haven't subscribed yet, please do so.

I would try to publish a series about this application and step by step guide so that you can also build this application. Meanwhile, you all can read the webRTC series that I have published: webRTC Series by Piyush Garg.

Code link for the project: webRtc Collab Project

Installation

Open a terminal at the project's root dir and run the following commands:

  • npm install
  • npm run build
  • IP=<YOUR IP ADDRESS> npm start

and then open http://localhost:8000/.

Firstly, create a room with a name let's say 'a', and then again open ``localhost:8000``` in some other browser or incognito tab. Now just type your room name 'a' in the join section and click join room. That's it. Try to type something on the text area where you created the room and check the result on the consumer side.

Happy learning 🚀

Did you find this article valuable?

Support Piyush Garg by becoming a sponsor. Any amount is appreciated!

See recent sponsors Learn more about Hashnode Sponsors
 
Share this