CollabText

A modern, real-time collaborative text editor built with Node.js, Express, Socket.IO, Passport, and MongoDB. CollabText enables multiple users to edit documents simultaneously with features like user authentication, document management, and real-time updates.

Features

• Real-time Collaboration: Multiple users can edit the same document simultaneously.
• User Authentication: Secure login and signup system.
• Document Management: Create, edit, and delete documents.
• Document Sharing: Join existing documents using unique document IDs.
• Auto-save: Automatic saving of document changes.
• Rich Text Editing: Basic text formatting options.
• Dark/Light Theme Toggle: Switch between dark and light modes.
• User Presence: See who is currently editing a document.
• Responsive UI: Works well on desktop and mobile.

Screenshots

Home Page

Editor Page

Join Now Modal

Login/Signup

Tech Stack

Backend:

• Node.js
• Express.js
• MongoDB & Mongoose
• Socket.IO
• Passport.js (Local Strategy)

Frontend:

• Pug (template engine)
• CSS3
• JavaScript (client-side)
• Socket.IO Client

Getting Started

Prerequisites

• Node.js
• MongoDB

Installation

1. Clone the repository:

   git clone <repository-url>
   cd collab-text

2. Install dependencies:

   npm install

3. Configure environment variables: Create a .env file in the root directory:

   MONGODB_URI=your_mongodb_uri
   SESSION_SECRET=your_session_secret

4. Start the server:

   npm start

5. Open your browser: Go to http://localhost:3000

Usage

• Create an account or log in.
• Create a new document or join an existing one using its unique ID.
• Edit documents in real-time with other users.
• See who is online and where their cursor is in the document.
• Toggle between dark and light themes using the button in the top left.

Project Structure

collab-text/
├── models/
│   ├── User.js         # User model
│   └── Document.js     # Document model
├── views/
│   ├── index.pug       # Home page, Login/Signup
│   └── editor.pug      # Editor page
├── public/
│   └── css/
│       └── style.css   # Styles
├── app.js              # Main application file
├── package.json        # Project dependencies
└── README.md           # Project documentation

Contributing

Contributions are welcome! Please open an issue or submit a pull request for improvements or bug fixes.

License

This project is licensed under the MIT License.