chatIO

A full-stack real-time chat application with one-to-one messaging, group chats, and instant notifications.

Features

• User Authentication - Secure signup/login with JWT tokens and bcrypt password hashing
• One-to-One Chat - Private messaging between users
• Group Chat - Create groups, add/remove members, rename groups
• Real-Time Messaging - Instant message delivery using Socket.io
• Typing Indicators - See when someone is typing
• Notifications - Badge notifications for unread messages
• User Search - Find users by name or email
• Profile Viewing - View user profiles with avatars
• Splash Screen - Animated video splash on app load

Tech Stack

Frontend

• React 17 with React Router
• Material-UI (MUI) 5 for UI components
• Socket.io-client for real-time communication
• Axios for HTTP requests
• Notistack for toast notifications
• React-Lottie for animations

Backend

• Node.js with Express.js
• MongoDB with Mongoose ODM
• Socket.io for WebSocket connections
• JWT for authentication
• Bcrypt.js for password hashing

Project Structure

chatIO/
├── frontend/
│   ├── public/
│   │   ├── logo.png
│   │   └── splash-video.mp4
│   └── src/
│       ├── components/
│       │   ├── Authentication/
│       │   ├── miscellaneous/
│       │   └── userAvatar/
│       ├── Context/
│       ├── Pages/
│       └── config/
│
└── backend/
    ├── config/
    ├── controllers/
    ├── middleware/
    ├── models/
    └── routes/

Installation

Prerequisites

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

Setup

1. Clone the repository

   git clone <repository-url>
   cd Chatter-Box

2. Install backend dependencies

   npm install

3. Install frontend dependencies

   cd frontend
   npm install --legacy-peer-deps
   cd ..

4. Environment Variables

   Create a .env file in the root directory:

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

5. Run the application

   Development mode (backend + frontend):

   npm run dev

   Backend only:

   npm start

   Frontend only:

   cd frontend
   npm start

API Endpoints

User Routes (/api/user)

Method	Endpoint	Description
POST	/	Register new user
POST	/login	Login user
GET	/	Search users (requires auth)

Chat Routes (/api/chat)

Method	Endpoint	Description
POST	/	Create/access one-to-one chat
GET	/	Fetch all user chats
POST	/group	Create group chat
PUT	/rename	Rename group
PUT	/groupadd	Add user to group
PUT	/groupremove	Remove user from group

Message Routes (/api/message)

Method	Endpoint	Description
POST	/	Send message
GET	/:chatId	Get all messages in chat

Socket Events

Event	Description
setup	Initialize user socket connection
join chat	Join a chat room
new message	Broadcast new message
message received	Receive new message
typing	User started typing
stop typing	User stopped typing

Database Models

User

• name, email, password (hashed), pic, isAdmin

Chat

• chatName, isGroupChat, users[], latestMessage, groupAdmin

Message

• sender, content, chat, readBy[]

Screenshots

The app includes:

• Login/Signup page with animated splash screen
• Chat list with latest message preview
• Real-time chat interface with typing indicators
• Group chat management modals
• User search drawer
• Profile viewing

License

MIT