Skip to content

humancto/CollabCode

Repository files navigation

OpenCollab 🚀

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

License Node Firebase Build Status Version PRs Welcome Deploy to Vercel

Stars Forks Watchers

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 DemoQuick StartFeaturesTech StackContributing


🎯 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

OpenCollab Demo

Try it now: OpenCollab Live Demo

📸 Screenshots

Beautiful Landing Page Landing Page
  • Animated code particles background
  • Clear role selection (Interviewer vs Candidate)
  • Feature highlights at a glance
Interviewer Login Interviewer Login
  • Secure JWT authentication
  • Clean, professional interface
  • Password reset functionality
Admin Dashboard - Session Management Admin Dashboard
  • View all active/ended sessions
  • Real-time session statistics
  • Quick actions for each session
  • Export capabilities
Live Coding Session 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:

Deploy with Vercel

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

JavaScript NodeJS Firebase Express JWT Vercel

  • 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

Interviews Users Languages Uptime

🤝 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

Discord Twitter Discussions


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

Buy Me A Coffee

Back to top ⬆️