Virtual Collab Studio (VC Studio)

An innovative collaborative coding platform for seamless teamwork and code sharing.
Explore the docs »

Download ZIP · Report Bug · Request Feature

🧭 Navigations for exploration

---

📌 About The Project • ✨ Key Features • 🛠️ Built With • 🎨 UI Design • 🚀 Getting Started

📋 Prerequisites • 📦 Installation • ▶️ Running the Project • 💡 Usage • 🤝 Contributing • 📧 Contact

---

📌 About The Project

"Virtual Collab Studio (VC Studio)" is a collaborative coding platform designed for teams to code together in real time, share ideas, and publish their work for the community. Built as a project by Sarthak Dhaduk, Yash Lalani, and Jigar Kalariya, it features a seamless blend of collaborative coding and a blog-style sharing interface.

The project consists of two components within one project directory Virtual-Collab-Studio:

1. VC-Studio-Server:

   • An Express.js project utilizing WebSockets and APIs for real-time collaboration.

2. VC-Studio-Client:

   • A React.js project built with Bootstrap for UI styling and API integration.

✨ Key Features

• Collaborative Workspace: Create and join real-time coding sessions using a unique workspace ID.
• Code Editor & Compiler: Work collaboratively on code with live compilation support.
• Community Blog: Share code snippets with titles and descriptions, allowing others to review and rate them.
• Real-Time Communication: Use WebSocket technology for instant updates and seamless interaction.
• Open Source: A community-driven project open for contributions and enhancements.

(back to top)

🛠️ Built With

This section list all the technologies used for building the web application.

• 
• 
• 
• 
• 
• 
• 
• 

(back to top)

🎨 UI Design

The user interface of "Virtual Collab Studio" has been meticulously crafted to provide a user-friendly and efficient collaborative coding experience. From real-time code editing to blog functionality, the design ensures an intuitive and engaging experience.

You can explore the complete UI design on Figma using the link below:

(back to top)

🚀 Getting Started

Follow these instructions to set up and run the Virtual Collab Studio project locally.

---

📋 Prerequisites

Before running the project, ensure you have the following installed:

• Node.js & npm

  • Download and install Node.js (npm comes with Node.js).
  • Verify installation:

    node -v
    npm -v

• MongoDB (Local or Cloud)

  • Install MongoDB for local use.
  • Alternatively, use MongoDB Atlas for a cloud database.
  • Start MongoDB locally:

    mongod

• Git

  • Download and install Git.
  • Verify installation:

    git --version

---

📦 Installation

Follow these steps to install and run the project locally:

1. Clone the repository:

   git clone https://git.1-hub.cnsarthak-dhaduk/Virtual-Collab-Studio.git

   cd Virtual-Collab-Studio

2. Install Dependencies for Both Backend and Frontend:

   npm run install-all

3. Configure MongoDB Connection:

   • Navigate to VC-Studio-Server/config/db.js (or wherever the connection file is located).

   • Replace the default MongoDB connection string with your local or cloud connection string.

   • Example:

     const mongoose = require("mongoose");
     
     mongoose
       .connect("mongodb://localhost:27017/yourDatabaseName", {
         useNewUrlParser: true,
         useUnifiedTopology: true,
       })
       .then(() => console.log("MongoDB Connected!"))
       .catch((err) => console.error("MongoDB Connection Error:", err));

---

▶️ Running the Project

After completing all setup steps, start both the backend and frontend simultaneously using concurrently:

npm run start

Your Virtual Collab Studio project should now be running locally! 🚀

(back to top)

💡 Usage

"Virtual Collab Studio" is designed to simplify collaborative coding and community sharing. Here are some use cases:

• Real-Time Collaboration:

  • Create or join a workspace using a unique ID and code collaboratively in real-time.

• Community Blogging:

  • Share code snippets with titles and descriptions on the blog page.
  • Rate and review posts from the community.

• Code Compilation:

  • Write and compile code directly within the collaborative editor.

(back to top)

🤝 Contributing

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

📧 Contact

Maintenance Team:

• Sarthak Dhaduk - sarthakdhaduk1111@gmail.com
• Yash Lalani - yashlalani43@gmail.com
• Jigar Kalariya - jigar.kalariya28@gmail.com

(back to top)