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!