Why I’m Building a Realtime Collaboration App (DocuMe Devlog 1)

Intro

So I’m on a mission to refine my software engineering skills by building practical projects that present a new challenge each time.

I recently built out my first full-stack application called On the Rocks which taught me the basics of integrating a frontend, backend, database, and cloud hosting service. While I’m very proud of it, I know that this is just the beginning. There is so much more to learn.

This brings me to my next project: a real-time collaboration app like Google Docs.

The Idea: Why a Realtime Collaboration App?

As companies turn to remote or hybrid work models, collaboration tools like Google Suite and Microsoft 365 have become a necessity. These tools enable efficient teamwork by providing easy accessibility to files and instantly visible updates.




The Goal: To build a real-time document collaboration app and master concepts that can be applied to other projects




I won’t reinvent the wheel here, but this project will be a great opportunity to challenge myself and grow as a developer.

The Features

Full-stack apps like to-do lists and recipe trackers really only require the implementation of CRUD operations to have full user functionality.

Building a real-time app requires us to stretch our skills beyond the basics and tackle the following features:

1. 
   Live Updates - Synchronizing updates across multiple clients requires use of WebSockets


2. 
   Rich Text Editing - For documents to be easily styled by the user and formatted for storing in the database, a feature-rich editor like Quill is required


3. 
   Handling Concurrent Edits - I’ll have to do more research on this, but the app needs a way to handle document edits happening at the same time and manipulating the same data


4. Version History (Stretch Goal)

In addition, I am excited to learn:

1. 
   AWS Web Service Hosting - Easily scalable with different tiers suited for the app's required needs


2. Google Oauth

The First Steps: A High-Level Overview

1. 
   Frontend Framework:
   
   
   
   
   1. React for the user interface
   
   
   2. Tailwind CSS for fast, responsive design
   
   
   3. TypeScript for type checking and debugging
   
   
   
   
   
   



2. 
   
   Backend:
   
   
   
   
   1. Node.js
   
   
   2. Express
   
   
   3. MongoDB
   
   
   
   
   
   



3. Quill Rich Text Editor



4. Websockets for Real-time Communication



5. Google Oauth



6. 
   
   Deployment:
   
   
   
   
   1. Vercel (Frontend)
   
   
   2. AWS (Backend)
   
   
   
   
   
   

I’ll possibly explore Redis for database caching and scaling preparation.

Looking Ahead

That’s the app so far! Over the coming weeks, I’ll tackle features like Quill integration, Google Oauth implementation, and real-time collaboration to realize this vision. I’ll document the challenges I face and share solutions that could help others working on similar projects.

Stay tuned for the next dev log, where I’ll discuss how I designed the app's frontend and backend architecture!

What do you think?

I’d love to hear your thoughts or share your experiences building real-time apps. Share your feedback in the comments or connect with me on LinkedIn!