AI Project Collaborator

A real-time, AI-powered collaborative development workspace built with the MERN stack.

Overview

AI Project Collaborator is a full-stack collaborative coding platform designed for modern development teams, students, and builders who want to ideate, code, and iterate together in one shared workspace. It combines real-time project chat, secure authentication, AI-assisted code generation, an interactive file tree, and in-browser server execution through WebContainers.

With Socket.IO powering instant collaboration, MongoDB handling persistent project data, Redis improving backend responsiveness, and Google Gemini AI assisting with code and project structure generation, this application delivers a practical end-to-end environment for collaborative software development.

Table of Contents

• Overview
• Features
• Tech Stack
• Architecture Overview
• Installation & Setup
• Screenshots
• Usage Guide
• Contribution Guidelines

Features

Collaboration

• 💬 Real-time project chat - Communicate instantly with collaborators inside each project workspace.
• 👥 Project-based teamwork - Create projects, invite collaborators, and work together in a shared environment.
• ⚡ Live WebSocket updates - Socket.IO keeps collaboration responsive and synchronized.

AI-Assisted Development

• 🤖 Gemini-powered code assistance - Generate code, file structures, and implementation ideas with Google Gemini AI.
• 🧠 Project-aware workflow - Use AI within the same interface where discussions, files, and execution happen.
• 📁 Structured file management - Browse, edit, and organize generated or manually created project files.

Development Experience

• 🧑‍💻 Integrated code editor - Edit project files directly from the application UI.
• 🖥️ WebContainer execution - Run server-side code in the browser and preview results through an embedded iframe.
• 🔐 JWT authentication - Secure account access and protected project workflows.
• 🚀 Redis-backed performance - Improve backend efficiency with fast caching support.

Tech Stack

Layer	Technologies
Frontend	React.js, Vite, React Router, Tailwind CSS, Axios
Backend	Node.js, Express.js, REST APIs, JWT, bcrypt, cookie-parser
Database & Cache	MongoDB, Mongoose, Redis, ioredis
Real-time	Socket.IO, socket.io-client
AI & Runtime	Google Gemini AI API, WebContainer API
Developer Tooling	ESLint, Nodemon, Morgan

Architecture Overview

AI Project Collaborator follows a MERN-based architecture with real-time and AI capabilities layered into the core workflow.

1. React frontend provides the collaborative workspace, authentication screens, project dashboard, chat interface, file explorer, editor, and runtime preview.
2. Express backend exposes APIs for authentication, project management, user management, and AI requests.
3. MongoDB stores users, project metadata, collaborators, and persistent application data through Mongoose models.
4. Redis supports backend performance optimizations and fast access patterns where caching is needed.
5. Socket.IO creates persistent real-time channels so users can exchange project messages and collaboration events instantly.
6. Gemini AI receives user prompts from the backend and returns generated code, project structures, or implementation guidance.
7. WebContainers run supported server code directly in the browser, allowing users to test and preview generated applications without leaving the workspace.

In short: users collaborate in the React UI, the Express API coordinates data and AI workflows, Socket.IO keeps teams connected live, MongoDB/Redis handle persistence and performance, and WebContainers bring execution into the browser.

Installation & Setup

Prerequisites

Make sure the following are installed and configured before running the project:

• Node.js 18 or later
• npm
• MongoDB local instance or hosted MongoDB connection string
• Redis local instance or hosted Redis connection string
• Google Gemini API key

1. Clone the Repository

git clone https://github.com/SpySparsh/AI-Project-Collabrator.git
cd AI-Project-Collabrator

2. Configure Backend Environment Variables

Create a .env file inside the backend/ directory:

PORT=5000
MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_secret_key
REDIS_URL=your_redis_connection_string
GEMINI_API_KEY=your_google_gemini_api_key

3. Install and Run the Backend

cd backend
npm install
npm start

4. Install and Run the Frontend

Open a second terminal from the project root:

cd frontend
npm install
npm run dev

The frontend will start with Vite, and the backend will run the Express server using the configured environment variables.

📸 Screenshots

1�⃣ Login Page (Screenshot 1 - login.png)

2�⃣ Register Page (Screenshot 2 - register.png)

3�⃣ Create Project (Screenshot 3 - create_project.png)

4�⃣ Add Collaborators (Screenshot 4 - add_collaborator.png)

5�⃣ Main Project UI (Chat + AI + Code Editor + Execution) (Screenshot 5 - project_page.png)

Usage Guide

1. Create an account or log in - Register a new user account or authenticate with existing credentials.
2. Create a project - Start a new collaborative workspace from the project dashboard.
3. Add collaborators - Invite teammates so they can participate in the same project.
4. Chat in real time - Use the project chat to discuss tasks, implementation details, and next steps.
5. Ask Gemini for help - Prompt the AI assistant to generate code, scaffold files, or suggest project structure.
6. Review and edit files - Use the file tree and editor to inspect, refine, and maintain generated code.
7. Run the project - Execute supported server code through the WebContainer-powered runtime and preview it in the embedded iframe.

Contribution Guidelines

Contributions are welcome and appreciated. To propose an improvement:

1. Fork the repository.
2. Create a feature branch:

git checkout -b feature/your-feature-name

3. Commit your changes:

git commit -m "Add your feature description"

4. Push the branch to your fork:

git push origin feature/your-feature-name

5. Open a Pull Request with a clear summary of your changes.

Please keep pull requests focused, document meaningful changes, and verify that the frontend and backend still run locally before submitting.

---

Built with care by Sparsh Sharma

If this project helps you, consider starring the repository.