I’m trying to create a web app that lets users work together on documents in real time, similar to Google Docs. I started with a quick start guide, but it’s not quite what I need.
The main issue is that the files created have a special format that’s not compatible with Google Docs. I want users to be able to open and edit these files in their Google Drive later.
I’ve tried changing the file type, but it doesn’t work properly. The file shows up in Google Drive, but the app can’t load it.
Does anyone know how to create a real-time editable document that’s compatible with Google Docs? Some example code would be really helpful!
Also, I’m hoping to add a toolbar for text formatting (bold, italic, etc.) and a file picker to select existing documents. Any tips on these features would be great too!
hey claire, i’ve done something similar before. have u looked into using the google drive api directly? it lets u create and edit google docs in real-time. for the toolbar stuff, check out quill or tinymce - they’re pretty good. and yeah, the google picker api is great for file selection. good luck with ur project!
I’ve tackled a similar challenge in my work. One approach that’s worked well for me is using the Google Drive REST API. It allows you to create and modify Google Docs directly, which solves the compatibility issue.
For real-time collaboration, you might want to explore Firebase Realtime Database. It’s designed for syncing data across clients in real-time and integrates well with Google services.
Regarding the toolbar, I’ve had success with Quill.js. It’s lightweight and customizable, making it easy to add formatting options like bold and italic.
For the file picker, the Google Picker API is indeed a solid choice. It provides a clean interface for users to select files from their Drive.
Just remember to thoroughly test your app’s performance with multiple simultaneous users. Real-time editing can be resource-intensive, so optimizing for efficiency is crucial.
I’ve worked on a similar project before, and integrating with Google Docs can be tricky. One approach that worked for me was using the Google Drive API to create and manipulate Google Docs directly, rather than trying to convert a custom format.
For real-time collaboration, you might want to look into operational transformation (OT) algorithms. These handle concurrent edits from multiple users smoothly. Libraries like ShareDB or Yjs can help implement OT.
As for the toolbar and file picker, consider using the Google Picker API for file selection. For text formatting, you could implement a custom toolbar using contenteditable or a rich text editor library like Quill or TinyMCE.
Remember to handle authentication and permissions carefully when working with users’ Google Drive files. OAuth 2.0 is typically used for this.