CodeWing

CodeWing is a collaborative editor that allows several people to edit, view, compile a programming code simultaneously over a computer network. Users can edit the same code, run the code, can chat through the text box in real time.

This is our System Practicum (CS307) Group Project.

APP Sources

1. App is Deploy on GitHub - CodeWing ;). But there is chance that chat, video and whiteboard heroku servers are not working now
2. Source Code - prashant280920/CodeWing
3. PPT - Link
4. Presentation + Demo on Youtube

Our Team

1. Prashant Kumar
2. Saloni Patidar
3. Gaurav Sahitya
4. Sagar Tarafder
5. Ravi Kumar
6. Shubham Saurav

Features

1. Video Call Application: Multiple people can interact in a room to talk with each other.
2. RealTime WhiteBoard: Diffrent people can interact to explain their thoughts on a whiteboard.
3. RealTime Code Editor: Editor where different people write code in a room.
4. Code Compilation and Download: Allow compilation of code, also download it.
5. Chat Application: Allow differnt user to chat with each other in a room.

Implimentaion

Frontent

1. We have used SvelteJS for frontend.
2. To implement the Collaborating Text Editor we have used CodeMirror of Firepad.
3. Chat, Video, and White board uses WebSocjet to connect with server.

Backend

1. We have used four different server in NodeJS each of them hosted on Heroku
2. White Board Server for implementing white board.
3. Video Server for implementing Video application.
4. Chat Server for implementing chat application.
5. Peer Js PeerJS simplifies WebRTC peer-to-peer data, video, and audio calls

ScreenShot

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated. Go ahead and fork the project.

Setting Up the Environment

To setup the environment first you have to run the four different servers loaclly. Lets get started

1. Start Chat Server

1. Clone the repo - https://github.com/salon280920/chat_server
2. Install the dependencies...

cd chat_server
npm install

3. Run - npm start. Server will run locally on port 3000.

2. Start White Board Server

1. Clone the repo - https://github.com/salon280920/wb_server
2. Install the dependencies...

cd wb_server
npm install

3. Run - npm start. Server will run locally on port 2000.

3. Start Video Server and PeerJS

1. Clone the repo - https://github.com/salon280920/video_server
2. Install the dependencies...

cd video_server
npm install

3. Run - npm start. Server will run locally on port 4000.
4. Now to start the Peerjs Server. Open new terminal in the same video_server directory.
5. Install Perrjs globally

npm install -g peerjs

6. Start the peerjs server on port 3001 only. Note - Also make sure that you are conected to internet. Otherwise streaming on different tabs is not visible.

peerjs --port 3001

7. If you face error like this then open Powershell as Administrator and run Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy Unrestricted or follow this link to resolve the error

4. Now SetUp the Frontent

1. Fork the repo
2. Clone the repo - git clone https://github.com/prashant280920/CodeWing.git
3. Install the dependencies...

cd CodeWing
npm install

4. Start Rollup:

npm run dev

5. Navigate to localhost:8080. You should see your app running. Edit a component file in src, save it, and reload the page to see your changes.
6. Note - Make sure that you are connected to internet. Otherwise realtime changes are not visible.
7. Now copy the room link from browser tab and paste in new tab to see the real time changes in both tabs. Result will look linke image shown below. Also make sure