💬 CHATAPP 💬

A Dynamic Real-Time Messaging Platform

CHATAPP.webm

💡 About The Project

CHATAPP is a dynamic real-time messaging platform where users can sign up, log in, and connect with others through friend requests. Once accepted, users can chat privately or create group chats. Group creators can manage members and settings, while all users can share media files, view online status, and track unseen messages. The app also supports notifications, profile editing, account deletion, and chat management—offering a seamless and interactive communication experience.

"Connect, communicate, and collaborate in real-time with a modern messaging experience."

✨ Key Features

👤 User Management 🔐 Secure registration and login 🔍 User search functionality 👥 Friend request system 🔔 Real-time notifications 📝 Profile editing and account management	💬 Messaging Features 📨 Private one-on-one messaging 👥 Group chat creation and management 📁 Media file sharing (images, videos, audio, PDFs) 🗑️ Message and chat deletion 👁️ Unread message indicators
👥 Group Management ➕ Add or remove group members ✏️ Edit group information 👑 Creator privileges 🚪 Leave group option	🎯 User Experience 🟢 Online status indicators 📊 Unread message counters 🚫 User blocking capability ⚡ Smooth animations with Framer Motion

🛠️ Technologies Used

🚀 Installation & Setup

# 1. Clone the repository
git clone https://github.com/debjitmitra000/FrontendChatApp.git
# 2. Navigate to the project directory
cd FrontendChatApp
# 3. Install dependencies
npm install
# 4. Create .env file with the following:
VITE_SERVER=http://localhost:8000
# 5. Start the development server
npm run dev
# 6. Build for production
npm run build

🔍 How It Works

1. User Authentication

   • Register a new account
   • Log in to the platform
   • Edit profile information

2. Managing Connections

   • Search for other users
   • Send and manage friend requests
   • Receive real-time notifications
   • Accept, reject, or block requests

3. Messaging

   • Engage in private conversations
   • Create and manage group chats
   • Share media files (images, videos, audio, PDFs)
   • Delete messages or entire conversations

4. Real-time Features

   • See who's online with status indicators
   • Track unread messages with counters
   • Receive instant notifications
   • Experience smooth UI transitions

🌟 Benefits

• Real-time Communication: Instant messaging with Socket.IO integration
• Comprehensive Media Support: Share various file types seamlessly
• Intuitive User Experience: Clean interface with responsive design
• Robust Group Management: Full control over group conversations
• Enhanced Privacy: Block users and manage friend connections
• Smooth Animations: Polished UI transitions with Framer Motion

---

Experience modern real-time messaging

_{Built with ❤️ by Debjit Mitra}