🚀 AI Code Collab

🌟 Real-Time Collaborative Coding Platform

AI Code Collab is a cutting-edge, real-time collaborative coding environment that brings teams together to code simultaneously. Built with modern web technologies, it features seamless multi-language support, secure authentication, and a stunning dark/light mode experience. Perfect for pair programming, coding interviews, hackathons, and team development.

---

✨ Key Features

🎯 Real-Time Collaboration

• Live Code Syncing: Multiple developers can edit code simultaneously with instant updates
• Session Management: Generate unique session IDs for instant collaboration
• Multi-User Presence: Real-time user list showing all connected collaborators
• Seamless Sharing: Copy session IDs to clipboard for easy team joining

🌐 Multi-Language Support

• JavaScript/TypeScript with autocompletion
• HTML/CSS with proper syntax highlighting
• PHP, Java, C++ for backend and systems programming
• CodeMirror 6 powered editor with rich language extensions

🔐 Secure Authentication

• JWT-based login and registration system
• bcrypt password hashing for security
• Token-based session management
• Persistent user sessions with localStorage

🎨 Stunning UI/UX

• Dark/Light Mode toggle with smooth transitions
• Responsive Design optimized for all devices
• TailwindCSS powered modern styling
• React Toastify for beautiful notifications

⚡ Performance Optimized

• Debounced code updates to reduce network load
• Socket.io for efficient real-time communication
• Next.js 14 with App Router for blazing fast performance
• Code splitting and dynamic imports

---

🏗️ Tech Stack

Frontend

Backend

Authentication & Security

---

🚀 Quick Start

Prerequisites

• Node.js 18+
• MongoDB (local or cloud)
• Git

Clone & Setup

# Clone the repository
git clone https://github.com/Jamal-09/code-collab.git
cd code-collab

Backend Setup

cd code-collab-backend
npm install

Create .env file

echo "MONGO_URI=your-mongo-uri-here" > .env
echo "JWT_SECRET=your-super-secret-jwt-key-here" >> .env
echo "PORT=5000" >> .env

npm run dev

Frontend Setup

cd ../code-collab-frontend
npm install

Create .env.local

echo "NEXT_PUBLIC_API_URL=http://localhost:5000" > .env.local

npm run dev

Access the App

• Code Collab: https://code-collab-lake.vercel.app/

🎮 Usage Guide

1. Authentication

• Register: Create a new account with username and password
• Login: Access existing account with credentials
• Auto-login: Tokens persist across browser sessions

2. Collaboration Workflow

• Generate or enter session ID
• Join session with your username
• Start coding - changes sync instantly!
• Share session ID with teammates
• Switch languages as needed

3. Language Support

• JavaScript/TypeScript: Full syntax highlighting + autocompletion
• HTML/CSS: Tag completion and styling support
• Backend Languages: PHP, Java, C++ with proper syntax
• Real-time Sync: Language changes propagate to all users

4. Features

• Session Sharing: One-click copy to clipboard
• User Presence: Live list of connected collaborators
• Theme Toggle: Dark/Light mode for optimal coding
• Responsive: Works on desktop, tablet, mobile

🏢 Project Structure

textcode-collab/
├── code-collab-frontend/ # Next.js React App
│ ├── app/
│ │ ├── components/
│ │ │ └── CodeEditor.jsx # Main collaborative editor
│ │ ├── globals.css # Tailwind + theme styles
│ │ └── page.jsx # Auth + main layout
│ ├── public/ # Screenshots & assets
│ └── package.json
├── code-collab-backend/ # Express + Socket.io API
│ ├── index.js # Main server + Socket.io
│ ├── package.json
│ └── .env # Environment variables
└── README.md # You're reading it! 🎉

🔧 Development

Running in Development

• Terminal 1 - Backend

cd code-collab-backend && npm run dev

• Terminal 2 - Frontend

cd code-collab-frontend && npm run dev

Environment Variables

• Backend (.env):

MONGO_URI=mongodb://localhost:27017/code-collab
JWT_SECRET=your-super-secret-key-min-32-chars
PORT=5000

• Frontend (.env.local):

NEXT_PUBLIC_API_URL=http://localhost:5000

• Testing Multi-User

• Open two browser tabs/windows

• Login with different accounts in each

• Generate session ID in first tab

• Join same session ID in second tab

• Watch real-time code sync! ✨

🚀 Deployment

1. Frontend (Vercel)

• Push to GitHub
• Connect to Vercel
• Set NEXT_PUBLIC_API_URL in Vercel environment
• Deploy! 🚀

2. Backend (Render/Heroku)

• Push backend to GitHub
• Connect to Render
• Set environment variables (MONGO_URI, JWT_SECRET)
• Update frontend API URL to point to deployed backend

📱 Screenshots

• Login Experience

• Dark Mode Coding

• Light Mode Elegance

• Multi-User Magic

🎯 Use Cases

• Pair Programming: Remote developers coding together
• Coding Interviews: Live coding sessions with interviewers
• Hackathons: Team coding competitions
• Education: Classroom collaborative coding
• Code Reviews: Live code walkthroughs
• Open Source: Community contribution sessions

🔒 Security

• JWT Tokens: Secure stateless authentication
• bcrypt Hashing: Strong password encryption
• Input Validation: Sanitized user inputs
• CORS Protection: Restricted origins
• Rate Limiting: Prevent abuse (can be added)

💻 Show Your Support

Give a ⭐ if this project helped you!

• Made with ❤️ and ☕ by Jamal 😀