ComposeSync

A web app to compose and sync documents.

What is ComposeSync:

ComposeSync is a powerful and intuitive web application built with cutting-edge technologies, including Node.js, Express, MongoDB, Socket.io, Redis and React. With ComposeSync, users can effortlessly create, save, and edit documents online, all from the comfort of their web browser.

Designed to streamline your document management experience, ComposeSync offers a seamless and user-friendly interface. Whether you're a professional writer, a student, or someone who simply enjoys organizing their thoughts, this web app provides the perfect solution for your document creation and editing needs.

Key Features of ComposeSync:

1. Document Creation: Effortlessly create new documents with a click of a button. ComposeSync offers a clean and distraction-free writing environment, allowing you to focus solely on your content.

2. Document Editing: Edit your documents with ease using a comprehensive set of editing tools. Add images, format paragraphs, code blocks and more to make your documents visually appealing and professional.

3. Auto-Save: ComposeSync automatically saves your work every 60 seconds which can be changed in \client\src\actions\constant.js, ensuring you never lose your progress. Additionally, the app maintains a edit history.

4. Collaboration and Sharing: Collaborate with others by inviting them to edit or comment on your documents. Seamlessly share documents with colleagues, classmates, or clients to facilitate effective collaboration.

5. Cloud Storage: All your documents are securely stored in the cloud, ensuring accessibility from any device with an internet connection. Say goodbye to the hassle of transferring files between devices.

How to install:

• Easy way to install this app is to use Docker. Run the command:

docker pull ritish56/composesync

You also have to provide these environment variables:

MONGODB_URL
JWT_SECRET
EXPRESS_SERVER_PORT
UPSTASH_REDIS_URL

1. If you don't want to use docker then, clone the repo using the command:

git clone https://github.com/ritish78/ComposeSync.git

2. Then in the same terminal:

cd ComposeSync

3. Then, install all the dependencies.

npm install

4. You will also need to install the dependencies inside client folder.

cd client
npm install

5. You will need to have MongoDB URI. Also add a JWT Secret and port for Express server in .env file.
6. Then run this command to start the server:

npm run dev

Tech Stack used

• Backend: Node.js as Runtime, express for server, express-validator for validating user input
• Frontend: React Library which runs using Javascript. Redux is used for state management
• Database: MongoDB and Redis. Mongoose npm package is used to interact with MongoDB. Redis is hosted on Upstash.
• Security: Bcrypt for hashing password, JWT for verifying current user
• Websocket: Socket.io package is used for realtime communication using websocket to edit same document from more than one users.
• Test: Jest along with Supertest is used for testing. Supertest provides easy interaction with express to test the API.

Usage:

• You can use app like Postman or Insomnia to use API.
• Or, you can visit the localhost:3000 which will redirect you to login page.

API Rate Limiting:

• In this project, Redis DB is used as rate limiter. The key-value pair is essential for fast storage and retrieval of number of requests made by a user.
• In the case of user who is not signed in, the MAX_REQ_ALLOWED_OF_NOT_SIGNEDIN_PER_MINUTE is 30 requests.
• In the case of user is logged in and has a valid JWT token, the MAX_REQ_ALLOWED_OF_AUTH_USER_PER_MINUTE is 100 requests.
• Whether the user is logged in or not, the API access window for rate limiter to reset itself (WINDOW_SIZE_IN_SECONDS) is 60 seconds.
• User's IP address and User ID itself is stored as key in Redis. If user is not signed in, their's IP is stored as key, and User ID is stored as key if they are signed in.

Screenshot:

• Login Page:
  
• Dashboard:
  
• While creating a new document, you can also set an expiry date to document. Once the document reaches expiry, it will be deleted.
  
• You can create more documents and add contents to it.
• Example of a document with contents:
  
• Another example:
  
• Sharing document with another user using their email. You can also set permissions for them to view or view and edit.
  
• Dashboard gets updated with Shared With: 1 other user(s)
  
• If the document has been shared with you, then you can't delete the document. Only the author or admin can delete it. There is no delete button for this user.
  
• Author can delete the document that they have created.
  
• Edit History:
  
• You can also export your document as PDF.
  
• Editing a same document with two different instances. This GIF is showing old UI which did not have export as PDF:
  

Image Credits:

Photo