Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/arnavsharma2711/code-with-companion

A website where users can share a special URL and invite other people to join them for a video chat.
https://github.com/arnavsharma2711/code-with-companion

reactjs socket-io tailwindcss

Last synced: 4 days ago
JSON representation

A website where users can share a special URL and invite other people to join them for a video chat.

Awesome Lists containing this project

README

        

# Code-with-Companion

> Tech Stack Used: React.js, Socket .io, Tailwind.css

A website where users can share a special URL and invite other people to join them for a video chat. The website's built-in code editor also allows users to alter one another's code and compile it in several programming languages that may be saved. Users can also draw out their ideas using a whiteboard and they can record the entire session and store it in your downloads.
## Deployment
https://code-with-companion-arnavsharma2711.vercel.app/

## Prerequisite
* You must have node.js installed in your system.
* Use the package manager to install applications prerequisite node_modules
```bash
npm i
```

## How to access the project
Run the following to command to run the app in the development mode.
```bash
npm start
```
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.

## Synopsis of the project
* The website starts by giving you a special URL where you can chat with other users via sharing this URL.
* Users can video and audio chat with ever user.
* The website can compile code in 5 different Programming Language (C, C++, Python2.7, Python 3.0, Java). The user can add inputs form the input tab.
* All code and input changes will be reflected to every user.
* User can record session and save it in there download. There is also an option of saving code as well.
* Whiteboard is also there to connect users through visualization.
* Problem Statement Tab allow users to see a Specific Problem Statement to solve.

## Screenshots
* Home Screen: ![Home Screen](https://github.com/arnavsharma2711/Code-A-Thon-Programming-Pathshala/blob/main/Screenshots/Screen%20Recording.jpeg?raw=true "Home Screen")
* Whiteboard: ![Whiteboard](https://github.com/arnavsharma2711/Code-A-Thon-Programming-Pathshala/blob/main/Screenshots/WhiteBoard.jpeg?raw=true " Whiteboard")
* Problem Statements: ![Problem Statements](https://github.com/arnavsharma2711/Code-A-Thon-Programming-Pathshala/blob/main/Screenshots/Problem%20Satements.jpeg?raw=true "Problem Statements")
* Screen Recorder Output : ![Screen Recorder Output](https://github.com/arnavsharma2711/Code-A-Thon-Programming-Pathshala/blob/main/Screenshots/Screen%20Recording%20Output.jpeg?raw=true "Screen Recorder Output")
* User Video and Mic Off:![User Video and Mic Off](https://github.com/arnavsharma2711/Code-A-Thon-Programming-Pathshala/blob/main/Screenshots/Video%20Off.jpeg?raw=true "User Video and Mic Off")
## Future Scope of this project
1. Adding functionally to add user problem statements.
2. UI Fixes.
3. Adding ways to authenticate user.

## References
* React.JS->\
https://reactjs.org/docs/getting-started.html
* React Router DOM->\
https://reactrouter.com/docs/en/v6
* socket.io->
https://socket.io/
* Tailwind->
https://tailwindcss.com/