XOR - Realtime Collaborative Code Editor

XOR is a Realtime Collaborative Code Editor that Enables Real-time Code Collaboration. Built with Next.js, Socket.IO. It Provides a Range of Powerful Features Like Instant Code Synchronization While Code Changes to Across all the Users

Academic Information

Team Name: Red_Asgardians

• Ashraful Nuhash - 2001011040
• Nafis Hasan Arif - 2001011048

Course Name

Web Engineering Lab Course (CSE-3106)

Instructor

Md. Mynoddin, Assistant Professor, Department of CSE, RMSTU

🎥 Demo Video:

Click the image above to watch the demo video!

Behaviour of Socket.io in XOR

🚀 Key Features

✨ Real-time Collaboration

• Live Code Synchronization: Multiple users can edit code simultaneously with real-time updates
• Room-based Collaboration: Create or join coding rooms with unique room IDs
• User Presence: See who's currently in the room with real-time user indicators
• Profile System: Each user gets a unique avatar and profile in the collaboration space

</> Code Editor

• Multi-language Support: Supports multiple programming languages including:
  • JavaScript/JSX
  • TypeScript/TSX
  • HTML/CSS
  • C++
  • Java
  • Python
• Syntax Highlighting: Built-in syntax highlighting for all supported languages
• Real-time Code Sync: Instantaneous code synchronization across all users in the room

🎨 User Interface

• Modern Design: Clean, intuitive interface with dark mode support
• Responsive Layout: Works seamlessly across desktop and mobile devices
• Interactive UI Elements:
  • Animated tooltips
  • Google Gemini-style effects
  • Dynamic sidebar for room management
  • Custom moving borders and animations

📢 Room Management

• Easy Room Creation: Quick and simple process to create new coding rooms
• Room ID Sharing: Copy room ID functionality for easy sharing
• Leave Room: Graceful room exit with automatic cleanup
• Room State Management: Persistent room state across sessions

🎯 Navigation & Layout

• Breadcrumb Navigation: Easy navigation between different sections
• Sidebar Management: Collapsible sidebar with room information
• Language Selector: Easy switching between programming languages
• Team Member Display: See all team members in the collaboration space

🔥 Additional Features

• Toast Notifications: Informative notifications for user actions
• Error Handling: Robust error handling and user feedback
• Persistent Connections: WebSocket-based reliable connections
• Cross-browser Support: Works across modern web browsers

🛠️ Technical Stack

• Frontend: Next.js, React, TypeScript
• Backend: Node.js, Express
• Real-time Communication: Socket.IO
• Styling: Tailwind CSS, Radix UI
• Code Editing: Custom implementation with syntax highlighting
• State Management: React Hooks and Context
• Deployment:
  • Frontend: Vercel
  • Backend: Render

🔮 Coming Soon

• Animated tooltips in the editor
• Enhanced collaboration features
• More language support
• Additional customization options

🚀 Getting Started

1. Visit XOR Code Editor
2. Click Get Started
3. Click Generate New Room ID or Paste Your Collaborator Provided ID
4. Enter Your Name and Click Join Now
5. Share the room ID with your teammates
6. Start coding together!

💻 Local Development

# Clone the repository
git clone https://github.com/YashNuhash/XOR.git

# Install dependencies
pnpm install

# Start the development server
pnpm run dev

# In a separate terminal, You have to start the backend server
# Clone backend Repository 
git clone https://github.com/YashNuhash/XOR-backend.git

# Go to the XOR-backend folder
cd XOR-backend

# Install dependencies
npm install

# Start the backend Server
npm run dev

📝 License

MIT License

👥 Contributors

• Ashraful Nuhash
• Nafis Hasan