CollabWrite - Real-Time Collaborative Text Editor

A full-stack modern web application built with the MERN stack (MongoDB, Express, React, Node.js) and Socket.io for real-time multiplayer text editing. The application is completely containerized with Docker and Nginx.

Features

• Real-Time Collaboration: Multiple users can edit the same document simultaneously, seeing updates instantly via WebSockets (Socket.io).
• Authentication: Secure JWT-based registration and login system.
• Role-Based Access Control:
  • Admin & Editor: Can create and modify documents.
  • Viewer: Read-only access to documents.
• Sleek UI: Modern dark-mode aesthetic built with vanilla CSS.
• Dockerized: Fully containerized environment with Nginx reverse proxy.
• API Interceptors: Axios handles attaching tokens to outbound requests seamlessly.

Tech Stack

• Frontend: React (Vite), React Router, Axios, Socket.io-client.
• Backend: Node.js, Express, Mongoose, Socket.io, JSONWebToken, BcryptJS.
• Database: MongoDB.
• Infrastructure: Docker, Docker Compose, Nginx.

Getting Started

Prerequisites

• Docker
• Docker Compose

Installation & Execution

1. Clone the repository (if applicable):

   git clone <repo-url>
   cd collab-editor

2. Start the application: Use Docker Compose to build and start all containers (Frontend, Backend, MongoDB, and Nginx reverse proxy).

   docker-compose up --build -d

3. Access the application: Open your browser and navigate to:

   http://localhost
   

Usage Flow

1. Sign up a new user (default role is Editor).
2. Create a Document in the Dashboard.
3. Share the document URL with another user (e.g., in a new Incognito window).
4. If the other user signs up as a Viewer, they will see live updates but cannot type. If they sign up as an Editor or Admin, both can type and see changes instantly.

Shutting Down

To stop the application and remove the containers, run:

docker-compose down

If you want to clear the MongoDB data volume, you can use:

docker-compose down -v