DEV Community

Rehman Khan
Rehman Khan

Posted on

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.

RealTimeEdify Screenshot

🎯 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.

Email Verification

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:

  1. Clone the repository:
   git clone https://github.com/your-username/RealTimeEdify.git
   cd RealTimeEdify
Enter fullscreen mode Exit fullscreen mode
  1. Install dependencies for frontend:
   cd src/client
   npm i
Enter fullscreen mode Exit fullscreen mode
  1. Install dependencies for backend:
   cd src
   npm i
Enter fullscreen mode Exit fullscreen mode
  1. 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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

  1. Run the frontend
    cd src/client
    npm run dev
Enter fullscreen mode Exit fullscreen mode
  1. Run the backend
    cd src
    npm run dev
Enter fullscreen mode Exit fullscreen mode
  1. Access the application in your browser at http://localhost:5173.

  2. 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. πŸš€

Top comments (0)