💬 ChatBox - Real-time Chat Application

A modern, real-time chat application built with Node.js, Socket.io, and MongoDB. Connect with friends, create chat rooms, and enjoy seamless messaging with typing indicators and live updates.

🌟 Features

🔐 Authentication & User Management

• Secure Registration: Create accounts with encrypted passwords using bcrypt
• Username Validation: Real-time username availability checking with suggestions
• Session Management: Persistent login sessions with Passport.js
• User Profile Settings: Update name and username with validation
• Password Security: Strong password requirements and confirmation validation

💬 Real-time Messaging

• Instant Messaging: Real-time message delivery using Socket.io
• Message History: Persistent chat history stored in MongoDB (last 100 messages)
• Typing Indicators: See when others are typing in real-time
• Message Timestamps: All messages include time stamps for better context
• Auto-scroll: Automatic scrolling to latest messages

🏠 Room Management

• Create Rooms: Start your own chat rooms with custom names
• Room Ownership: Room creators have administrative privileges
• Member Management: View all room members with role indicators
• Room Settings: Rename rooms and manage members (creators only)
• Member Removal: Kick members from rooms (creators only)
• Room Navigation: Easy switching between multiple rooms

📮 Invitation System

• Send Invitations: Invite users to join your rooms by username
• Invitation Management: Accept or decline room invitations
• Smart Validation: Prevents duplicate invitations and validates user existence
• Notification System: Real-time feedback for invitation actions

📱 Responsive Design

• Mobile-First: Optimized for mobile devices and tablets
• Adaptive UI: Dynamic interface elements based on screen size
• Touch-Friendly: Large touch targets and intuitive navigation
• Sidebar Navigation: Collapsible sidebar for room and user management

🎨 User Interface

• Modern Design: Clean, minimalist interface with Font Awesome icons
• Color-Coded Messages: Different styling for own vs. others' messages
• Visual Feedback: Success/error messages and loading states
• Accessibility: Keyboard navigation and screen reader friendly

🛠️ Tech Stack

Backend

• Node.js: JavaScript runtime environment
• Express.js: Web application framework
• Socket.io: Real-time bidirectional communication
• MongoDB: NoSQL database for data storage
• Mongoose: MongoDB object modeling
• Passport.js: Authentication middleware
• bcrypt: Password hashing library
• express-session: Session management
• connect-flash: Flash message middleware

Frontend

• EJS: Embedded JavaScript templating
• CSS3: Modern styling with Flexbox/Grid
• JavaScript (ES6+): Client-side functionality
• Font Awesome: Icon library
• Socket.io Client: Real-time communication

Security & Utilities

• UUID: Unique identifier generation
• Moment.js: Date and time formatting
• Cookie Parser: Cookie handling middleware
• Autoprefixer: CSS vendor prefixing

🚀 Getting Started

Prerequisites

• Node.js (v14 or higher)
• MongoDB (local installation or MongoDB Atlas)
• npm or yarn package manager

Installation

1. Clone the repository

   git clone https://github.com/TH3-MA3STRO/chatapp.git
   cd chatapp

2. Install dependencies

   npm install

3. Environment Setup Create a .env file in the root directory:

   MONGO_URI=mongodb://localhost:27017/chatapp
   # OR for MongoDB Atlas:
   # MONGO_URI=mongodb+srv://username:password@cluster.mongodb.net/chatapp
   
   PORT=3000
   SESSION_SECRET=your_session_secret_here

4. Start MongoDB

   • Local MongoDB: Ensure MongoDB service is running
   • MongoDB Atlas: Use connection string in MONGO_URI

5. Run the application

   Development mode:

   npm run production

   Production mode:

   npm start

6. Access the application Open your browser and navigate to http://localhost:3000

📁 Project Structure

chatapp/
├── 📂 config/
│   ├── authenticate.js    # Authentication middleware
│   └── passport.js        # Passport configuration
├── 📂 models/
│   ├── User.js           # User schema
│   ├── Room.js           # Chat room schema
│   ├── Chat.js           # Message schema
│   └── Invite.js         # Invitation schema
├── 📂 routes/
│   ├── auth.js           # Authentication routes
│   └── service.js        # Application routes
├── 📂 utils/
│   ├── messages.js       # Message formatting utilities
│   └── users.js          # User management utilities
├── 📂 views/
│   ├── 📂 partials/
│   │   ├── head.ejs      # HTML head section
│   │   ├── nav.ejs       # Navigation bar
│   │   └── bottomnav.ejs # Bottom navigation
│   ├── login.ejs         # Login page
│   ├── register.ejs      # Registration page
│   ├── home.ejs          # Dashboard
│   ├── chat.ejs          # Chat room interface
│   ├── create.ejs        # Room creation
│   ├── invitation.ejs    # Invitations page
│   ├── roomsettings.ejs  # Room management
│   ├── usersettings.ejs  # User profile settings
│   └── 404.ejs           # Error page
├── 📂 public/
│   ├── 📂 css/           # Stylesheets
│   └── 📂 js/            # Client-side JavaScript
├── app.js                # Main application file
└── package.json          # Dependencies and scripts

🔧 Configuration

Database Models

User Model

{
  id: String,           // Unique user identifier
  name: String,         // Display name
  username: String,     // Unique username
  password: String,     // Hashed password
  room: Array,          // Array of joined room IDs
  status: String        // User status (optional)
}

Room Model

{
  name: String,         // Room name
  id: String,           // Unique room identifier
  members: Array,       // Array of member objects
  creator: String,      // Creator username
  membersData: Object,  // Detailed member information
  time: String          // Creation timestamp
}

Chat Model

{
  room: String,         // Room ID
  name: String,         // Sender username
  message: String,      // Message content
  time: String          // Message timestamp
}

Invite Model

{
  toInvite: String,     // Recipient username
  senderName: String,   // Sender display name
  senderUsername: String, // Sender username
  roomName: String,     // Room name
  roomID: String        // Room identifier
}

🎯 Usage Guide

Getting Started

1. Register: Create a new account with a unique username
2. Login: Access your dashboard with your credentials
3. Create Room: Start a new chat room or join existing ones
4. Invite Friends: Send invitations to other users
5. Start Chatting: Enjoy real-time conversations!

Key Features Usage

Room Management

• Creating Rooms: Click "Create Room" and enter a room name
• Joining Rooms: Accept invitations from other users
• Managing Members: Room creators can rename rooms and remove members
• Room Settings: Access via the settings icon in the room

Messaging

• Send Messages: Type in the message box and press Enter or click send
• View History: Previous messages load automatically when joining
• Typing Indicators: See real-time typing notifications
• Message Status: Visual confirmation of sent messages

User Management

• Profile Settings: Update your name and username
• Account Security: Usernames must be unique across the platform
• Session Management: Stay logged in across browser sessions

📱 API Endpoints

Authentication Routes

• GET /register - Registration page
• POST /register - Create new user
• GET /login - Login page
• POST /login - Authenticate user
• GET /logout - Logout user

Application Routes

• GET /home - User dashboard
• GET /create - Room creation page
• POST /create - Create new room
• GET /room/:id - Join chat room
• GET /invitations - View invitations
• POST /invite - Send invitation
• GET /invitation/:id/:action - Handle invitation response
• GET /:id/rsettings - Room settings
• GET /:user/usettings - User settings

Socket Events

• joinRoom - Join a chat room
• chatMsg - Send message
• typing - Typing indicator
• typing_remove - Stop typing indicator
• disconnect - User disconnection

🤝 Contributing

We welcome contributions! Please follow these steps:

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

Development Guidelines

• Follow existing code style and conventions
• Add comments for complex functionality
• Test your changes thoroughly
• Update documentation as needed

📄 License

This project is licensed under the ISC License. See the LICENSE file for details.

🙏 Acknowledgments

• Socket.io for real-time communication capabilities
• MongoDB for reliable data storage
• Express.js for robust web framework
• Font Awesome for beautiful icons
• bcrypt for secure password hashing

🐛 Known Issues & Future Enhancements

Current Limitations

• Message history limited to last 100 messages per room
• No file sharing capabilities
• Basic user status system

Planned Features

• 📎 File and image sharing
• 🌙 Dark/Light theme toggle
• 🔔 Push notifications
• 👥 User online status
• 📞 Voice/Video calling
• 🎭 Custom emoji reactions
• 🔍 Message search functionality

📞 Support

For support, please open an issue on GitHub or contact the development team.

---

Made with ❤️ by TH3-MA3STRO

⭐ Star this repository if you found it helpful!