💬 Chat App

A full-stack real-time chat application built with React and Node.js, featuring instant messaging, media sharing, status updates, and more.

✨ Features

Authentication & User Management

• Email-based OTP authentication
• User profile management with profile pictures
• Online/offline status tracking
• Last seen functionality
• User verification system

Messaging

• Real-time messaging using Socket.io
• One-on-one conversations
• Message status tracking (sent, delivered, read)
• Image and video sharing
• Message timestamps

Status Feature

• WhatsApp-like status updates
• View and manage status posts

User Experience

• Modern, responsive UI built with Tailwind CSS
• Smooth animations with Framer Motion
• Toast notifications
• Dark/Light theme support
• Real-time updates

🛠️ Tech Stack

Frontend

• React 19.1.1 - UI library
• Vite 7.1.7 - Build tool and dev server
• React Router DOM 7.9.5 - Routing
• Zustand 5.0.8 - State management
• Tailwind CSS 4.1.17 - Styling
• Radix UI - Accessible UI components
• Framer Motion 12.23.24 - Animations
• Socket.io Client - Real-time communication
• Axios 1.13.2 - HTTP client
• React Toastify 11.0.5 - Notifications

Backend

• Node.js - Runtime environment
• Express 5.1.0 - Web framework
• Socket.io 4.8.1 - Real-time communication
• MongoDB with Mongoose 8.19.2 - Database
• JSON Web Token (JWT) 9.0.2 - Authentication
• Nodemailer 7.0.10 - Email service (OTP)
• Multer 2.0.2 - File upload handling
• Cloudinary 2.8.0 - Image/video storage
• ImageKit 6.0.0 - Image processing
• Twilio 5.10.4 - SMS services (optional)
• Express Rate Limit 8.2.1 - Rate limiting
• CORS 2.8.5 - Cross-origin resource sharing
• Cookie Parser 1.4.7 - Cookie handling

📁 Project Structure

chat-app/
├── backend/
│   ├── config/          # Configuration files (Cloudinary, ImageKit)
│   ├── controllers/     # Route controllers
│   ├── db/             # Database connection
│   ├── middlewares/    # Auth, upload, etc.
│   ├── models/         # Mongoose models (User, Message, Conversation, Status)
│   ├── routes/         # API routes
│   ├── services/       # Socket.io service
│   ├── utils/          # Utility functions
│   └── server.js       # Entry point
│
├── frontend/
│   ├── public/         # Static assets
│   ├── src/
│   │   ├── components/ # Reusable components
│   │   ├── pages/      # Page components
│   │   ├── routes/     # Route configuration
│   │   ├── services/   # API services
│   │   ├── store/      # Zustand stores
│   │   ├── utils/      # Utility functions
│   ├── index.html
│   └── vite.config.js
│
└── README.md

🚀 Getting Started

Prerequisites

• Node.js (v18 or higher)
• MongoDB (local or cloud instance like MongoDB Atlas)
• npm or yarn package manager

Installation

1. Clone the repository

   git clone <repository-url>
   cd chat-app

2. Install backend dependencies

   cd backend
   npm install

3. Install frontend dependencies

   cd ../frontend
   npm install

Configuration

1. Backend Environment Variables

   Create a .env file in the backend directory:

   PORT=8000
   MONGODB_URI=your_mongodb_connection_string
   JWT_SECRET=your_jwt_secret_key
   FRONTEND_URL=http://localhost:5173
   
   # Email Configuration (for OTP)
   EMAIL_HOST=smtp.gmail.com
   EMAIL_PORT=587
   EMAIL_USER=your_email@gmail.com
   EMAIL_PASS=your_email_password
   
   # Cloudinary Configuration
   CLOUDINARY_CLOUD_NAME=your_cloud_name
   CLOUDINARY_API_KEY=your_api_key
   CLOUDINARY_API_SECRET=your_api_secret

2. Frontend Environment Variables

   Create a .env file in the frontend directory (if needed):

   VITE_API_URL=http://localhost:8000/api

Running the Application

1. Start the backend server

   cd backend
   npm start

   The server will start on http://localhost:8000

2. Start the frontend development server

   cd frontend
   npm run dev

   The frontend will be available at http://localhost:5173

📝 API Endpoints

Authentication

• POST /api/auth/send-otp - Send OTP to email
• POST /api/auth/verify-otp - Verify OTP and login
• PUT /api/auth/update-profile - Update user profile (requires auth)
• GET /api/auth/logout - Logout user (requires auth)
• GET /api/auth/check-auth - Check authentication status (requires auth)
• GET /api/auth/get-all-users - Get all users (requires auth)

Messaging

• GET /api/chat/conversations - Get all conversations (requires auth)
• POST /api/chat/send-message - Send a message (requires auth)
• GET /api/chat/messages/:conversationId - Get messages for a conversation (requires auth)

Status

• GET /api/status - Get all statuses (requires auth)
• POST /api/status - Create a new status (requires auth)
• DELETE /api/status/:statusId - Delete a status (requires auth)

🔐 Authentication

The app uses JWT (JSON Web Tokens) for authentication. After verifying the OTP, users receive a JWT token that is stored in HTTP-only cookies for security.

🎨 Features in Detail

Real-time Messaging

• Instant message delivery using Socket.io
• Message status updates (sent, delivered, read)
• Typing indicators (if implemented)
• Online/offline user presence

Media Sharing

• Upload and share images
• Upload and share videos
• Media stored in Cloudinary/ImageKit
• Optimized delivery

User Profiles

• Customizable profile pictures
• About/bio section
• Online status indicator

🧪 Development

Backend Scripts

• npm start - Start the server with nodemon (auto-reload on changes)

Frontend Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

🔒 Security Features

• Rate limiting to prevent abuse
• JWT-based authentication
• HTTP-only cookies for token storage
• CORS configuration
• Input validation
• Secure file upload handling

🚧 Future Enhancements

• Group chat functionality
• Message encryption
• Push notifications
• File sharing (documents, PDFs)
• Message search
• Chat backups
• Read receipts

👥 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📧 Support

For support, email beingaditya198@gmail.com or create an issue in the repository.

---

Built with ❤️ using React and Node.js