CodeBoard

CodeBoard is a full-stack web application designed to facilitate real-time collaboration among developers and teams. It offers a feature-rich code editor supporting numerous programming languages, a collaborative canvas for brainstorming ideas, and an integrated messaging system for seamless communication.

Features

• Real-Time Code Editor: Collaborate on code with support for all major programming languages. Our real-time code editor allows multiple users to edit the same document simultaneously, with changes reflecting instantly for all participants. This feature supports a wide array of programming languages, providing syntax highlighting and code completion for a smooth and efficient coding experience. Whether you’re writing Python, JavaScript, Java, C++, or any other popular language, CodeBoard has you covered.
• Collaborative Canvas: Brainstorm and sketch ideas together in real-time. The collaborative canvas is a shared space where users can draw, annotate, and visualize their ideas dynamically. It’s perfect for planning out workflows, designing software architecture, or sketching out concepts. The canvas updates live, ensuring all users see the changes immediately, making it a powerful tool for visual collaboration.
• Messaging System: Chat with team members within the same room. The integrated messaging feature allows users to communicate in real-time without leaving the application. Each collaboration session includes a chat room where participants can discuss ideas, share code snippets, and coordinate tasks. This helps in maintaining context and streamlining the communication process during collaborative sessions
• Multi-User Support: Multiple users can interact simultaneously with live updates. CodeBoard is designed to handle concurrent interactions seamlessly. Whether it’s editing code, brainstorming on the canvas, or sending messages, all activities are synchronized in real-time. This ensures that every participant is always on the same page, facilitating effective collaboration and reducing the chances of miscommunication.
• Syntax Highlighting: Advanced syntax highlighting for an enhanced coding experience. Our code editor comes with sophisticated syntax highlighting for all supported programming languages. This feature makes code more readable and easier to understand by using different colors and styles to represent various elements of the code, such as keywords, variables, and comments. Syntax highlighting helps in quickly identifying errors and improving overall code quality.
• Responsive Design: Works on all device sizes and types. CodeBoard is built with a responsive design to ensure that it functions smoothly across a wide range of devices, from desktops and laptops to tablets and smartphones. The user interface adapts to different screen sizes and orientations, providing a consistent and user-friendly experience no matter where you are working from.

Installation

Setup

1. Clone the repository

git clone https://github.com/Sheikh-Yawar/CodeBoard.git
cd CodeBoard

2.Install dependencies

cd backend
npm install
cd ..
cd frontend
npm install

3.Set up environment variables

Create a .env file in the frontend directory and add the following:

VITE_SERVER_URL = http://127.0.0.1:3000

4.Run the application

First go to the backend directory and then run the following command:

npm run dev

This will get the server up and running. After that open another terminal instance and go to the frontend directory and then run the following command:

npm run dev

The application should now be running on http://localhost:5173/

Contribution

We welcome contributions from the community to help make CodeBoard even better! Whether you're a developer, designer, or just an enthusiastic user, there are many ways you can help.

License

This project is licensed under the Creative Commons License. See the LICENSE file for details.