https://github.com/yashnuhash/realtime-collaborative-code-editor
A Real-time Collaborative Code Editor built with Next.js, Socket.io & Express.js Which Provides a Range of Powerful Features Like Instant Code Synchronization While Code Changes to Across all the Users
https://github.com/yashnuhash/realtime-collaborative-code-editor
code-editor codemirror codemirror-editor good-first-contribution good-first-issue live-code-sharing motion-animations nextjs open-source react real-time-collaboration real-time-collaboration-with-syntax-highlighting socket-io syntax-highlighting team-coding typescript vercel websocket
Last synced: 29 days ago
JSON representation
A Real-time Collaborative Code Editor built with Next.js, Socket.io & Express.js Which Provides a Range of Powerful Features Like Instant Code Synchronization While Code Changes to Across all the Users
- Host: GitHub
- URL: https://github.com/yashnuhash/realtime-collaborative-code-editor
- Owner: YashNuhash
- Created: 2025-04-09T05:06:51.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2025-04-29T05:32:34.000Z (about 1 month ago)
- Last Synced: 2025-04-29T06:27:24.312Z (about 1 month ago)
- Topics: code-editor, codemirror, codemirror-editor, good-first-contribution, good-first-issue, live-code-sharing, motion-animations, nextjs, open-source, react, real-time-collaboration, real-time-collaboration-with-syntax-highlighting, socket-io, syntax-highlighting, team-coding, typescript, vercel, websocket
- Language: TypeScript
- Homepage: https://xor-code.vercel.app
- Size: 3.61 MB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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!
[](https://youtu.be/Kj2NOn6xkfo)
## Behaviour of Socket.io in XOR
![alt text]()
## 🚀 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](https://xor-code.vercel.app)
2. Click `Get Started`
3. Click `Generate New Room ID` or Paste Your Collaborator Provided ID
3. Enter Your Name and Click `Join Now`
4. Share the room ID with your teammates
5. Start coding together!
## 💻 Local Development
```bash
# 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](LICENSE)
## 👥 Contributors
- [Ashraful Nuhash](https://github.com/YashNuhash)
- [Nafis Hasan](https://github.com/NafisHasan2020)