A real-time collaborative document editing application built with React, Node.js, WebSockets, and MongoDB.
- ✅ JWT Authentication - User registration and login
- ✅ Real-time Collaboration - Multiple users can edit documents simultaneously
- ✅ Live Cursors - See where other users are typing
- ✅ Presence Indicators - See who's currently editing
- ✅ Version History - Save and restore document versions
- ✅ Comments & Replies - Add comments to document sections
- ✅ Document Sharing - Share documents with other users
- ✅ Export Options - Export to PDF, DOCX, TXT, and Markdown
- ✅ Offline Support - Auto-reconnect and localStorage backup
- ✅ Collaborative Highlights - Highlight text in real-time
- Docker and Docker Compose installed on your system
- At least 4GB of available RAM
- Ports 5000, 5173, and 27017 available
cd SyncScribedocker-compose up --buildThis command will:
- Build the client, server, and MongoDB containers
- Start all services in the correct order
- Wait for MongoDB to be healthy before starting the server
Once all containers are running, open your browser and navigate to:
Client Application: http://localhost:5173
Server API: http://localhost:5000
MongoDB: localhost:27017 (if you need direct database access)
- Open the application at http://localhost:5173
- Register a new account by clicking "Register" and providing:
- Username
- Password
- Login with your credentials
- Create your first document by clicking "+ New Document"
docker-compose up -ddocker-compose downdocker-compose down -v# All services
docker-compose logs -f
# Specific service
docker-compose logs -f server
docker-compose logs -f client
docker-compose logs -f mongodocker-compose restart server
docker-compose restart client# Rebuild and restart
docker-compose up --build
# Or rebuild specific service
docker-compose build server
docker-compose up -d serverSyncScribe/
├── Client/
│ └── Client/ # React frontend (Vite)
│ ├── src/
│ │ ├── App.jsx
│ │ ├── components/
│ │ └── api/
│ └── Dockerfile
├── Server/ # Node.js backend (Express + WebSocket)
│ ├── models/
│ ├── routes/
│ ├── middleware/
│ ├── server.js
│ └── Dockerfile
├── docker-compose.yml # Docker orchestration
└── README.md
The application uses the following environment variables (configured in docker-compose.yml):
MONGO_URL- MongoDB connection stringMONGO_URI- MongoDB connection string (alias)JWT_SECRET- Secret key for JWT tokens (⚠️ Change in production!)CLIENT_URL- Frontend URL for CORS
VITE_API_URL- Backend API URLVITE_WS_URL- WebSocket server URL
If you get a port conflict error:
# Check what's using the port
netstat -ano | findstr :5000 # Windows
lsof -i :5000 # Mac/Linux
# Or change ports in docker-compose.yml# Check logs
docker-compose logs
# Rebuild from scratch
docker-compose down -v
docker-compose up --build# Check MongoDB health
docker-compose ps mongo
# Restart MongoDB
docker-compose restart mongo- Ensure
VITE_API_URLandVITE_WS_URLindocker-compose.ymlmatch your setup - Check that the server container is running:
docker-compose ps server - Check server logs:
docker-compose logs server
- Clear browser cache and localStorage
- Open browser console (F12) and check for errors
- Check server logs for DOC_SYNC messages
- Try refreshing the page
cd Server
npm install
# Create .env file with:
# MONGO_URL=mongodb://localhost:27017/realtimenotes
# JWT_SECRET=your_secret
# CLIENT_URL=http://localhost:5173
npm startcd Client/Client
npm install
# Create .env file with:
# VITE_API_URL=http://localhost:5000/api
# VITE_WS_URL=ws://localhost:5000
npm run dev- Change JWT_SECRET in
docker-compose.ymlto a strong random string - Update CORS settings in
Server/server.jsto allow only your domain - Use environment variables for sensitive data (don't hardcode)
- Enable HTTPS for WebSocket connections (wss://)
- Set up proper MongoDB authentication
- Use a reverse proxy (nginx) for production
- Configure proper logging and monitoring
For issues or questions, check the logs first:
docker-compose logs -fThis project is for educational/demonstration purposes.