OpenCollab 🚀

Real-time Collaborative Code Editor for Technical Interviews & Pair Programming

A secure, production-ready platform for conducting technical interviews and pair programming sessions.
Built with Node.js, Firebase, and vanilla JavaScript for maximum performance and simplicity.

Live Demo • Quick Start • Features • Tech Stack • Contributing

---

🎯 Why OpenCollab?

✅ Zero Setup No accounts needed for candidates	⚡ Real-time Sync See changes instantly across all participants	🌍 16+ Languages JavaScript, Python, Java, C++, Go, Ruby, and more
▶️ Live Execution Run code directly in the browser	📊 Interview Analytics Track candidate behavior and performance	💬 Slack Integration Export results directly to your team

🚀 Live Demo

🎬 See It In Action

Try it now: OpenCollab Live Demo

📸 Screenshots

Beautiful Landing Page

• Animated code particles background
• Clear role selection (Interviewer vs Candidate)
• Feature highlights at a glance

Interviewer Login

• Secure JWT authentication
• Clean, professional interface
• Password reset functionality

Admin Dashboard - Session Management

• View all active/ended sessions
• Real-time session statistics
• Quick actions for each session
• Export capabilities

Live Coding Session

• Real-time collaborative editor
• Multiple language support
• Live code execution
• Participant presence indicators

Interview Notes & Feedback (Feature)

Advanced note-taking features:

• Structured feedback forms
• Real-time note synchronization
• Rating system for different skills
• Hiring recommendations
• Export to Slack/Email
• Markdown support for formatting
• Timestamped observations
• Code snippet references

Session Analytics (Feature)

• Activity timeline
• Code changes history
• Time spent analysis
• Candidate behavior tracking
• Tab switch detection
• Copy/paste monitoring

⚡ Quick Start

One-Click Deploy

Deploy your own instance in seconds:

Local Development

# Clone the repository
git clone https://github.com/humancto/CollabCode.git
cd CollabCode

# Install dependencies
npm install

# Set up environment variables
cp .env.example .env
# Edit .env with your configuration

# Generate admin password hash
node generate-password-hash.js "YourSecurePassword123!"

# Start development server
npm run dev

# Open http://localhost:3000

Setup time: Under 3 minutes! ⏱️

🎨 Features

For Interviewers

📋 Admin Dashboard

• Create unlimited interview sessions
• Manage active sessions in real-time
• View candidate activity and metrics
• Export session data to Slack/CSV
• Session recording and playback

📝 Interview Notes & Feedback System

Comprehensive note-taking during interviews:

• Real-time Notes: Take notes while watching candidates code
• Structured Feedback: Pre-defined categories for consistent evaluation
• Skill Ratings: Rate candidates on technical skills, problem-solving, communication
• Hiring Recommendations: Clear yes/no/maybe with justification
• Code Annotations: Reference specific code snippets in your notes
• Timestamp Tracking: Automatic timestamps for observations
• Markdown Support: Format notes with headings, lists, code blocks
• Template System: Use predefined interview question templates
• Collaborative Notes: Multiple interviewers can add notes simultaneously
• Export Options: Send to Slack, email, or download as PDF/JSON

📊 Analytics & Insights

• Real-time activity tracking
• Code change history
• Time spent per problem
• Candidate behavior patterns
• Performance metrics
• Tab switch detection
• Copy/paste monitoring
• Typing speed analysis

🔒 Security Features

• JWT-based authentication
• Encrypted session data
• Role-based access control
• Session isolation
• Automatic cleanup
• IP tracking for audit logs

For Candidates

💻 Professional Editor

• Syntax highlighting for 16+ languages
• Auto-completion and IntelliSense
• Multiple themes (Monokai, GitHub, Solarized, etc.)
• Customizable editor settings
• Vim/Emacs key bindings

🚀 Code Execution

• Run code in real-time
• Support for multiple languages
• Input/output handling
• Error highlighting
• Performance metrics

🤝 Collaboration Tools

• Real-time cursor tracking
• Live code synchronization
• Built-in chat (coming soon)
• Screen sharing (coming soon)
• Voice/video calls (coming soon)

🛠️ Tech Stack

• Frontend: Vanilla JavaScript, HTML5, CSS3
• Backend: Node.js, Express.js
• Database: Firebase Realtime Database
• Editor: ACE Editor with Firepad
• Authentication: JWT + bcrypt
• Deployment: Vercel (serverless functions)
• Code Execution: Piston API

📦 Project Structure

OpenCollab/
├── 📁 api/                 # Serverless API endpoints
│   ├── auth/              # Authentication endpoints
│   └── sessions/          # Session management
├── 📁 scripts/            # Client-side JavaScript
│   ├── app.js            # Main application logic
│   └── auth-api.js       # Authentication handling
├── 📁 styles/             # CSS styles
├── 📁 lib/                # Libraries and SDKs
├── 📄 index.html          # Landing page
├── 📄 app.html            # Main application
└── 📄 package.json        # Dependencies

🔧 Configuration

Environment Variables

Create a .env file with the following variables:

# Admin Credentials
ADMIN_EMAIL=admin@yourcompany.com
ADMIN_PASSWORD_HASH=<generated_hash>
JWT_SECRET=<random_secret_key>

# Firebase Configuration
FIREBASE_PROJECT_ID=your-project-id
FIREBASE_CLIENT_EMAIL=firebase-adminsdk@your-project.iam.gserviceaccount.com
FIREBASE_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\n...\n-----END PRIVATE KEY-----"

# Optional
SLACK_WEBHOOK_URL=https://hooks.slack.com/services/YOUR/WEBHOOK
APP_DOMAIN=https://your-domain.com

Firebase Setup

1. Create a new Firebase project
2. Enable Realtime Database
3. Add security rules from database.rules.secure.json
4. Generate service account key
5. Update lib/firebase-sdk.js with your config

🌟 Success Stories

"CollabCode transformed our hiring process. Setup took 5 minutes, and candidates love the clean interface."
— Sarah Chen, Engineering Manager at TechCorp

"Finally, a collaborative editor that just works. No complex setup, no accounts, just pure functionality."
— Mike Johnson, Senior Developer

"We've conducted over 80 interviews using CollabCode. The real-time sync is flawless!"
— Emily Rodriguez, Tech Lead

📊 Stats & Metrics

🤝 Contributing

We love contributions! See our Contributing Guide for details.

How to Contribute

1. 🍴 Fork the repository
2. 🌿 Create a feature branch (git checkout -b feature/AmazingFeature)
3. 💻 Make your changes
4. ✅ Run tests (npm test)
5. 📝 Commit (git commit -m 'Add AmazingFeature')
6. 📤 Push (git push origin feature/AmazingFeature)
7. 🎉 Open a Pull Request

Good First Issues

Looking for a place to start? Check out our good first issues!

🗺️ Roadmap

Version 1.1 (Q1 2025)

• Built-in video/audio calling
• AI-powered code suggestions
• Custom problem sets
• Team collaboration features

Version 1.2 (Q2 2025)

• Mobile application
• IDE plugins (VS Code, IntelliJ)
• Advanced analytics dashboard
• White-label solution

Version 2.0 (Q3 2025)

• AI interview assistant
• Automated skill assessment
• Integration with ATS systems
• Enterprise features

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• ACE Editor - The high performance code editor
• Firebase - Real-time database and hosting
• Piston - Code execution engine
• Vercel - Deployment and serverless functions

💬 Support & Community

• 📧 Email: support@opencollab.dev
• 💬 Discord: Join our community
• 🐛 Issues: Report bugs
• 💡 Ideas: Feature requests

---

⭐ Star us on GitHub — it helps!
Made with ❤️ by HumanCTO

Back to top ⬆️