A modern, real-time collaborative code editing platform built with Spring Boot and React

• Overview
• Features
• Architecture
• Tech Stack
• Prerequisites
• Getting Started
• Project Structure
• API Documentation
• WebSocket Events
• Configuration
• Development
• Docker Deployment
• Contributing
• License

CodeTogether is a real-time collaborative code editing platform that enables multiple developers to work together on the same codebase simultaneously. Built with modern technologies, it provides seamless synchronization, live cursor tracking, integrated chat, and presence awareness.

• Real-time Collaboration: Multiple users can edit code simultaneously with instant synchronization
• Live Presence Tracking: See who's online and what files they're working on
• Cursor Synchronization: View other users' cursor positions in real-time
• Integrated Chat: Communicate with team members without leaving the editor
• Secure Authentication: JWT-based authentication with Spring Security
• File & Folder Management: Organize your code with a hierarchical file structure
• Code Editor: Powered by CodeMirror with syntax highlighting for multiple languages

• 🔐 User Authentication & Authorization

  • JWT-based secure authentication
  • User registration and login
  • Protected API endpoints

• 📁 File & Folder Management

  • Create, read, update, and delete files and folders
  • Hierarchical folder structure
  • Room-based organization

• 👥 Real-time Collaboration

  • Multi-user code editing
  • Operational Transformation for conflict resolution
  • Live code synchronization across all connected clients

• 📍 Presence & Cursor Tracking

  • See who's currently in the room
  • Track active users on specific files
  • Real-time cursor position sharing

• 💬 Integrated Chat

  • Room-based messaging
  • Real-time message delivery via WebSocket

• 🎨 Modern Code Editor

  • Syntax highlighting (JavaScript, Java, and more)
  • Auto-completion
  • Line numbers and code folding

CodeTogether follows a modern client-server architecture with real-time communication:

┌─────────────────────────────────────────────────────────────┐
│                         Frontend                            │
│  React + TypeScript + Redux + CodeMirror + STOMP           │
└───────────────────────┬─────────────────────────────────────┘
                        │
                        │ HTTP/REST + WebSocket (STOMP)
                        │
┌───────────────────────▼─────────────────────────────────────┐
│                        Backend                              │
│   Spring Boot + Spring Security + WebSocket + JWT          │
├─────────────────────────────────────────────────────────────┤
│  Controllers │ Services │ Repositories │ Security           │
└───────────────────────┬─────────────────────────────────────┘
                        │
                        │ JPA/Hibernate
                        │
┌───────────────────────▼─────────────────────────────────────┐
│                    PostgreSQL Database                      │
│              (Users, Rooms, Files, Folders)                 │
└─────────────────────────────────────────────────────────────┘

• REST API: Traditional HTTP endpoints for CRUD operations
• WebSocket (STOMP): Real-time bidirectional communication for:
  • Code synchronization
  • Cursor position updates
  • Chat messages
  • Presence notifications

• Docker & Docker Compose: Containerization
• pgAdmin: Database management
• ESLint: Code linting
• PostCSS: CSS processing

Before running the application, ensure you have the following installed:

• Java Development Kit (JDK): Version 21 or higher
• Node.js: Version 18 or higher
• npm: Version 9 or higher
• PostgreSQL: Version 14 or higher (or use Docker)
• Maven: Version 3.8 or higher
• Docker (optional): For containerized deployment

git clone https://github.com/Rohith1905/codetogether.git
cd codetogether

Create a PostgreSQL database:

CREATE DATABASE codetogether;
CREATE USER rohith WITH PASSWORD 'your_password';
GRANT ALL PRIVILEGES ON DATABASE codetogether TO rohith;

Update backend/src/main/resources/application.yml with your database credentials:

spring:
  datasource:
    url: jdbc:postgresql://localhost:5432/codetogether
    username: rohith
    password: rohith19psql

cd backend
mvn clean install
mvn spring-boot:run

The backend will start on http://localhost:8081

cd frontend
npm install
npm run dev

The frontend will start on http://localhost:5173

Run the entire stack with Docker Compose:

cd backend
docker-compose up -d

This will start:

• Backend: http://localhost:8081
• PostgreSQL: localhost:5432
• pgAdmin: http://localhost:5050

For the frontend:

cd frontend
npm install
npm run dev

backend/
├── src/main/java/com/codetogether/backend/
│   ├── config/              # Configuration classes (Security, WebSocket, CORS)
│   ├── controller/          # REST & WebSocket controllers
│   ├── dto/                 # Data Transfer Objects
│   ├── exception/           # Custom exceptions & global handler
│   ├── mapper/              # Entity-DTO mappers (MapStruct)
│   ├── model/               # JPA entities (User, Room, File, Folder)
│   ├── repository/          # Spring Data JPA repositories
│   ├── security/            # Security filters & components
│   ├── service/             # Business logic layer
│   │   └── impl/            # Service implementations
│   ├── util/                # Utility classes (JWT, etc.)
│   └── websocket/           # WebSocket configuration & handlers
├── src/main/resources/
│   ├── db/migration/        # Flyway database migrations
│   └── application.yml      # Application configuration
└── pom.xml                  # Maven dependencies

frontend/
├── src/
│   ├── api/                 # API service layer (Axios)
│   ├── assets/              # Static assets (images, icons)
│   ├── components/          # Reusable React components
│   ├── features/            # Feature-specific modules
│   ├── hooks/               # Custom React hooks
│   ├── pages/               # Page components (Login, Dashboard, Room)
│   ├── store/               # Redux store & slices
│   ├── utils/               # Utility functions
│   ├── App.tsx              # Main application component
│   └── main.tsx             # Application entry point
├── public/                  # Public assets
├── package.json             # npm dependencies
├── vite.config.ts           # Vite configuration
├── tailwind.config.js       # TailwindCSS configuration
└── tsconfig.json            # TypeScript configuration

STOMP Endpoint: ws://localhost:8081/ws

Key configuration in application.yml:

server:
  port: 8081

spring:
  datasource:
    url: jdbc:postgresql://localhost:5432/codetogether
    username: rohith
    password: rohith19psql

jwt:
  secret: your-secret-key-here
  expiration: 86400000  # 24 hours

management:
  endpoints:
    web:
      exposure:
        include: health,info,metrics

Create .env file in frontend/:

VITE_API_BASE_URL=http://localhost:8081
VITE_WS_URL=ws://localhost:8081/ws

Backend:

cd backend
mvn test

Frontend:

cd frontend
npm run test

Frontend:

npm run lint

Backend:

mvn clean package
java -jar target/backend-0.0.1-SNAPSHOT.jar

Frontend:

npm run build
npm run preview

cd backend
docker-compose up --build

• Backend API: http://localhost:8081
• PostgreSQL: localhost:5432
• pgAdmin: http://localhost:5050
  • Email: [email protected]
  • Password: admin

CodeTogether Team

• Email: [email protected]
• GitHub: @Rohith1905