RealTime Code Editor With Video

Overview

RealTime Code Editor With Video is a collaborative platform that merges live code editing with video chat, allowing developers to code together in real-time while maintaining seamless communication. With features like multi-user support and syntax highlighting, this tool is perfect for pair programming, remote team collaboration, and coding interviews.

Features

• Real-Time Code Editing: Multiple users can edit code collaboratively with instantaneous updates.
• Video Chat Integration: Built-in video chat enables real-time communication alongside coding.
• Multi-User Support: Accommodates multiple participants in a single coding session.
• Syntax Highlighting: Supports a variety of programming languages with syntax highlighting for enhanced readability.
• Cross-Platform: Works on all major devices and operating systems.

Table of Contents

• Project Setup
  • Prerequisites
  • Environment Variables for client
  • Environment Variables for server
  • Installation
• Project Structure
• socket setup
• Running the Application
• Contributing

---

Project Setup

Prerequisites

• Node.js (v14 or above)
• npm (Node package manager)
• Refer to the Socket.IO Documentation for additional insights on real-time communication.

Environment Variables for client

To configure your application with Agora and the backend, follow these steps:

1. Open your .env file in the root directory of your project.
2. Add the following environment variables:

NEXT_PUBLIC_AGORA_APP_ID=your_agora_app_id_here
NEXT_PUBLIC_CLIENT_ID=your_client_id_here
NEXT_PUBLIC_CLIENT_SECRET=your_client_secret_here

Explanation of Variables:

1. PORT: Defines the port on which the server runs.
2. NEXT_PUBLIC_AGORA_APP_ID: Your Agora App ID for real-time communication.
3. NEXT_PUBLIC_CLIENT_ID: Your API client ID for executing code.
4. NEXT_PUBLIC_CLIENT_SECRET: Your API client secret for authentication.

Environment Variables for server

To set up the server, you need to create an environment variable for the port:

1. Navigate to the server folder.

2. Create a .env file.

3. Add the following:

   PORT=3005
   

Installation

Clone this repository and navigate into the project directory:

git clone https://github.com/Lalitmax/RealTime-Code-Editor-With-Video.git
cd RealTime-Code-Editor-With-Video

Client Setup

1. Navigate to the client folder:

   cd client

2. Install the dependencies:

   npm install

Server Setup

1. Navigate to the server folder:

   cd ../server

2. Install the dependencies:

   npm install

Project Structure

• client/: Contains the frontend code using Next.js, with video and code editor components.

  

• server/: Hosts the backend using Express and Socket.IO for real-time interactions.

  

Socket Setup

In your project, the socket connection is established in the lib/socket.ts file. To set up the correct backend URL for your project, follow these steps:

1. Open the lib/socket.ts file.
2. Replace the current backend URL with your own server URL.

For example:

// lib/socket.ts
import { io, Socket } from 'socket.io-client';

// Replace the URL below with your backend URL
const socket: Socket = io('https://your-backend-url.com');  // Replace with your backend URL

export default socket;

Running the Application

Start the Client

1. Run the client in development mode:

   cd client
   npm run dev

2. The client will be accessible at http://localhost:3000.

Start the Server

1. Run the server:

   cd ../server
   npm start

2. The server will run on http://localhost:3005.

Contributing

We welcome contributions from the community! Join us in enhancing the RealTime Code Editor With Video and enjoy collaborative coding!