Multi-User Distributed Text Editor

This is a Distributed Computing Project in the Faculty of Engineering, Ain Shams University; for Spring 2022.

Table of Contents

1. Introduction
2. Project Description
3. Getting Started
4. Beneficiaries of The Project
5. System Architecture and Design
6. Testing Scenarios and Results
7. End-User Guide
8. Youtube Video
9. Milestones
10. Acknowledgments

Introduction

Real-time collaboration makes work go faster, encourages everyone to participate, and may lead to great outcomes. So, our goal is to build a Shared document editing, in the style of Google docs.

Built With

Project Description

We were asked to design, implement, and thoroughly test a distributed system. Our assigned task was a multi-user distributed text editor. Our output is a responsive web app that lets you edit and save docs on the go. Changes are persistent and the document gets saved automatically in real time. It is a rich text editor with smart editing and styling tools to help you easily format text and paragraphs.

Link to the Web App

Link to the Web App with Redis

Getting Started

Firstly clone this repo

Prepare environment

Then, you need to install all dependencies and devDependencies from the package.json files: navigate to client folder and run the following command then navigate to server folder and run it again.

npm i

Run project

Go to server folder and run the following command

npm run devStart

OR

nodemon server.js

Go to client folder and run the following command

npm start

Finally the app should be running on your localhost 3000

(back to top)

Beneficiaries of The Project

All kinds of people who want to work collaboratively could benefit from this project. It allows them to create content, collaborate with their friends, family, or colleagues, and get things done. This tool could help empower all sorts of technical, business, and non-technical teams to collaborate at high velocity. It allows them to respond to changes fast without the need to keep sending the document through different channels.

System Architecture and Design

Our architecture is a three-tier layered architecture where a Client is deployed in a tier, the server on different tier, and database/cache is in a separate tier. Calls between the layers are done through socket api calls.

Testing Scenarios and Results

Several Scenarios were tested including:

• Editing functionalities are working properly
• Incrementing the number of users as users are connected and decrementing them as users are disconnected and dispalying the output correctly.
• Each new document is defined by a differrent Id generated randomly.
• Synchronization between users; changes are displayed real-time.
• Fault Handling; Error displayed to user when internet is disconnected and user is prevented from editing.
• Fault Handling; 3 databases working properly so that when one falls the other works.
• Caching working properly using Redis to reduce API calls to the database.

End-User Guide

Step 1: This project is a web app, to use this project you go to one of the following two links :

Link to the Web App

Link to the Web App with Redis

Step 2: When the website opens it shows a landing page as the one below

Step 3: As you open the document you’ll find the following

• The Copy to Clipboard button copies the Id of the document if you want to pass it to some one this is an easy shortcut to copy it.
• The Number of Current Users shows you how many users are working of the document in the time being.
• Then you have the toolbar this contains the options you need to edit your document.

Youtube Video

For Video Click Here

Milestones

• Take time to search for components that can be used, any libraries and frameworks that would help us in our implementation and design.
• Implemented Client-Server model to communicate with each other’s using sockets where:
  • • Initialized client and server sides
  • • Initiated the server to get changes and allow multi-users mode
  • • Synchronize multiple instances of the same document together
  • • Created Local database using mongo
• Changing the local database to be global and replicated. Added functionality of Number of users in the system. Added local caching using Redis
• Globalizing Redis Caching instead of being local to prepare the system to be deployed. Added Landing page, handled internet connection faults. And Finally, Deploying the system.

(back to top)

Acknowledgments

Special Thanks to

• Course Instructor: Prof. Dr. Ayman Bahaa
• Course Teaching Assistant: Eng. Mostafa Ashraf