🚀 CodeShare - Real-time Collaborative Code Editor

A modern, real-time collaborative code editor built with Spring Boot 4 and React 19, featuring high-performance WebSocket communication and seamless multi-user collaboration.

Features • Quick Start • Documentation • Tech Stack • Contributing

---

📸 Screenshots

Room Joiner - Welcome Page

Beautiful landing page with glassmorphism design for joining collaboration rooms

Code Editor - Collaboration Workspace

Real-time collaborative code editor with Monaco Editor, presence tracking, live synchronization, integrated terminal, and code execution capabilities

📖 Table of Contents

• Features
• Screenshots
• Prerequisites
• Quick Start
• Installation
• Usage
• Architecture
• API Documentation
• Configuration
• Project Structure
• Deployment
• Troubleshooting
• Contributing
• License

---

✨ Features

Core Functionality

• ✅ Real-time Collaboration - Multiple users can edit code simultaneously with instant synchronization
• ✅ Live Presence Tracking - See who's online in your workspace with visual indicators
• ✅ Auto-save - Automatic code saving every 30 seconds (toggleable)
• ✅ Manual Save - Save code snippets to MongoDB for persistence
• ✅ Code Export - Download code as files with proper language extensions
• ✅ Multi-language Support - JavaScript, TypeScript, Python, Java, C++, HTML, CSS, JSON, Markdown
• ✅ Monaco Editor - VS Code-like editing experience with syntax highlighting and IntelliSense

User Experience

• ✅ Toast Notifications - Real-time feedback for all actions and events
• ✅ Keyboard Shortcuts - Quick actions (Ctrl+S to save, Ctrl+K for shortcuts menu)
• ✅ Connection Status - Visual indicators for WebSocket connection state
• ✅ Modern UI - Beautiful glassmorphism design with smooth animations
• ✅ Responsive Design - Works seamlessly on different screen sizes
• ✅ Theme Support - Light and dark themes for comfortable coding

Technical Features

• ✅ STOMP WebSocket - Efficient real-time bidirectional communication
• ✅ Redis - Fast presence tracking and session management
• ✅ MongoDB - Persistent code snippet storage with versioning support
• ✅ CORS Enabled - Cross-origin support for flexible deployment
• ✅ Error Handling - Graceful error recovery and automatic reconnection
• ✅ Virtual Threads - Java 21 performance optimization for high concurrency
• ✅ RESTful API - Well-structured REST endpoints for code management

---

📋 Prerequisites

Before you begin, ensure you have the following installed:

Requirement	Version	Purpose
Java	21+ (JDK)	Backend runtime
Node.js	18+	Frontend build tool
npm	9+	Package manager
Docker	Latest (optional)	Containerized services
Redis	7.4+	Presence tracking
MongoDB	8.0+	Code storage

---

🚀 Quick Start

Option 1: Docker Compose (Recommended) ⭐

The easiest way to get started is using Docker Compose:

# Clone the repository
git clone <your-repo-url>
cd "Collaborative Code Editor"

# Start all services (Redis, MongoDB, Backend)
docker-compose up --build

This single command starts:

• Redis on port 6379
• MongoDB on port 27017
• Spring Boot backend on port 8080

Then start the frontend separately:

cd frontend
npm install
npm run dev

Option 2: Local Development

For local development with manual service setup:

1. Start Redis & MongoDB:

# Using Docker (easiest)
docker run -d -p 6379:6379 --name redis redis:7.4-alpine
docker run -d -p 27017:27017 --name mongo mongo:8.0

# Or install and run them locally

2. Start Backend:

cd backend
./mvnw spring-boot:run

3. Start Frontend:

cd frontend
npm install
npm run dev

The application will be available at http://localhost:5173

---

📦 Installation

Step-by-Step Setup

1. Clone the repository:

   git clone <your-repo-url>
   cd "Collaborative Code Editor"

2. Backend Setup:

   cd backend
   ./mvnw clean install

3. Frontend Setup:

   cd frontend
   npm install

4. Environment Configuration:

   Create backend/src/main/resources/application-local.properties:

   server.port=8080
   spring.data.redis.host=localhost
   spring.data.redis.port=6379
   spring.data.mongodb.uri=mongodb://localhost:27017/editor_db

5. Start Services:

   • Redis (port 6379)
   • MongoDB (port 27017)
   • Backend (port 8080)
   • Frontend (port 5173)

---

🎮 Usage

Getting Started

1. Start the application (backend + frontend + services)
2. Open browser to http://localhost:5173
3. Enter Room ID (e.g., "project-apollo", "team-dev")
4. Enter your name for presence tracking
5. Click "Enter Workspace" to join the collaboration space
6. Start coding! Changes sync in real-time with other users

Step 1: Join a Room

The Room Joiner page allows you to:

• Enter a unique Room ID to create or join a collaboration session
• Enter your display name (shown to other users)
• Access the workspace with a beautiful, modern interface

Step 2: Collaborate in Real-time

Once in the workspace, you can:

• Write code with syntax highlighting and IntelliSense
• See live updates from other collaborators
• View active users in the presence bar (shows "2 people online" in the screenshot)
• Use toolbar controls for language selection, saving, and exporting
• Execute code in the integrated terminal (JavaScript, Python, and more)
• Monitor connection status with real-time indicators
• Toggle auto-save functionality
• Switch between light and dark themes
• Export code with proper file extensions

Keyboard Shortcuts

Shortcut	Action
Ctrl+S / Cmd+S	Save code manually
Ctrl+K / Cmd+K	Show keyboard shortcuts
Esc	Close modals/dialogs

Features Guide

• Auto-save: Toggle in toolbar (automatically saves every 30 seconds when enabled)
• Export: Click "Export" button to download code with proper file extension
• Language Selection: Choose from dropdown in toolbar for syntax highlighting
• Copy Room ID: Click copy icon next to room name to share with collaborators
• Connection Status: Monitor live/offline indicator in the toolbar
• Presence Bar: View all active users currently in the room

---

🏗️ Architecture

System Overview

┌─────────────────┐
│  React Frontend │  (Port 5173)
│   (Vite + TS)   │
└────────┬────────┘
         │ STOMP WebSocket
         │ HTTP REST API
┌────────▼────────┐
│ Spring Boot 4   │  (Port 8080)
│   Backend       │
└────┬────────┬───┘
     │        │
     │        │
┌────▼───┐ ┌─▼────────┐
│ Redis  │ │ MongoDB  │
│Presence│ │ Storage  │
│  :6379 │ │  :27017  │
└────────┘ └──────────┘

Data Flow

1. User joins room → WebSocket connection established
2. Code changes → Broadcasted via STOMP to all connected clients
3. Presence updates → Stored in Redis for fast retrieval
4. Code saves → Persisted in MongoDB for long-term storage

---

🔌 API Documentation

REST API Endpoints

Method	Endpoint	Description
GET	/api/snippets/{roomId}	Load code snippet for a room
POST	/api/snippets	Save code snippet to database
GET	/api/snippets/{roomId}/users	Get list of active users in room

Example Request:

# Get snippet
curl http://localhost:8080/api/snippets/my-room

# Save snippet
curl -X POST http://localhost:8080/api/snippets \
  -H "Content-Type: application/json" \
  -d '{"roomId":"my-room","content":"console.log(\"Hello\");"}'

WebSocket Endpoints

Endpoint	Description
/ws-editor	WebSocket connection endpoint
/app/editor.join/{roomId}	Join a collaboration room
/app/editor.edit/{roomId}	Send code edit changes
/app/editor.cursor/{roomId}	Send cursor position updates
/app/editor.save/{roomId}	Trigger manual save
/app/editor.leave/{roomId}	Leave the collaboration room
/topic/room/{roomId}	Subscribe to room broadcasts

---

🔧 Configuration

Backend Configuration

File: backend/src/main/resources/application.properties

# Server Configuration
server.port=8080

# Redis Configuration
spring.data.redis.host=localhost
spring.data.redis.port=6379

# MongoDB Configuration
spring.data.mongodb.uri=mongodb://localhost:27017/editor_db

# WebSocket Configuration
spring.websocket.stomp.relay.enabled=true

Frontend Configuration

WebSocket URL: http://localhost:8080/ws-editor
API Base URL: http://localhost:8080/api

For production, update these in your environment variables or configuration files.

---

📁 Project Structure

Collaborative Code Editor/
├── backend/                          # Spring Boot Application
│   ├── src/
│   │   ├── main/
│   │   │   ├── java/com/example/editor/
│   │   │   │   ├── config/          # Configuration classes
│   │   │   │   │   ├── CorsConfig.java
│   │   │   │   │   ├── RedisConfig.java
│   │   │   │   │   ├── WebSocketConfig.java
│   │   │   │   │   └── WebSocketEventListener.java
│   │   │   │   ├── controller/      # REST & WebSocket controllers
│   │   │   │   │   └── EditorController.java
│   │   │   │   ├── service/         # Business logic
│   │   │   │   │   ├── CodeExecutionService.java
│   │   │   │   │   ├── CollaborationService.java
│   │   │   │   │   └── PresenceService.java
│   │   │   │   ├── repository/      # Data access layer
│   │   │   │   │   └── SnippetRepository.java
│   │   │   │   └── model/           # Data models
│   │   │   │       ├── CodeSnippet.java
│   │   │   │       └── EditorMessage.java
│   │   │   └── resources/
│   │   │       └── application.properties
│   │   └── test/                    # Test files
│   ├── Dockerfile
│   └── pom.xml
├── frontend/                         # React Application
│   ├── src/
│   │   ├── components/              # React components
│   │   │   ├── EditorContainer.jsx
│   │   │   ├── RoomJoiner.jsx
│   │   │   ├── PresenceBar.jsx
│   │   │   ├── Terminal.jsx
│   │   │   └── ...
│   │   ├── hooks/                   # Custom React hooks
│   │   │   └── useCollaboration.js
│   │   ├── contexts/                # React contexts
│   │   │   └── ThemeContext.jsx
│   │   └── utils/                   # Utility functions
│   ├── public/
│   ├── package.json
│   └── vite.config.js
├── docker-compose.yml                # Docker services configuration
├── .gitignore                        # Git ignore rules
└── README.md                         # This file

---

🚢 Deployment

Production Deployment

1. Build Backend:

   cd backend
   ./mvnw clean package -DskipTests

2. Build Frontend:

   cd frontend
   npm run build

3. Deploy Services:

   • Deploy Redis and MongoDB (use managed services like AWS ElastiCache, MongoDB Atlas)
   • Update application.properties with production URLs
   • Deploy backend JAR to server or container
   • Serve frontend build with nginx or similar

Docker Production Build

# Build and run with Docker Compose
docker-compose -f docker-compose.prod.yml up --build

Environment Variables

Set the following environment variables for production:

SPRING_DATA_REDIS_HOST=your-redis-host
SPRING_DATA_MONGODB_URI=mongodb://your-mongo-host:27017/editor_db
FRONTEND_API_URL=https://your-api-domain.com

---

🔍 Troubleshooting

Common Issues

Issue: WebSocket connection fails

• Solution: Ensure backend is running on port 8080 and CORS is properly configured

Issue: Redis connection error

• Solution: Verify Redis is running on port 6379: redis-cli ping

Issue: MongoDB connection error

• Solution: Check MongoDB is running and accessible on port 27017

Issue: Frontend can't connect to backend

• Solution: Update API URLs in frontend configuration to match backend URL

Issue: Auto-save not working

• Solution: Check WebSocket connection status and ensure MongoDB is accessible

For more detailed troubleshooting, see TROUBLESHOOTING.md in the frontend directory.

---

🛠️ Tech Stack

Frontend

• React 19 - UI library
• Vite - Build tool and dev server
• Monaco Editor - Code editor (VS Code engine)
• STOMP.js + SockJS - WebSocket client
• Tailwind CSS v4 - Utility-first CSS framework
• React Hot Toast - Toast notifications
• Lucide React - Icon library

Backend

• Spring Boot 4.0.1 - Java framework
• Spring WebSocket (STOMP) - Real-time communication
• Spring Data Redis (Reactive) - Redis integration
• Spring Data MongoDB - MongoDB integration
• Java 21 - Programming language with Virtual Threads
• Maven - Build tool

Infrastructure

• Redis 7.4 - In-memory data store (presence)
• MongoDB 8.0 - Document database (storage)
• Docker - Containerization
• Docker Compose - Multi-container orchestration

---

🤝 Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Development Guidelines

• Follow the existing code style and conventions
• Write meaningful commit messages
• Add tests for new features
• Update documentation as needed
• Ensure all checks pass before submitting PR

Reporting Issues

If you find a bug or have a suggestion, please open an issue on GitHub with:

• Clear description of the problem
• Steps to reproduce (if applicable)
• Expected vs actual behavior
• Screenshots (if relevant)

---

📝 License

This project is open source and available under the MIT License.

---

🙏 Acknowledgments

• Built with Spring Boot and React
• Code editor powered by Monaco Editor
• Icons by Lucide

---

Made with ❤️ using Spring Boot 4 & React 19 by Sai Karthik Kotala

⭐ Star this repo if you find it helpful!

Report Bug · Request Feature