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
Consumer side
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 installnpm run buildIP=<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 🚀