Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shubz224/quilledit
QuillEdit is a Google Docs-like tool that allows users to create, edit, and format documents in real-time.
https://github.com/shubz224/quilledit
mongodb quilljs react socket-io
Last synced: 17 days ago
JSON representation
QuillEdit is a Google Docs-like tool that allows users to create, edit, and format documents in real-time.
- Host: GitHub
- URL: https://github.com/shubz224/quilledit
- Owner: Shubz224
- Created: 2024-04-07T17:23:49.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-09-23T10:17:01.000Z (5 months ago)
- Last Synced: 2024-11-29T15:59:20.902Z (3 months ago)
- Topics: mongodb, quilljs, react, socket-io
- Language: JavaScript
- Homepage:
- Size: 931 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# QuillEdit - Collaborative Document Editor
![Project Logo or Intro Image](./assets/Screenshot%20(94).png)
## 📄 About
**QuillEdit** is a Google Docs-like tool that allows users to create, edit, and format documents in real-time. Users can access a document via a unique document ID and share the link with others for collaborative editing. All changes are synchronized in real-time using **Socket.IO**, ensuring that multiple users can edit the same document simultaneously from different locations.
## 🛠️ How It Works
1. A user visits QuillEdit, and a blank document is generated with a unique ID.
2. Users can edit and format the document using the **Quill text editor** interface.
3. The document can be accessed later using the same document ID from the URL.
4. Changes made by any user are reflected in real-time for others using **Socket.IO**, enabling seamless collaboration across different devices.
5. Multiple users can edit the document at the same time from different locations.## 🚀 Features
- Real-time collaborative editing using **Socket.IO**.
- Document can be accessed using a unique ID.
- Users can format the text and save edits.
- Seamless integration of **Quill** text editor for rich-text formatting.
- Automatically saves document changes for later access via document ID.## 📸 Feature Snapshots
- **Real-Time Editing:** Collaborate with others in real-time using the same document.
![Real-Time Collaboration](./assets/Screenshot%20(96).png)- **Text Formatting with Quill:** A clean, intuitive interface for editing and formatting documents.
![Text Formatting](./assets//Screenshot%20(96).png)
- **Managing Docs in Db:** All docs are saved in real time with Unique uuid's in MongoDb.
![Text Formatting](./assets//Screenshot%20(97).png)
## 🛠️ Technologies Used
- **Frontend:**
- React
- Quill.js (for the text editor interface)
- Socket.IO (for real-time communication)
- **Backend:**
- Node.js
- Express
- MongoDB (for storing documents)
- Socket.IO (for real-time communication between clients)## ⚙️ Difficult Part
One of the most challenging aspects of building this project was integrating **Socket.IO** for real-time updates. Since I was new to socket-based programming, managing the synchronization of document edits across multiple users and ensuring data consistency required extra effort and research. However, it was a great learning experience!
## 🌱 Future Scope
In the future, I plan to enhance **QuillEdit** by adding:
- **User Management:** Users will have accounts to store multiple documents.
- **Refreshed UI:** A more modern and responsive user interface for a better editing experience.
- **Live Editing Feature:** Users will be able to see who is editing the document live, with indicators showing their presence.