🚀 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. 🚀
Top comments (0)