Chit-Chat - Collaborative Document Editor 💬📝

A modern, real-time collaborative document editing platform with team management, live chat, notifications, and beautiful UI themes.

✨ Features

Core Features

• 🔐 User Authentication: Secure signup/login with session management and password hashing
• 👥 Team Management: Create teams, generate invite codes, role-based access control
• 📄 Real-time Collaboration: Multiple users edit documents simultaneously with Socket.IO
• 💬 Team Chat: Live team chat rooms with real-time messaging
• 🔔 Notifications: In-app notification system for team activities
• 📎 File Attachments: Upload and attach files to documents
• 📊 Dashboard Stats: Track documents, teams, members, and activity
• 🎨 Modern UI: Glassmorphism design with light/dark theme toggle
• 🌙 Theme System: Beautiful light/dark mode with smooth transitions
• 📱 Responsive Design: Works on desktop, tablet, and mobile devices
• 💾 Auto-save: Documents save automatically as you type
• 🔍 Search & Filter: Find documents and teams quickly
• 📈 Activity Timeline: Track recent document changes and team activity
• 👤 User Profiles: Customizable user profiles with stats and avatars
• ⚙️ Account Management: Profile editing, password change, data export, account deletion

Advanced Features

• Document Templates: Quick start with meeting notes, project plans, reports, etc.
• Document Versions: Track document history and changes
• Member Management: Add/remove team members with role control
• Collections & Tags: Organize documents with custom tags
• Storage Tracking: Monitor storage usage across teams
• Quick Actions: Fast access to common tasks
• Legal Pages: Privacy Policy, Terms of Service, Help Center, Contact Us

🛠️ Tech Stack

Frontend

• HTML5, CSS3 - Modern semantic markup and styling
• Vanilla JavaScript - No frameworks, pure ES6+
• Socket.IO Client - Real-time WebSocket communication
• Custom Theme System - Light/dark mode with CSS variables
• Glassmorphism UI - Modern frosted glass design
• Toast Notifications - Custom notification system
• Responsive Layout - Mobile-first CSS Grid & Flexbox

Backend

• Node.js 18+ - JavaScript runtime
• Express.js 4.18 - Web framework
• Socket.IO 4.6 - Real-time bidirectional communication
• MongoDB Atlas - Cloud NoSQL database
• Mongoose 9.0 - MongoDB ODM with schemas
• bcryptjs - Password hashing and security
• express-session - Session management with cookies
• Multer - File upload handling
• CORS - Cross-origin resource sharing

DevOps & Deployment

• Docker - Containerization for consistent deployment
• Hugging Face Spaces - Hosting platform
• Git - Version control
• Environment Variables - Secure configuration management

🚀 Quick Start

Local Development

1. Clone and install:

   git clone https://github.com/rajm012/Chit-Chat.git
   cd Chit-Chat
   npm install

2. Set up MongoDB Atlas:

   • Create free account at MongoDB Atlas
   • Create a cluster and get connection string
   • Whitelist all IPs (0.0.0.0/0) for development

3. Configure environment variables: Create/edit .env file:

   PORT=7860
   NODE_ENV=development
   MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/chitchat
   SESSION_SECRET=your-super-secret-key-change-this

4. Run locally:

   npm start
   # or with auto-reload
   npm run dev

5. Access: Open http://localhost:7860

🐳 Docker Deployment

# Build Docker image
docker build -t chitchat-app .

# Run container
docker run -p 7860:7860 \
  -e NODE_ENV=production \
  -e MONGODB_URI="your_mongodb_uri" \
  -e SESSION_SECRET="your_secret" \
  chitchat-app

☁️ Deploy to Hugging Face Spaces

1. Create Space: Go to Hugging Face Spaces

2. Select Docker SDK

3. Push your code:

   git push https://huggingface.co/spaces/YOUR_USERNAME/YOUR_SPACE main

4. Set Environment Variables in Space Settings:

   • NODE_ENV=production
   • SESSION_SECRET=random-long-secret-key
   • MONGODB_URI=your-mongodb-atlas-uri

5. Done! Your app will be live at https://huggingface.co/spaces/YOUR_USERNAME/YOUR_SPACE

📖 Detailed Guides:

• DOCKER_DEPLOYMENT.md - Complete Docker setup
• HUGGINGFACE_CHECKLIST.md - Troubleshooting for HF Spaces

📁 Project Structure

chit-chat/
├── public/                      # Frontend files
│   ├── css/
│   │   ├── modern-theme.css     # Theme system & design tokens
│   │   ├── dashboard-styles.css # Dashboard-specific styles
│   │   └── profile-styles.css   # Profile page styles
│   ├── js/
│   │   ├── auth.js              # Authentication logic
│   │   ├── dashboard.js         # Dashboard functionality
│   │   ├── dashboard-add.js     # Enhanced dashboard features
│   │   ├── editor.js            # Real-time document editor
│   │   ├── profile.js           # User profile management
│   │   └── theme-toast.js       # Theme switcher & notifications
│   ├── login.html               # Login page
│   ├── signup.html              # Signup page
│   ├── dashboard.html           # Main dashboard
│   ├── editor.html              # Document editor
│   ├── profile.html             # User profile
│   ├── privacy-policy.html      # Privacy policy
│   ├── terms-of-service.html    # Terms of service
│   ├── help-center.html         # Help & FAQ
│   └── contact-us.html          # Contact form
├── models/                      # MongoDB schemas
│   ├── User.js                  # User model
│   ├── Team.js                  # Team model
│   ├── Document.js              # Document model
│   ├── DocumentVersion.js       # Version history
│   ├── ChatMessage.js           # Chat messages
│   ├── Notification.js          # Notifications
│   └── Attachment.js            # File attachments
├── routes/                      # API endpoints
│   ├── auth.js                  # Auth routes
│   ├── teams.js                 # Team management
│   ├── documents.js             # Document CRUD
│   ├── chat.js                  # Team chat
│   ├── notifications.js         # Notification system
│   ├── uploads.js               # File uploads
│   └── dashboard-api.js         # Dashboard stats
├── uploads/                     # File storage
├── database.js                  # MongoDB connection
├── server.js                    # Express server + Socket.IO
├── Dockerfile                   # Docker configuration
├── .dockerignore               # Docker ignore rules
├── package.json                 # Dependencies
├── .env                         # Environment variables
└── README.md                    # This file

🗄️ Database Schema (MongoDB)

Collections

Users - User accounts

• username, email (unique), password (hashed bcrypt)
• createdAt, updatedAt timestamps

Teams - Collaboration teams

• name, inviteCode (unique 6-char), createdBy
• members[] (user ref, role: admin/member, joinedAt)
• timestamps

Documents - Collaborative documents

• title, content (rich text), teamId
• createdBy, lastModifiedBy (user refs)
• versions history, timestamps

ChatMessages - Team chat

• teamId, userId, message, timestamp
• Real-time via Socket.IO

Notifications - User notifications

• userId, type, message, read status
• createdAt, relatedDocId/teamId

DocumentVersions - Version history

• documentId, content, editedBy
• version number, timestamp

Attachments - File uploads

• documentId, filename, filepath, uploadedBy
• size, mimetype, timestamp

🔌 API Endpoints

Auth Routes (/api/auth)

• POST /signup - Register with validation
• POST /login - Session-based authentication
• POST /logout - Clear session
• GET /check - Verify authentication

Team Routes (/api/teams)

• GET / - List user's teams
• GET /:teamId - Get specific team
• POST / - Create team with invite code
• POST /join - Join via 6-char code
• GET /:teamId/documents - Team documents
• POST /:teamId/leave - Leave team
• DELETE /:teamId - Delete (admin only)

Document Routes (/api/documents)

• POST / - Create document in team
• GET /:docId - Fetch with content
• PUT /:docId - Update content + version
• DELETE /:docId - Remove document

Chat Routes (/api/chat)

• GET /teams/:teamId/messages - Fetch chat history
• Real-time messaging via Socket.IO

Notification Routes (/api/notifications)

• GET / - User notifications
• PUT /:id/read - Mark as read
• DELETE /:id - Delete notification

Upload Routes (/api/uploads)

• POST / - File upload (Multer)
• File storage in /uploads directory

Dashboard API (/api/dashboard)

• GET /stats - User statistics (teams, documents)

📖 Usage

Getting Started

1. Sign up - Create account with username, email, password
2. Create/Join Team - Start new team or join with 6-char invite code
3. Manage Profile - Update info, change password, toggle theme
4. Create Documents - Write collaborative documents in teams
5. Real-time Chat - Communicate with team members
6. Track Activity - View notifications and team stats

Features in Action

• Dashboard: View all teams, documents, and quick actions
• Editor: Real-time collaborative editing with Socket.IO
• Chat: Team chat sidebar with message history
• Profile: User stats, settings, data export, account management
• Notifications: Real-time alerts for team/document changes
• Theme Toggle: Switch between light/dark mode (persisted)

⚡ Real-time Collaboration

Socket.IO enables real-time features:

• Live Document Editing - See changes as teammates type
• Active Users - Visual indicators of who's online
• Team Chat - Instant messaging within teams
• Notifications - Real-time alerts for document/team events
• Auto-sync - Changes synced automatically across clients

🔒 Security Features

• Password Hashing - bcryptjs with salt rounds
• Session Management - express-session with secure cookies
• MongoDB Security - Atlas encrypted connections, authenticated access
• Role-based Access - Team admin/member permissions
• CORS Protection - Configured for production environments
• Environment Variables - Sensitive data in .env (not committed)
• Invite System - 6-character codes for controlled team access
• Input Validation - Sanitized user inputs
• Production Config - Secure cookies (SameSite, HttpOnly) in production

🚀 Future Enhancements

Ping for suggestions or improvements

📄 License

MIT

👤 Author

Chit-Chat's Team