Building RealTimeEdify: A Real-Time Collaborative Document Editing App with MERN Stack & Socket.IO

🚀 Hello, Dev Community! 🙌

I’m excited to introduce RealTimeEdify, a real-time collaborative document editing web application that I've developed using the MERN stack (MongoDB, Express.js, React, Node.js) and Socket.IO. This project allows users to create, edit, and collaborate on documents in real time with others. Below, I’ll walk you through the features, technology stack, and steps to get started with RealTimeEdify.

🎯 Key Features

1. Real-Time Document Collaboration

RealTimeEdify enables users to create documents and collaborate with others in real time. Multiple users can edit the document simultaneously, with changes instantly reflected for all participants.

2. Collaborator Presence

You can see who else is active in the document, with a list of online collaborators displayed in the app. This feature enhances the collaborative experience by making it clear who’s working on the document.

3. Email Verification

For security and user authentication, RealTimeEdify implements email verification. Users receive an email with a verification link upon registration to ensure that accounts are secure.

4. Seamless Real-Time Editing

I integrated Quill, a powerful WYSIWYG editor, into RealTimeEdify to offer a seamless real-time editing experience. Collaborators can see live updates as others make edits, enhancing productivity and communication.

🛠️ Technologies Used

MERN Stack:
- MongoDB: Used as the NoSQL database to store user data and document content.
- Express.js: Serves as the backend framework to build the API.
- React: Powers the frontend, providing a dynamic user interface.
- Node.js: Handles the server-side operations.
Socket.IO:
- Enables real-time bidirectional communication between clients and the server, making collaborative editing and presence tracking possible.
Quill:
- A feature-rich WYSIWYG editor used for document editing, customized to handle real-time collaboration.

Getting Started

Follow these steps to run RealTimeEdify locally:

Clone the repository:

   git clone https://github.com/your-username/RealTimeEdify.git
   cd RealTimeEdify

Install dependencies for frontend:

   cd src/client
   npm i

Install dependencies for backend:

   cd src
   npm i

Set up .env variables by creating a .env file in the server directory and adding the following variables:

For server side:

    MONGODB_URI=your_mongo_db_uri
    JWT_SECRET=your_jwt_secret
    PORT=8000
    PASSWORD=your_app_password_for_email
    EMAIL=your_gmail_email
    BACKEND_URL=your_backend_url/api/v1
    FRONTEND_URL=your_frontend_url
    PRODUCTION=false

Replace your_mongodb_connection_string, your_jwt_secret, your_email_username, your_email_password, your_email_host, and your_email_port with your own values.

Note: If you are using Gmail for sending emails, you need to enable "Less secure app access" in your Google account settings.

For client side:

    VITE_APP_BACKEND_URL=your_backend_url/api/v1
    VITE_APP_SOCKET_URL=your_backend_url

Replace your_backend_url with the URL where the backend server is running.

Run the frontend

    cd src/client
    npm run dev

Run the backend

    cd src
    npm run dev

Access the application in your browser at http://localhost:5173.
Create an account and start collaborating on documents!

🔗 Check out the live website: edify.slacky.xyz

💻 Source code: GitHub - REAL_TIME_EDIFY

Feel free to contribute and share your thoughts! 🚀
I hope you find RealTimeEdify as exciting to use as I did building it! Let’s keep the conversation going—your feedback and contributions are always welcome. 🚀

Blog