💬 Mina Chat App

A modern, feature-rich real-time chat application built with Node.js, Express, React, and Socket.io. Connect with friends, share stories, and communicate seamlessly with an intuitive interface.

✨ Features

🔐 Authentication & User Management

• User registration with email verification
• Secure JWT-based authentication
• Username uniqueness checking
• Avatar upload and management
• User profile with bio updates
• Account verification system

💭 Messaging

• Real-time messaging using WebSocket (Socket.io)
• Message editing and deletion
• Message reactions and emoji support
• Message pinning for important conversations
• Message starring for quick access
• File sharing capabilities
• Typing indicators
• Read receipts

👥 Friend Management

• Add and remove friends
• Friend request system with pending requests
• Accept/reject friend requests
• Search friends functionality
• Advanced user search
• Block user functionality
• View friend lists

📖 Stories

• Share temporary stories (like social media stories)
• Story creation with media uploads
• Story deletion
• View friend stories

🎨 User Experience

• Modern, responsive UI with Tailwind CSS
• Smooth animations with Framer Motion
• Emoji picker for expressive messaging
• File upload with preview
• Dark/Light mode support
• Real-time notifications

🛠 Tech Stack

Backend

• Framework: Express.js (Node.js)
• Real-time Communication: Socket.io
• Database: MongoDB with Mongoose ODM
• Authentication: JWT (JSON Web Tokens)
• Password Hashing: Bcrypt
• Email Service: Nodemailer
• File Upload: Multer
• CORS: Cross-Origin Resource Sharing enabled

Frontend

• UI Framework: React 18
• Styling: Tailwind CSS
• HTTP Client: Axios
• Real-time Client: Socket.io Client
• Routing: React Router v6
• Animations: Framer Motion
• Video Processing: FFmpeg
• File Upload: FilePond
• Image Compression: Browser Image Compression
• Icons: React Icons
• Additional: Emoji Picker, JWT Decode, Lodash

📁 Project Structure

Chat-App/
├── backend/
│   ├── config/              # Database configuration
│   ├── controllers/         # Route controllers (Auth, User, Messages, etc.)
│   ├── middlewares/         # Express middlewares (JWT validation, Socket auth)
│   ├── models/              # MongoDB schemas (User, Message, Chat, Story)
│   ├── routes/              # API routes
│   ├── utils/               # Utility functions (file storage, helpers)
│   ├── index.js            # Main server file
│   ├── websocket.js        # Socket.io event handlers
│   ├── package.json
│   └── .env                # Environment variables
│
└── frontend/
    ├── src/
    │   ├── components/     # React components
    │   ├── App.jsx        # Main App component
    │   ├── index.js       # Entry point
    │   └── index.css      # Global styles
    ├── public/            # Static assets
    ├── package.json
    ├── tailwind.config.js # Tailwind configuration
    └── .gitignore

🚀 Getting Started

Prerequisites

• Node.js (v14 or higher)
• npm or yarn
• MongoDB (local or cloud instance)
• Modern web browser

Backend Setup

1. Navigate to backend directory

   cd backend

2. Install dependencies

   npm install

3. Create environment file (.env)

   PORT=5000
   MONGODB_URI=mongodb://localhost:27017/chat-app
   JWT_SECRET=your_jwt_secret_key
   BASE_URL=http://localhost:3000
   EMAIL_USER=your_email@gmail.com
   EMAIL_PASSWORD=your_email_password

4. Start the server

   # Development mode with hot reload
   npm run dev
   
   # Production mode
   npm start

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

Frontend Setup

1. Navigate to frontend directory

   cd frontend

2. Install dependencies

   npm install

3. Create environment file (.env)

   REACT_APP_API_URL=http://localhost:5000

4. Start the development server

   npm start

The frontend will run on http://localhost:3000

📡 API Endpoints

Authentication Routes

• POST /signup - Register new user
• POST /login - User login
• GET /verify-email - Email verification
• POST /check-username - Check username availability
• GET /checkSession - Check user session (Protected)
• GET /is-verified - Check if user is verified

User Routes (All Protected)

• GET /users/personalinfo/:userId - Get user profile
• GET /users/friends - Get user's friends list
• GET /users/search-friends - Search friends
• GET /users/search - Search users
• POST /users/friend-request - Send friend request
• GET /users/pending-friends - Get pending friend requests
• POST /users/accept-friend - Accept friend request
• POST /users/reject-friend - Reject friend request
• POST /users/remove-friend - Remove friend
• POST /users/block-user - Block a user
• POST /users/update-avatar - Update user avatar
• POST /users/update-bio - Update user bio

Messages Routes (All Protected)

• GET /messages/get/:userId - Get messages with a user
• POST /messages/send - Send message(s)
• DELETE /messages/delete/:messageId - Delete message
• POST /messages/star/:messageId - Star a message
• POST /messages/react/:messageId - Add reaction to message
• PUT /messages/edit/:messageId - Edit message
• POST /messages/pin/:chatId - Pin message

Chat Routes (All Protected)

• GET /users/chats - Get all user chats
• POST /users/remove-chat - Remove a chat

Story Routes (All Protected)

• POST /users/add-story - Create a story
• POST /users/delete-story - Delete a story

🔌 WebSocket Events

Connection

• connection - User connects to socket
• disconnect - User disconnects

Messaging

• send_message - Send a message
• receive_message - Receive a message
• edit_message - Edit a message
• delete_message - Delete a message
• typing - Show typing indicator
• stop_typing - Hide typing indicator

Presence

• user_online - User comes online
• user_offline - User goes offline
• status_update - Status/presence update

🔒 Security Features

• JWT authentication for API endpoints
• Socket.io authentication middleware
• Password hashing with Bcrypt
• CORS configuration for authorized origins
• Email verification system
• Protected routes requiring authentication
• Secure environment variable management

📝 Environment Variables

Backend (.env)

PORT=5000
MONGODB_URI=your_mongodb_connection_string
JWT_SECRET=your_secret_key
BASE_URL=http://localhost:3000
EMAIL_USER=your_email
EMAIL_PASSWORD=your_email_password

Frontend (.env)

REACT_APP_API_URL=http://localhost:5000

🎯 Usage Guide

Creating an Account

1. Navigate to signup page
2. Fill in username, email, and password
3. Upload profile picture (optional)
4. Verify email from verification link
5. Login with credentials

Adding Friends

1. Go to the search section
2. Search for friends by username
3. Click "Add Friend" to send a request
4. Wait for friend to accept your request

Sending Messages

1. Select a friend from your chat list
2. Type your message in the input field
3. Click send or press Enter
4. Messages appear in real-time

Sharing Stories

1. Click on "Add Story" button
2. Upload media file (image/video)
3. Story appears for your friends
4. Stories auto-delete after 24 hours (configurable)

Message Features

• React: Click reaction icon to add emoji reactions
• Star: Star important messages for quick access
• Pin: Pin messages to keep them at the top
• Edit: Edit messages you've sent
• Delete: Remove messages
• Share Files: Upload and share files with friends

🐛 Troubleshooting

Backend Connection Issues

• Verify MongoDB is running
• Check MongoDB URI in .env
• Ensure port 5000 is not in use
• Check CORS configuration

Frontend Connection Issues

• Verify backend is running on correct port
• Check REACT_APP_API_URL in .env
• Clear browser cache and cookies
• Check browser console for errors

Email Verification Not Working

• Verify Nodemailer configuration
• Check EMAIL_USER and EMAIL_PASSWORD in .env
• Enable "Less secure app access" for Gmail
• Check spam folder for verification email

📦 Dependencies Overview

Backend Key Dependencies

• express - Web framework
• socket.io - Real-time bidirectional communication
• mongoose - MongoDB ODM
• jsonwebtoken - JWT authentication
• bcrypt - Password hashing
• multer - File upload handling
• nodemailer - Email service
• cors - Cross-origin resource sharing

Frontend Key Dependencies

• react - UI library
• react-router-dom - Routing
• axios - HTTP client
• socket.io-client - Socket client
• tailwindcss - CSS framework
• framer-motion - Animation library

🤝 Contributing

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

📄 License

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

👤 Author

Created by Mina (@minaa66)

📧 Support

For support, email or create an issue in the GitHub repository.

🎓 Learning Resources

• Express.js Documentation
• Socket.io Documentation
• React Documentation
• MongoDB Documentation
• Tailwind CSS Documentation

---

Last Updated: March 2026

Enjoy connecting with your friends! 🚀