Real-Time Collaborative Document Editor

A full-stack real-time collaborative document editing platform inspired by Google Docs, built with modern web technologies. Multiple users can edit documents simultaneously with changes reflected in real-time across all connected clients.

📋 Table of Contents

• Features
• Tech Stack
• Architecture
• Project Structure
• Getting Started
• API Documentation
• Deployment
• Contributing
• License

✨ Features

• Real-Time Collaboration: Multiple users can edit documents simultaneously with instant synchronization
• WebSocket Communication: Low-latency bidirectional communication for real-time updates
• Document Persistence: All documents are stored in AWS DynamoDB for reliable data persistence
• RESTful API: Clean REST API endpoints for document management operations
• Responsive UI: Modern React-based user interface with rich text editing capabilities
• Dockerized Deployment: Containerized application for easy deployment and scaling
• Reverse Proxy: Nginx configuration for efficient request routing

🛠 Tech Stack

Frontend

• React 18.3 - Modern UI library
• React Router - Client-side routing
• Quill - Rich text editor
• WebSockets - Real-time communication
• Axios - HTTP client

Backend

• FastAPI - High-performance Python web framework
• WebSockets - Real-time bidirectional communication
• Boto3 - AWS SDK for Python
• Pydantic - Data validation

Infrastructure

• AWS DynamoDB - NoSQL database for document storage
• Docker - Containerization
• Docker Compose - Multi-container orchestration
• Nginx - Reverse proxy and load balancer

🏗 Architecture

System Architecture Diagram

┌─────────────────────────────────────────────────────────────┐
│                        Client Browser                         │
│  ┌──────────────────────────────────────────────────────┐   │
│  │              React Frontend Application               │   │
│  │  - Document Editor (Quill)                            │   │
│  │  - WebSocket Client                                   │   │
│  │  - REST API Client                                    │   │
│  └──────────────────────────────────────────────────────┘   │
└────────────────────┬───────────────────┬────────────────────┘
                     │                   │
                     │ HTTP/REST         │ WebSocket
                     │                   │
┌────────────────────▼───────────────────▼────────────────────┐
│                      Nginx (Port 80)                          │
│              Reverse Proxy & Load Balancer                    │
└────────────────────┬───────────────────┬────────────────────┘
                     │                   │
         ┌───────────┘                   └───────────┐
         │                                           │
┌────────▼────────┐                        ┌─────────▼─────────┐
│  Frontend       │                        │   Backend         │
│  Container      │                        │   Container       │
│  (Port 3000)    │                        │   (Port 8000)     │
│                 │                        │                   │
│  - React App    │                        │  - FastAPI       │
│  - Static Files │                        │  - WebSocket API  │
│                 │                        │  - REST API       │
└─────────────────┘                        └────────┬──────────┘
                                                     │
                                                     │ AWS SDK
                                                     │
                                          ┌──────────▼──────────┐
                                          │   AWS DynamoDB      │
                                          │   Document Storage  │
                                          └─────────────────────┘

Data Flow Diagram

User Action → Frontend → WebSocket/REST → Backend → DynamoDB
                ↓                              ↓
            UI Update ← WebSocket Broadcast ← Backend
                ↓
        Other Connected Users

WebSocket Communication Flow

1. Client connects to WebSocket endpoint (/api/socket/ws/{document_id})
2. Backend accepts connection and adds to active connections pool
3. Client requests document: {"key": "get-document", "value": document_id}
4. Backend fetches from DynamoDB and sends document data
5. User makes changes → Client sends: {"key": "changes-received", "value": delta}
6. Backend broadcasts changes to all other connected clients
7. Client saves periodically: {"key": "save-changes", "value": document_data}
8. Backend updates DynamoDB

📁 Project Structure

real-time-collaborative-editor/
│
├── backend/                    # FastAPI Backend Application
│   ├── api/                    # API Routes
│   │   ├── __init__.py
│   │   ├── database_api.py    # DynamoDB CRUD operations
│   │   ├── socket_api.py       # WebSocket endpoints
│   │   ├── home_api.py         # Home/test endpoints
│   │   └── SocketManager.py    # WebSocket connection manager
│   │
│   ├── schema/                 # Data Models
│   │   ├── __init__.py
│   │   └── Document.py         # Document Pydantic model
│   │
│   ├── main.py                 # FastAPI application entry point
│   ├── requirements.txt        # Python dependencies
│   └── Dockerfile              # Backend container configuration
│
├── frontend/                   # React Frontend Application
│   ├── public/                 # Static assets
│   │   ├── index.html
│   │   └── ...
│   │
│   ├── src/                    # React source code
│   │   ├── components/         # React components
│   │   │   ├── Home.js         # Home page component
│   │   │   ├── TextEditor.js   # Main editor component
│   │   │   └── ...
│   │   │
│   │   ├── App.js              # Main App component
│   │   ├── index.js            # Application entry point
│   │   └── ...
│   │
│   ├── package.json            # Node.js dependencies
│   └── Dockerfile              # Frontend container configuration
│
├── config/                     # Configuration files
│   └── nginx.conf              # Nginx reverse proxy configuration
│
├── docker-compose.yml          # Multi-container orchestration
├── .gitignore                  # Git ignore rules
└── README.md                   # Project documentation

🚀 Getting Started

Prerequisites

• Docker and Docker Compose installed
• AWS Account with DynamoDB access
• AWS Access Key ID and Secret Access Key
• Node.js 18+ (for local development)
• Python 3.8+ (for local development)

Installation

1. Clone the repository

   git clone https://github.com/Anjan50/real-time-collaborative-editor.git
   cd real-time-collaborative-editor

2. Set up AWS Credentials

   Copy the example environment file and update with your credentials:

   cp .env.example .env

   Edit .env file with your AWS credentials:

   AWS_ACCESS_KEY_ID=your-access-key-id
   AWS_SECRET_ACCESS_KEY=your-secret-access-key
   AWS_DEFAULT_REGION=us-east-1
   ECR_REGISTRY=your-ecr-registry
   GIT_BRANCH=main

3. Create DynamoDB Table

   Create a table named SocketDocuments in AWS DynamoDB with:

   • Partition Key: id (String)

4. Build and Run with Docker Compose

   docker-compose up --build

5. Access the Application

   • Frontend: http://localhost
   • Backend API: http://localhost/api
   • WebSocket: ws://localhost/api/socket/ws/{document_id}

Development Setup

Backend Development

cd backend
pip install -r requirements.txt
uvicorn main:app --reload --port 8000

Frontend Development

cd frontend
npm install
npm start

📡 API Documentation

REST Endpoints

Document Operations

• GET /api/database/documents/get/{document_id} - Get document by ID
• GET /api/database/documents/getorcreate/{document_id} - Get or create document
• POST /api/database/documents - Create new document
• PUT /api/database/documents/{document_id} - Update document

Health Check

• GET /api/hello - Health check endpoint
• GET /api/home/test - Home API test endpoint

WebSocket Endpoints

• WS /api/socket/ws/{document_id} - WebSocket connection for real-time collaboration

WebSocket Message Format

Get Document:

{
  "key": "get-document",
  "value": "document_id"
}

Send Changes:

{
  "key": "changes-received",
  "value": "delta_changes"
}

Save Document:

{
  "key": "save-changes",
  "value": "document_content"
}

🚢 Deployment

Docker Deployment

The application is containerized and can be deployed using Docker Compose:

docker-compose up -d

AWS Deployment

1. Build Docker images
2. Push to AWS ECR
3. Deploy to EC2 or ECS
4. Configure Nginx reverse proxy
5. Set up environment variables

Environment Variables

Required environment variables:

• AWS_ACCESS_KEY_ID
• AWS_SECRET_ACCESS_KEY
• AWS_DEFAULT_REGION
• ECR_REGISTRY
• GIT_BRANCH

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

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

📝 License

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

👤 Author

Anjan Diyora

• GitHub: @Anjan50

🙏 Acknowledgments

• Quill.js for the rich text editor
• FastAPI for the excellent Python web framework
• AWS DynamoDB for scalable document storage

---

⭐ If you find this project helpful, please consider giving it a star!