- 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

Home Page for Cowrite

Document management dashboard

Document Editor with rich text formatting

Document Editor with rich text formatting
- 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
- 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
- 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
CoWrite follows a modern client-server architecture with real-time capabilities:
-
Frontend (React + TypeScript):
- Component-based architecture with shadcn/ui
- Real-time document synchronization
- Live chat system with typing indicators
- Responsive design with beautiful animations
-
Backend (Node.js + Express):
- RESTful API for document management
- Socket.io for real-time collaboration and chat
- JWT authentication system
- MongoDB integration with Mongoose
-
Database (MongoDB):
- Document storage with version control
- User management and authentication
- Chat message persistence
-
Real-time Features:
- Document collaboration with operational transforms
- Live chat with message deduplication
- Typing indicators and user presence
- Auto-save with visual feedback
- 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
- 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
- Share modal with copy-to-clipboard
- Permission management system
- Public/private document settings
- Collaboration user list
- 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
- Node.js (v16+)
- MongoDB (local or Atlas)
- npm or yarn
-
Clone the repository:
git clone https://github.com/bPavan16/cowrite.git cd cowrite
-
Install backend dependencies:
cd backend npm install
-
Install frontend dependencies:
cd ../cowrite-frontend npm install
-
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
-
Start MongoDB server (if using local MongoDB)
-
Start the backend server:
cd backend npm start
-
Start the frontend development server:
cd cowrite-frontend npm run dev
-
Open your browser and navigate to
http://localhost:5173
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)
- Register/Login: Create an account or sign in to access your documents
- Create Documents: Click "New Document" to start writing
- Real-time Editing: Share the document URL with collaborators for live editing
- Live Chat: Use the chat panel to communicate while editing
- 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
- 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
- Click the "Share" button in the document header
- Copy the document link to share with collaborators
- Manage permissions and visibility settings
- View active collaborators in the sharing modal
get-document
- Load document contentsave-document
- Save document changessend-changes
- Broadcast text changesreceive-changes
- Receive text changes
send-chat-message
- Send a chat messagereceive-chat-message
- Receive chat messagesuser-typing
- Broadcast typing statususer-typing-status
- Receive typing indicators
POST /api/auth/register
- Register a new userPOST /api/auth/login
- User loginGET /api/auth/verify
- Verify JWT token
GET /api/documents
- Get all user documentsGET /api/documents/:id
- Get a specific documentPOST /api/documents
- Create a new documentPATCH /api/documents/:id/title
- Update document titleDELETE /api/documents/:id
- Delete a documentPOST /api/documents/:id/share
- Share document settings
GET /api/users/profile
- Get user profilePATCH /api/users/profile
- Update user profile
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
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature
) - Commit your changes (
git commit -m 'Add some amazing feature'
) - Push to the branch (
git push origin feature/amazing-feature
) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- 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
- β¨ 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