Real-Time Collaborative Editor

A simple real-time collaborative text editor built with React (frontend) and FastAPI (backend) using WebSockets for live synchronization between multiple clients.

This project demonstrates how real-time communication can be implemented in a full-stack application using a WebSocket-based architecture.

---

Features

• Real-time text synchronization between connected users
• WebSocket-based communication
• FastAPI backend for managing connections and events
• React frontend with a basic text editor interface
• Lightweight database setup using SQLAlchemy
• Simple full-stack architecture separating frontend and backend

---

Tech Stack

Frontend

• React
• JavaScript
• WebSocket client

Backend

• Python
• FastAPI
• WebSockets
• SQLAlchemy
• Redis (basic structure present)

---

Project Structure

collaborative-editor
│
├── backend
│   ├── app
│   │   ├── main.py
│   │   ├── database.py
│   │   ├── models.py
│   │   ├── redis_client.py
│   │   ├── redis_listener.py
│   │   └── websocket_manager.py
│   │
│   └── requirements.txt
│
├── frontend
│   ├── public
│   ├── src
│   │   └── App.js
│   ├── package.json
│   └── package-lock.json
│
└── README.md

---

How It Works

1. The React frontend opens a WebSocket connection with the FastAPI backend.
2. When a user edits the text, the update is sent through the WebSocket.
3. The backend broadcasts the update to all connected clients.
4. Each client updates its editor in real time.

---

Running the Project

1. Clone the repository

git clone https://github.com/Harshit-Tiwary/collaborative-editor.git
cd collaborative-editor

---

2. Start the Backend

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

Backend runs on:

http://127.0.0.1:8000

---

3. Start the Frontend

cd frontend
npm install
npm start

Frontend runs on:

http://localhost:3000

---

Learning Goals

This project was built to practice:

• Full-stack application architecture
• WebSocket based real-time communication
• FastAPI backend development
• React frontend integration
• Managing live client connections

---

Future Improvements

Possible improvements include:

• Conflict resolution for simultaneous edits
• Persistent document storage
• Authentication for users
• Redis pub/sub for scaling real-time updates
• Docker-based deployment