Code Collab is a real-time collaborative coding platform designed to facilitate seamless teamwork among developers. The application is built using Next.js, leveraging modern web technologies and a robust backend to provide an intuitive and efficient coding environment. The platform supports multiple programming languages, including C, C++, Python, Node.js, and React, allowing users to create and join coding sessions in their preferred language.
- Join a Room: The base route "/" features a Card component where users can enter a room ID and username to join an existing coding session.
- Create a Room: Users can create a new room by clicking the "Create one" button, which changes the card's heading to "Create a Room" and provides input fields for room ID, username, and a language selection combobox.
- Language Selection: Users can select from supported languages (C, C++, Python, Node.js, React) to initialize their coding environment.
- Container Management: Upon creating a room, a new container is spun up, and the base code is copied from an AWS S3 store to the container using Next.js server actions.
- Real-Time Code Collaboration: The main editor page at "editor/:roomId" is equipped with @monaco-editor/react, enabling real-time code editing.
- App Bar: The top app bar includes the title "Code Collab" and a theme toggle button.
- Sidebar:
- File Tab: Contains a basic file tree component allowing users to create and delete files and folders.
- Console Tab: Features an iframe for displaying server output and an xterm terminal component connected to the backend via socket.io and node-pty.
- Y.js Integration: The @monaco-editor/react editor is connected to Y.js using y-monaco and y-socket.io, enabling real-time collaborative editing.
- File Synchronization: When a room is created, files from the S3 base/ directory are copied to code/ and transferred to the container. The files are read using the fs module and sent to the client through a socket.io connection.
- Y.Doc Management: Each coding session creates a Y.Doc() with the roomId as its name. Each file in the session is represented as a y.Text() in the Y.Doc().
- Frontend: Next.js, @monaco-editor/react, shadcn/ui, yjs, y-monaco, y-socket.io, TurboRepo
- Backend: Node.js, Express, socket.io, node-pty, AWS S3
- Containerization: Docker (for container management)
- Real-Time Collaboration: Y.js (for real-time data synchronization)
- Clone the repository:
git clone https://github.com/McACE007/Code-Collab.git
- Install dependencies:
cd Code-Collab npm install
- Set up environment variables:
Create a
.env
file in the root directory of and add your configuration details, including AWS S3 credentials and other necessary settings. - Run the development server:
npm run dev
- Access the application:
Open your browser and navigate to
http://localhost:3000
.
Code Collab aims to provide a robust platform for developers to collaborate in real-time, making coding together as seamless and productive as possible. We look forward to your feedback and contributions to improve the platform further.
Join a Room | Editor Page |
---|---|
![]() |
![]() |
Editor Page with FileTree | Editor Page with Console |
---|---|
![]() |
![]() |