DevMate AI 🚀

AI-Powered Real-Time Collaborative Coding Platform

DevMate AI is a production-ready collaborative coding platform that enables developers to code together in real time, communicate through live chat, and receive AI-powered code reviews. Built using the MERN stack, Socket.io, Monaco Editor, Google OAuth, and Groq AI, DevMate AI delivers a seamless collaborative development experience directly in the browser.

---

🌐 Live Demo

https://devmate-ai-phi.vercel.app

---

✨ Features

🔐 Authentication

• Google OAuth 2.0 Login
• JWT-Based Session Management
• Protected Routes

👨‍💻 Real-Time Collaboration

• Create Coding Rooms
• Join Existing Rooms
• Real-Time Code Synchronization
• Real-Time Language Synchronization
• Live User Count

📝 Advanced Code Editor

• Monaco Editor Integration (VS Code Engine)

• Syntax Highlighting

• Multi-Language Support

  • JavaScript
  • Python
  • Java
  • C++

• Auto Save Functionality

🤖 AI-Powered Code Review

• Bug Detection
• Improvement Suggestions
• Best Practice Recommendations
• Security Analysis
• Code Quality Scoring

💬 Team Communication

• Real-Time Chat System
• Room-Based Messaging

📂 Room Management

• Create Rooms
• Join Rooms
• View My Rooms
• Delete Rooms
• Owner-Based Access Control

---

🛠️ Tech Stack

Frontend

• React.js
• React Router DOM
• Tailwind CSS
• Axios
• Socket.io Client
• Monaco Editor
• Google OAuth

Backend

• Node.js
• Express.js
• Socket.io
• MongoDB Atlas
• Mongoose
• JWT Authentication
• Google OAuth Verification

AI Integration

• Groq API
• Llama 3.3 70B Versatile

Deployment

• Vercel (Frontend)
• Render (Backend)
• MongoDB Atlas (Database)

---

🏗️ System Architecture

Frontend (React)
       │
       ▼
Backend API (Express)
       │
       ▼
MongoDB Atlas

       ▲
       │
Socket.io Server
       │
       ▼
Connected Users

       │
       ▼
Groq AI API

---

⚡ Real-Time Collaboration Flow

User A Types Code
        │
        ▼
Socket Event
        │
        ▼
Socket.io Server
        │
        ▼
Broadcast To Room
        │
        ▼
User B Receives Update

---

🔒 Authentication Flow

Google OAuth
        │
        ▼
Google Credential Token
        │
        ▼
Backend Verification
        │
        ▼
JWT Generation
        │
        ▼
Protected Dashboard Access

---

🚀 Installation

Clone Repository

git clone https://github.com/omprakashparida/Devmate-ai.git
cd Devmate-ai

Backend Setup

cd server
npm install

Create .env

PORT=5000
MONGO_URI=your_mongodb_uri
JWT_SECRET=your_secret
GOOGLE_CLIENT_ID=your_google_client_id
GROQ_API_KEY=your_groq_api_key

Run Backend

npm run dev

Frontend Setup

cd client
npm install

Create .env

VITE_API_URL=http://localhost:5000/api
VITE_SOCKET_URL=http://localhost:5000
VITE_GOOGLE_CLIENT_ID=your_google_client_id

Run Frontend

npm run dev

---

🎯 Future Improvements

• AI Auto Fix
• Code Execution Support
• Cursor Presence Indicators
• Chat Persistence
• Video Collaboration
• Redis-Based Scaling
• Collaborative Whiteboard

---

👨‍💻 Author

Om Prakash Parida

LinkedIn: www.linkedin.com/in/om-prakash-parida-247982274

GitHub: https://github.com/omprakashparida

---

📄 License

This project is licensed under the MIT License.

---

⭐ If you found this project useful, consider giving it a star.