Chat Hub MERN

Chat Hub MERN is a sleek and user-friendly real-time chat application. Using cutting-edge web technologies, it enables users to create or join rooms and engage in seamless real-time conversations.

Features

User Management

• Secure Authentication: JWT-based authentication system with bcrypt password hashing.
• User Registration: Complete signup process with email verification.
• User Profiles: Customizable user profiles with avatars and status messages.

Room Management

• Create Room: Generate unique 12-character room codes with UUID for secure room creation.
• Join Room: Easy room access using shared room codes.
• Room Features:
  • Real-time participant list
  • Room status indicators
  • Active user tracking

Real-Time Chat Features

• Message Features:
  • Real-time message delivery with Socket.IO
  • Message timestamps using Moment.js
  • Read receipts
  • Infinite scroll for message history
• UI/UX:
  • Material-UI components for modern design
  • Responsive layout for all devices
  • Framer Motion animations
  • Toast notifications for important events

Technical Stack

Frontend

• Core: React.js (v18)
• UI Framework: Material-UI (v6)
• State Management: React Hooks
• Form Handling: React Hook Form with Yup validation
• Routing: React Router DOM (v6)
• Real-time: Socket.IO Client
• Performance: React Virtualized for efficient list rendering

Backend

• Runtime: Node.js with Express.js
• Database: MongoDB with Mongoose ODM
• Authentication: JWT, bcrypt
• Real-time: Socket.IO
• API Security: CORS enabled

Project Structure

chat-hub-mern/
├── client/
│   ├── src/
│   ├── public/
│   └── package.json
├── server/
│   ├── config/
│   ├── controllers/
│   ├── middleware/
│   ├── models/
│   ├── routes/
│   └── server.js
└── package.json

Setup Instructions

1. Clone the Repository:

   git clone https://github.com/your-username/chat-hub-mern.git
   cd chat-hub-mern

2. Install Dependencies:

   # Install server dependencies
   cd server
   npm install
   Install client dependencies
   
   cd ../client
   npm install

3. Environment Configuration: Create a .env file in the server directory with:

   MONGO_URI=your_mongodb_connection_string
   JWT_SECRET=your_jwt_secret_key
   PORT=5000
   NODE_ENV=development

4. Start the Application:
   • Development Mode:

     # Start server with nodemon
     cd server
     npm run dev
     
     Start client with hot reload
     
     cd client
     npm start

   • Production Mode:

     # Build client
     cd client
     npm run build
     
     Start server
     
     cd ../server
     npm start

API Endpoints

Authentication

• POST /api/auth/register - User registration
• POST /api/auth/login - User login
• GET /api/auth/profile - Get user profile

Rooms

• POST /api/rooms - Create new room
• GET /api/rooms/:code - Join room by code
• GET /api/rooms/user - Get user's rooms

Contributing

To contribute to this project:

1. Fork this repository
2. Create a new branch: git checkout -b feature-name
3. Make your changes and commit: git commit -m "Added new feature"
4. Push the changes: git push origin feature-name
5. Create a pull request

Development Guidelines

• Follow the existing code style and conventions
• Write clear commit messages
• Add appropriate comments and documentation
• Test your changes thoroughly

License

This project is licensed under the MIT License.

Acknowledgments

• Material-UI for the beautiful components
• Socket.IO for real-time capabilities
• MongoDB Atlas for database hosting

Chat Hub MERN: Connecting people in real-time like never before!