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: about 1 year ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/arnavsharma2711/code-with-companion
• Owner: arnavsharma2711
• Created: 2023-02-13T18:02:53.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2025-04-06T18:49:21.000Z (about 1 year ago)
• Last Synced: 2025-04-06T19:34:44.610Z (about 1 year ago)
• Topics: reactjs, socket-io, tailwindcss
• Language: JavaScript
• Homepage: https://code-with-companion-arnavsharma2711.vercel.app/
• Size: 960 KB
• Stars: 3
• Watchers: 1
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 🤝 Code-with-Companion

> **Built with 💻 React.js | 🔌 Socket.io | 🎨 Tailwind CSS**

Welcome to **Code-with-Companion** – a collaborative coding platform designed for real-time teamwork! Share a unique link to hop on a **video chat**, code together in a built-in editor, compile in multiple languages, brainstorm on a whiteboard, and even **record the entire session** to revisit later. 🎥💬👨‍💻

🌐 **Live App**: [code-with-companion.vercel.app](https://code-with-companion-arnavsharma2711.vercel.app/)

---

## ⚙️ Prerequisites

Before running the app, make sure you have the following ready:

- 🟢 Node.js installed

- 📦 Required packages installed via:

```bash

npm i

```

---

## 🚀 Getting Started

To run the project locally in development mode:

```bash

npm start

```

Then open your browser and visit: [http://localhost:3000](http://localhost:3000)

The app supports hot-reloading 🔁 and will show lint errors in the console if any.

---

## 🧠 Features at a Glance

- 🔗 **Instant Room Sharing**: Get a unique URL to invite friends or teammates.

- 🎥 **Video & Audio Chat**: Communicate seamlessly while coding together.

- 👨‍💻 **Real-Time Collaborative Code Editor**: 

  - Supports 5 languages: `C`, `C++`, `Python 2.7`, `Python 3`, and `Java`

  - Syncs code and input changes for everyone

- 🖍️ **Interactive Whiteboard**: Visualize your thoughts and discuss ideas better.

- 📹 **Session Recorder**: Record your session and download it for later use.

- 💾 **Save Code Locally**: Keep your work saved with one click.

- 📝 **Problem Statement Tab**: Focus on solving challenges collaboratively.

---

## 📸 Screenshots

| Feature | Preview |

|--------|---------|

| 🏠 Home Screen | ![Home Screen](https://github.com/arnavsharma2711/Code-A-Thon-Programming-Pathshala/blob/main/Screenshots/Screen%20Recording.jpeg?raw=true) |

| 🧑‍🏫 Whiteboard | ![Whiteboard](https://github.com/arnavsharma2711/Code-A-Thon-Programming-Pathshala/blob/main/Screenshots/WhiteBoard.jpeg?raw=true) |

| 📑 Problem Statements | ![Problem Statements](https://github.com/arnavsharma2711/Code-A-Thon-Programming-Pathshala/blob/main/Screenshots/Problem%20Satements.jpeg?raw=true) |

| 📼 Screen Recording Output | ![Screen Recorder Output](https://github.com/arnavsharma2711/Code-A-Thon-Programming-Pathshala/blob/main/Screenshots/Screen%20Recording%20Output.jpeg?raw=true) |

| 🚫 User Video/Mic Off | ![User Video and Mic Off](https://github.com/arnavsharma2711/Code-A-Thon-Programming-Pathshala/blob/main/Screenshots/Video%20Off.jpeg?raw=true) |

---

## 🔮 Future Scope

Here’s what’s coming next:

1. ✍️ Add functionality for users to create and manage custom problem statements.

2. 🎨 UI/UX improvements for a more polished experience.

3. 🔐 Implement user authentication for personalized sessions.

---

## 📚 References & Docs

- [React.js Docs](https://reactjs.org/docs/getting-started.html)

- [React Router DOM](https://reactrouter.com/docs/en/v6)

- [Socket.io](https://socket.io/)

- [Tailwind CSS](https://tailwindcss.com/)