A real-time collaborative code editor built with React, Django, Monaco Editor, and Yjs.
- 🚀 Real-time collaborative editing
- 👥 Live cursors and user awareness
- 🎨 Syntax highlighting for multiple languages
- 📁 Document management
- 🔄 Automatic synchronization
- 💾 Persistent storage with Redis
- 🐳 Docker support
- React 18
- Monaco Editor (VS Code editor)
- Yjs (Conflict-free Replicated Data Types)
- Tailwind CSS
- Axios for API calls
- Django 4.2
- Django Channels (WebSocket support)
- Django REST Framework
- Redis (for real-time sync)
- SQLite (default database)
- Make sure Docker and Docker Compose are installed
- Run the setup:
docker-compose up --build - Access the application:
- Frontend: http://localhost:3000
- Backend API: http://localhost:8000
- Admin Panel: http://localhost:8000/admin
- Node.js 18+
- Python 3.11+
- Redis server
` cd backend
python -m venv venv
venv\Scripts\activate
source venv/bin/activate
pip install -r requirements.txt
python manage.py makemigrations python manage.py migrate
python manage.py createsuperuser
python manage.py runserver `
` cd frontend
npm install
npm start `
redis-server
collaborative-editor/
├── .gitignore
├── backend/
│ ├── .env
│ ├── collab_editor/
│ │ ├── __init__.py
│ │ ├── asgi.py
│ │ ├── settings.py
│ │ ├── urls.py
│ │ └── wsgi.py
│ ├── db.sqlite3
│ ├── Dockerfile
│ ├── editor/
│ │ ├── __init__.py
│ │ ├── admin.py
│ │ ├─
8000
─ apps.py
│ │ ├── consumers.py
│ │ ├── migrations/
│ │ │ ├── __init__.py
│ │ │ └── 0001_initial.py
│ │ ├── models.py
│ │ ├── routing.py
│ │ ├── serializers.py
│ │ ├── urls.py
│ │ └── views.py
│ ├── manage.py
│ ├── requirements.txt
│ └── staticfiles/
├── docker-compose.yml
├── frontend/
│ ├── Dockerfile
│ ├── package-lock.json
│ ├── package.json
│ ├── postcss.config.js
│ ├── public/
│ │ └── index.html
│ ├── src/
│ │ ├── App.js
│ │ ├── components/
│ │ │ ├── CollaborativeEditor.js
│ │ │ ├── CollaboratorsList.js
│ │ │ ├── DocumentList.js
│ │ │ ├── Header.js
│ │ │ └── LanguageSelector.js
│ │ ├── hooks/
│ │ │ └── useYjs.js
│ │ ├── index.css
│ │ ├── index.js
│ │ └── services/
│ │ │ └── api.js
│ └── tailwind.config.js
├── README.md
└── test.rest
- Create a Document: Click "New Document" to create a new code file
- Select Language: Choose your programming language from the dropdown
- Start Coding: Begin typing in the Monaco editor
- Collaborate: Share the document URL with others to collaborate in real-time
- See Live Cursors: Watch other users' cursors and selections in real-time
- GET /api/documents/ - List all documents
- POST /api/documents/ - Create a new document
- GET /api/documents/{id}/ - Get a specific document
- PATCH /api/documents/{id}/ - Update a document
- DELETE /api/documents/{id}/ - Delete a document
- POST /api/documents/{id}/add_collaborator/ - Add a collaborator
- ws://localhost:8000/ws/document/{document_id}/ - Real-time document synchronization
Create a .env file in the backend directory:
env DEBUG=True SECRET_KEY=your-secret-key-here REDIS_URL=redis://localhost:6379 DATABASE_URL=sqlite:///db.sqlite3 ALLOWED_HOSTS=localhost,127.0.0.1 CORS_ALLOWED_ORIGINS=http://localhost:3000
For Docker deployment, create a .env.docker file:
env DEBUG=False SECRET_KEY=your-production-secret-key REDIS_URL=redis://redis:6379 DATABASE_URL=sqlite:///db.sqlite3 ALLOWED_HOSTS=localhost,127.0.0.1,your-domain.com CORS_ALLOWED_ORIGINS=http://localhost:3000,https://your-domain.com
Backend tests:
cd backend python manage.py test
Frontend tests:
cd frontend npm test
Backend (Python): `
pip install black flake8 isort
black . isort .
flake8 . `
Frontend (JavaScript): `
npm install --save-dev prettier eslint
npm run format
npm run lint `
- Update environment variables in .env.docker
- Build and run production containers:
docker-compose -f docker-compose.prod.yml up --build -d
- Set up a production database (PostgreSQL recommended)
- Configure Redis for production
- Set up a reverse proxy (Nginx)
- Use a process manager (PM2, Supervisor, or systemd)
- Configure environment variables for production
- Fork the repository
- Create a feature branch (git checkout -b feature/amazing-feature)
- Commit your changes (git commit -m 'Add some amazing feature')
- Push to the branch (git push origin feature/amazing-feature)
- Open a Pull Request
If you encounter any issues or have questions:
- Check the Issues page
- Create a new issue with detailed information