💬 MyChatApp — Real-time Chat Application

MyChatApp is a modern, full-stack real-time chat application that brings people together through seamless instant messaging. Built with React and Express.js, it features real-time communication powered by Socket.io, a comprehensive friend management system, and a beautiful, responsive UI. Users can register with OTP email verification, manage their profiles with custom avatars, discover other users globally, send friend requests, and engage in private conversations with real-time typing indicators and online status tracking. Whether you're connecting with friends or meeting new people, MyChatApp delivers a smooth, secure, and engaging chat experience.

📌 Live Services

Layer	Platform	Link
Web	Vercel	https://chat91169.vercel.app/
Server	Render	https://chat-app-api-59jt.onrender.com

📁 Repository Structure

chat-app/
├─ backend/                          # Backend: Express + MongoDB + Socket.io
│  ├─ server.js                      # Main server entry point
│  ├─ package.json                   # Backend dependencies
│  ├─ admin/                         # Admin utilities
│  │  ├─ deleteAllMessages.js        # Script to delete all messages
│  │  └─ resetDatabase.js            # Script to reset the database
│  ├─ config/
│  │  ├─ cloudinary.js               # Cloudinary configuration for image uploads
│  │  └─ db.js                       # MongoDB connection setup
│  ├─ controllers/
│  │  ├─ auth.controller.js          # Login, logout, token refresh
│  │  ├─ authOtp.controller.js       # OTP-based signup flow
│  │  ├─ friend.controller.js        # Friend request management
│  │  ├─ messages.controller.js      # Message CRUD operations
│  │  ├─ profile.controller.js       # Profile updates and avatar
│  │  ├─ room.controller.js          # Chat room management
│  │  └─ users.controller.js         # User discovery
│  ├─ middleware/
│  │  ├─ authenticate.js             # JWT authentication middleware
│  │  └─ multer.js                   # File upload middleware
│  ├─ model/
│  │  ├─ friend.model.js             # Friendship schema
│  │  ├─ messages.model.js           # Message schema
│  │  ├─ rooms.model.js              # Chat room schema
│  │  ├─ signupOtp.model.js          # OTP verification schema
│  │  └─ user.model.js               # User schema
│  ├─ routes/
│  │  ├─ auth.routes.js              # /api/auth routes
│  │  ├─ friend.routes.js            # /api/friends routes
│  │  ├─ messages.routes.js          # /api/messages routes
│  │  ├─ profile.routes.js           # /api/profile routes
│  │  ├─ room.routes.js              # /api/rooms routes
│  │  └─ users.routes.js             # /api/users routes
│  ├─ socket/
│  │  ├─ index.js                    # Socket.io initialization
│  │  ├─ chat.js                     # Real-time chat handlers
│  │  ├─ friend.js                   # Real-time friend request handlers
│  │  ├─ userStatus.js               # Online/offline status tracking
│  │  └─ middleware/
│  │     └─ auth.js                  # Socket authentication middleware
│  ├─ uploads/                       # Temporary file uploads
│  └─ utils/
│     ├─ createOrGetRoom.js          # Room utility functions
│     ├─ sendEmail.js                # Brevo email service for OTP
│     └─ uploadImage.js              # Cloudinary upload utility
│
└─ frontend/                         # Frontend: React + Vite + Tailwind CSS
   ├─ index.html                     # HTML entry point
   ├─ package.json                   # Frontend dependencies
   ├─ vite.config.js                 # Vite configuration
   ├─ vercel.json                    # Vercel deployment config
   └─ src/
      ├─ main.jsx                    # React entry point
      ├─ App.jsx                     # App router and routes
      ├─ App.css                     # Global styles
      ├─ index.css                   # Tailwind imports
      ├─ api/
      │  └─ axios.jsx                # Axios instance with interceptors
      ├─ assets/                     # Static assets
      ├─ components/
      │  ├─ ChatSection.jsx          # Main chat interface
      │  ├─ ChatSidebar.jsx          # Navigation sidebar
      │  ├─ FriendsSection.jsx       # Friend management UI
      │  ├─ GlobalSection.jsx        # User discovery page
      │  ├─ ProfileSettings.jsx      # Profile settings page
      │  └─ VerifyOtp.jsx            # OTP verification component
      ├─ pages/
      │  ├─ Home.jsx                 # Main dashboard
      │  ├─ Login.jsx                # Login page
      │  └─ Signup.jsx               # Signup page
      ├─ socket/
      │  └─ index.js                 # Socket.io client setup
      └─ utils/
         └─ ProtectedRoute.jsx       # Auth route protection

🛠 Tech Stack

Languages & Frameworks

Frontend: React 19, JavaScript (ES Modules)
Backend: Express.js 5, Node.js
Database: MongoDB with Mongoose ODM
Real-time: Socket.io

Libraries & Tools

UI: Tailwind CSS, Lucide Icons
Notifications: React Hot Toast
Routing: React Router DOM v7
HTTP Client: Axios
Authentication: JSON Web Tokens (JWT), bcryptjs
File Uploads: Multer, Cloudinary
Email Service: Brevo (Sendinblue) for OTP emails
Build Tool: Vite 7
Development: Nodemon, ESLint
Deployment: Vercel (frontend), Render (backend)

🧩 High-Level Architecture

   ┌──────────────────────┐        ┌─────────────────────────┐        ┌─────────────────┐
   │   React + Vite       │  HTTP  │   Express.js API        │ Mongoose│   MongoDB       │
   │   (Frontend)         ├───────>│   /api/auth             ├────────>│   (Users,       │
   │                      │        │   /api/users            │         │    Messages,    │
   │   Tailwind CSS       │ Socket │   /api/friends          │         │    Rooms,       │
   │   React Router       ├───────>│   /api/messages         │         │    Friendships) │
   └──────────────────────┘  .io   │   /api/rooms            │         └─────────────────┘
                                   │   /api/profile          │
                                   └─────────────────────────┘
                                             │
                       ┌─────────────────────┼─────────────────────┐
                       │                     │                     │
                       ▼                     ▼                     ▼
              ┌────────────────┐   ┌────────────────┐   ┌────────────────┐
              │   Cloudinary   │   │     Brevo      │   │   Socket.io    │
              │   (Avatars)    │   │   (OTP Email)  │   │   (Real-time)  │
              └────────────────┘   └────────────────┘   └────────────────┘

Key Architecture Details:

Authentication: JWT-based with access tokens (1 hour) and refresh tokens (7 days) stored in httpOnly cookies
Real-time Communication: Socket.io handles live messaging, online status, and friend request notifications
Token Refresh: Automatic token rotation with failed request retry queue
File Storage: Avatar images uploaded to Cloudinary via Multer middleware
Email Verification: OTP-based signup flow using Brevo SMTP API
CORS: Configured for frontend origin with credentials enabled

🚀 Features

Authentication & Security

Email + password registration with OTP verification
Secure login with JWT access and refresh tokens
Automatic token refresh with request retry mechanism
Password hashing with bcryptjs
Protected routes for authenticated users only

User Management

Custom user profiles with avatar uploads
Profile name and password updates
Global user discovery with pagination
Real-time online/offline status tracking
Last seen timestamps for offline users

Friend System

Send, accept, and reject friend requests
Cancel outgoing friend requests
Remove existing friends
View pending, sent, accepted, and rejected requests
Real-time friend request notifications

Messaging

Private one-on-one chat rooms
Real-time message delivery via Socket.io
Unsend messages functionality
Unread message count tracking
Mark messages as read
Message history persistence

Chat Experience

Search and filter conversations
Sort chats alphabetically or by recent activity
Filter to show unread chats only
Online status indicators
Responsive chat interface
Toast notifications for actions

UI/UX

Modern, clean design with Tailwind CSS
Responsive layout for all screen sizes
Gradient accents and smooth transitions
Loading states and error handling
Navigation sidebar with tab switching

📡 API Endpoints

Base URL (local): http://localhost:5000
All authenticated routes require a valid Bearer token in the Authorization header.

Authentication Routes

Endpoint	Method	Description	Access
`/api/auth/send-otp`	POST	Send OTP to email for signup	Public
`/api/auth/verify-otp`	POST	Verify OTP and create account	Public
`/api/auth/login`	POST	Login with email and password	Public
`/api/auth/refresh-token`	POST	Refresh access token using cookie	Public
`/api/auth/logout`	POST	Logout and clear refresh token	Public

User Routes

Endpoint	Method	Description	Access
`/api/users/all`	GET	Get all users with pagination	Auth required

Friend Routes

Endpoint	Method	Description	Access
`/api/friends/request`	POST	Send a friend request	Auth required
`/api/friends/accept`	POST	Accept a friend request	Auth required
`/api/friends/reject`	POST	Reject a friend request	Auth required
`/api/friends/remove`	POST	Remove an existing friend	Auth required
`/api/friends/cancel`	POST	Cancel a sent friend request	Auth required
`/api/friends/pending`	GET	Get pending friend requests	Auth required
`/api/friends/sent`	GET	Get sent friend requests	Auth required
`/api/friends/list`	GET	Get accepted friends list	Auth required
`/api/friends/rejected`	GET	Get rejected requests	Auth required
`/api/friends/status/:friendId`	GET	Check friendship status	Auth required

Message Routes

Endpoint	Method	Description	Access
`/api/messages/:roomId`	GET	Get messages for a room	Auth required
`/api/messages`	POST	Send a message	Auth required
`/api/messages/unsend/:messageId`	PUT	Unsend a message	Auth required

Room Routes

Endpoint	Method	Description	Access
`/api/rooms/my`	GET	Get user's chat rooms	Auth required
`/api/rooms/with/:friendId`	GET	Get or create room with friend	Auth required
`/api/rooms/:roomId/mark-read`	POST	Mark room messages as read	Auth required

Profile Routes

Endpoint	Method	Description	Access
`/api/profile/update`	PUT	Update profile name	Auth required
`/api/profile/avatar`	PUT	Upload/update avatar image	Auth required
`/api/profile/change-password`	PUT	Change account password	Auth required

⚙️ Installation (Local Development)

Prerequisites

Node.js >= 18.x
npm or yarn
MongoDB (local or MongoDB Atlas)
Cloudinary account (for avatar uploads)
Brevo account (for OTP emails)

1) Clone the repository

git clone https://github.com/silence91169/chat-app.git
cd chat-app

2) Backend Setup

cd backend
npm install

Create a .env file in the backend directory (see Environment Variables).

Start the backend server:

# Development mode with hot reload
npm run dev

# Production mode
npm start

The backend will run on http://localhost:5000.

3) Frontend Setup

cd frontend
npm install

Create a .env file in the frontend directory (see Environment Variables).

Start the frontend development server:

npm run dev

The frontend will run on http://localhost:5173.

🔐 Environment Variables

Backend (`backend/.env`)

# Server
PORT=5000
NODE_ENV=development

# MongoDB Connection
MONGO_URI=mongodb://localhost:27017/chatapp

# JWT Secrets (use strong random strings)
ACCESS_TOKEN_SECRET=your-access-token-secret
REFRESH_TOKEN_SECRET=your-refresh-token-secret

# Frontend URL (for CORS)
FRONTEND_URL=http://localhost:5173

# Cloudinary Configuration
CLOUDINARY_CLOUD_NAME=your-cloud-name
CLOUDINARY_API_KEY=your-api-key
CLOUDINARY_API_SECRET=your-api-secret

# Brevo Email Configuration
BREVO_API_KEY=your-brevo-api-key
EMAIL=[email protected]

Frontend (`frontend/.env`)

# Backend API URL
VITE_API_URL=http://localhost:5000

🧪 Usage Guide

Running the Application

Start the backend server (from backend/ directory):
```
npm run dev
```

Frontend Testing

cd frontend
npm test

🚀 Deployment

Backend Deployment (Railway/Render/Heroku)

Set environment variables in your hosting platform
Update FRONTEND_URL to your production URL
Set NODE_ENV=production
Deploy using Git or CLI

Frontend Deployment (Vercel/Netlify)

Build the project:

npm run build

Set VITE_API_URL to your backend URL
Deploy the dist folder

🤝 Contributing

Contributions are welcome! Please follow these steps:

Fork the repository
Create a feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

Shitanshu Singh

GitHub: @silence91169
Repository: chattingAPP

🙏 Acknowledgments

React - Frontend framework
Express - Backend framework
MongoDB - Database
Socket.IO - Real-time engine
Tailwind CSS - Styling
Cloudinary - Image hosting
Brevo - Email service

📞 Support

If you have any questions or need help, please:

Open an issue
Contact: [email protected]

Made with ❤️ by Shitanshu Singh

⭐ Star this repository if you found it helpful!

Name		Name	Last commit message	Last commit date
Latest commit History 5 Commits
backend		backend
frontend		frontend
README.md		README.md

Silence91169/chat-app

Folders and files

Latest commit

History

Repository files navigation