Skip to content

bPavan16/cowrite

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

12 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πŸ“ CoWrite

A modern real-time collaborative document editor with live chat

License: MIT Node.js MongoDB React TypeScript Socket.io shadcn/ui

✨ Features

  • Real-time collaboration - Multiple users can edit documents simultaneously with live cursors
  • Live chat system - Built-in chat panel for real-time team communication
  • Rich text editing - Comprehensive text formatting with Quill.js editor
  • Modern UI/UX - Beautiful interface built with shadcn/ui components
  • Document sharing - Advanced sharing modal with permission management
  • User authentication - Secure login and registration system
  • Auto-saving - Intelligent auto-save with visual indicators
  • Responsive design - Fully responsive across all devices
  • TypeScript - Full type safety for better development experience
  • Dark/Light themes - Optimized for light mode with beautiful gradients

πŸ–₯️ Screenshots

Document List

Home Page for Cowrite

Document Editor

Document management dashboard

Document List

Document Editor with rich text formatting

Document List

Document Editor with rich text formatting

πŸ› οΈ Tech Stack

Frontend (cowrite-frontend)

  • React 18 - Modern UI library with hooks
  • TypeScript - Type-safe development
  • Vite - Fast build tool and dev server
  • React Router - Client-side routing
  • Quill.js - Rich text editor with full-screen support
  • Socket.io Client - Real-time communication
  • shadcn/ui - Modern component library
  • Tailwind CSS - Utility-first CSS framework
  • Lucide React - Beautiful icon library
  • Axios - HTTP client for API requests

Backend

  • Node.js - JavaScript runtime
  • Express - Minimal web framework
  • Socket.io - WebSocket communication for real-time features
  • MongoDB - NoSQL database
  • Mongoose - Elegant MongoDB object modeling
  • JWT - Secure authentication tokens
  • bcrypt - Password hashing

UI Components

  • shadcn/ui Components Used:
    • Button, Input, Card, Avatar, Badge
    • Dialog, Alert, Skeleton
    • Custom modals and panels
  • Custom Components:
    • ChatPanel with real-time messaging
    • ShareModal with advanced permissions
    • AuthModal with login/register forms
    • Enhanced TextEditor with editable titles

πŸ—οΈ Architecture

CoWrite follows a modern client-server architecture with real-time capabilities:

  1. Frontend (React + TypeScript):

    • Component-based architecture with shadcn/ui
    • Real-time document synchronization
    • Live chat system with typing indicators
    • Responsive design with beautiful animations
  2. Backend (Node.js + Express):

    • RESTful API for document management
    • Socket.io for real-time collaboration and chat
    • JWT authentication system
    • MongoDB integration with Mongoose
  3. Database (MongoDB):

    • Document storage with version control
    • User management and authentication
    • Chat message persistence
  4. Real-time Features:

    • Document collaboration with operational transforms
    • Live chat with message deduplication
    • Typing indicators and user presence
    • Auto-save with visual feedback

🎨 Key Features in Detail

πŸ’¬ Live Chat System

  • Real-time messaging during document editing
  • Expandable/minimizable chat panel
  • Typing indicators and unread message badges
  • Message grouping and timestamps
  • Professional UI with smooth animations

πŸ“ Enhanced Text Editor

  • Full-screen editing experience
  • Editable document titles in header
  • Rich formatting toolbar with enhanced styling
  • Auto-save with visual indicators
  • Beautiful light theme with gradients

🀝 Advanced Sharing

  • Share modal with copy-to-clipboard
  • Permission management system
  • Public/private document settings
  • Collaboration user list

🎯 Modern UI/UX

  • Built with shadcn/ui component library
  • Responsive design for all screen sizes
  • Beautiful gradients and animations
  • Professional color scheme and typography
  • Custom scrollbars and hover effects

πŸš€ Getting Started

Prerequisites

  • Node.js (v16+)
  • MongoDB (local or Atlas)
  • npm or yarn

Installation

  1. Clone the repository:

    git clone https://github.com/bPavan16/cowrite.git
    cd cowrite
  2. Install backend dependencies:

    cd backend
    npm install
  3. Install frontend dependencies:

    cd ../cowrite-frontend
    npm install
  4. Create a .env file in the backend directory:

    PORT=3001
    MONGODB_URI=mongodb://localhost:27017/cowrite
    JWT_SECRET=your_jwt_secret_key_here
    NODE_ENV=development

Running the Application

  1. Start MongoDB server (if using local MongoDB)

  2. Start the backend server:

    cd backend
    npm start
  3. Start the frontend development server:

    cd cowrite-frontend
    npm run dev
  4. Open your browser and navigate to http://localhost:5173

Development Scripts

Frontend (cowrite-frontend):

npm run dev          # Start development server
npm run build        # Build for production
npm run preview      # Preview production build
npm run lint         # Run ESLint

Backend:

npm start            # Start production server
npm run dev          # Start with nodemon (development)

πŸ” Usage

Getting Started

  1. Register/Login: Create an account or sign in to access your documents
  2. Create Documents: Click "New Document" to start writing
  3. Real-time Editing: Share the document URL with collaborators for live editing
  4. Live Chat: Use the chat panel to communicate while editing

Document Features

  • Editable Titles: Click on the document title in the header to rename
  • Auto-save: Changes are automatically saved with visual indicators
  • Rich Formatting: Use the toolbar for text styling, lists, links, and more
  • Full-screen Editing: Distraction-free writing experience

Collaboration Features

  • Real-time Sync: See changes from other users instantly
  • Live Chat: Built-in chat panel for team communication
  • Typing Indicators: See when others are typing
  • User Presence: View who's currently editing the document

Sharing Documents

  1. Click the "Share" button in the document header
  2. Copy the document link to share with collaborators
  3. Manage permissions and visibility settings
  4. View active collaborators in the sharing modal

πŸ”Œ Socket.io Events

Document Events

  • get-document - Load document content
  • save-document - Save document changes
  • send-changes - Broadcast text changes
  • receive-changes - Receive text changes

Chat Events

  • send-chat-message - Send a chat message
  • receive-chat-message - Receive chat messages
  • user-typing - Broadcast typing status
  • user-typing-status - Receive typing indicators

πŸ“‘ API Endpoints

Authentication

  • POST /api/auth/register - Register a new user
  • POST /api/auth/login - User login
  • GET /api/auth/verify - Verify JWT token

Documents

  • GET /api/documents - Get all user documents
  • GET /api/documents/:id - Get a specific document
  • POST /api/documents - Create a new document
  • PATCH /api/documents/:id/title - Update document title
  • DELETE /api/documents/:id - Delete a document
  • POST /api/documents/:id/share - Share document settings

Users

  • GET /api/users/profile - Get user profile
  • PATCH /api/users/profile - Update user profile

🎯 Project Structure

cowrite/
β”œβ”€β”€ backend/                 # Node.js backend
β”‚   β”œβ”€β”€ src/
β”‚   β”‚   β”œβ”€β”€ config/         # Database configuration
β”‚   β”‚   β”œβ”€β”€ models/         # Mongoose models
β”‚   β”‚   β”œβ”€β”€ routes/         # API routes
β”‚   β”‚   β”œβ”€β”€ utils/          # Utility functions
β”‚   β”‚   └── server.js       # Main server file
β”‚   └── package.json
β”œβ”€β”€ cowrite-frontend/        # React TypeScript frontend
β”‚   β”œβ”€β”€ src/
β”‚   β”‚   β”œβ”€β”€ components/     # Reusable components
β”‚   β”‚   β”‚   β”œβ”€β”€ ui/         # shadcn/ui components
β”‚   β”‚   β”‚   β”œβ”€β”€ auth/       # Authentication components
β”‚   β”‚   β”‚   β”œβ”€β”€ chat/       # Chat system components
β”‚   β”‚   β”‚   └── sharing/    # Document sharing components
β”‚   β”‚   β”œβ”€β”€ pages/          # Page components
β”‚   β”‚   β”œβ”€β”€ hooks/          # Custom React hooks
β”‚   β”‚   β”œβ”€β”€ lib/            # Utility libraries
β”‚   β”‚   └── main.tsx        # App entry point
β”‚   β”œβ”€β”€ components.json     # shadcn/ui config
β”‚   β”œβ”€β”€ tailwind.config.js  # Tailwind configuration
β”‚   └── package.json
β”œβ”€β”€ images/                  # Screenshot assets
└── README.md

🀝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add some amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

πŸ“„ License

This project is licensed under the MIT License - see the LICENSE file for details.

πŸ™ Acknowledgements

  • Quill.js - Rich text editor with excellent API
  • Socket.io - Real-time bidirectional communication
  • shadcn/ui - Beautiful and accessible component library
  • Tailwind CSS - Utility-first CSS framework
  • Lucide React - Beautiful & consistent icon library
  • React - JavaScript library for building user interfaces
  • TypeScript - Typed superset of JavaScript
  • Vite - Fast build tool and development server

πŸ“ˆ Recent Updates

v2.0.0 (2025)

  • ✨ Complete UI overhaul with shadcn/ui components
  • πŸ’¬ Real-time chat system with typing indicators
  • 🎨 Beautiful light theme with gradients and animations
  • πŸ“± Enhanced responsive design
  • πŸ”§ TypeScript migration for better development experience
  • ⚑ Performance optimizations and modern React patterns
  • πŸ›‘οΈ Improved authentication and security
  • πŸ“ Editable document titles in header
  • πŸ–₯️ Full-screen editor experience

Made with ❀️ by Pavan © 2025

Report Bug β€’ Request Feature

About

A real-time collaborative document editor inspired by GoogleDocs

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published