Real-Time Chat App 🌐

A fully functional real-time chat application built with the MERN stack, enhanced by Socket.io for live messaging and JWT for secure authentication. This project demonstrates expertise in both frontend and backend technologies, and is designed to be scalable, efficient, and user-friendly.

🎉 Live Demo

Check out the live applications:

• Real-time Chat App: https://realtime-chat-app-xypc.onrender.com

🌌 Screenshots

Signup Page

Login Page

Welcome Page

Chat Page

🚀 Features

Core Functionality

🚀 Real-Time Messaging: Send and receive messages instantly with Socket.IO. 👥 Private and Group Chats: Support for one-on-one and group conversations. 🛡️ Secure Authentication: User login and signup powered by JWT. 🖼️ Profile Management: Update and manage user profiles. 🔔 Notifications: Real-time notifications for new messages and activities.

Backend Features

🗄️ MongoDB Integration: Efficient database management for users, messages, and groups. 🚀 Socket.IO: Real-time communication for instant messaging. 🔑 JWT Authentication: Secure token-based user authentication. 🔒 Security Features: Data encryption and protection mechanisms.

Frontend Features

🎨 Responsive UI: Built with Tailwind CSS for a modern and adaptable design. 🛠️ React Components: Modular and reusable components for scalability. 👑 User Dashboard: Manage chats, notifications, and user settings. 📊 Message Search: Quickly find past messages with a search feature.

Technologies Used

Technology Purpose

Node.js & Express.js Backend framework for API development MongoDB & Mongoose Database and object modeling Socket.IO Real-time communication React & Vite Frontend framework and development tool Tailwind CSS Styling for responsive and modern UI JWT Authentication and token management

⚙️ Setup and Installation

Clone the repository

1. git clone https://github.com/yourusername/realtime-chat-app.git cd realtime-chat-app

2. Navigate to the project directory: Navigate to the project directory:

3. Install dependencies: npm install

4. Configure the .env file with the following: PORT=5000
   MONGO_URI=your_mongo_uri
   SOCKET_URL=your_socket_url

5. Run the development server: npm run dev

6. Build and start the app: npm run build
   npm start

The application will be available at http://localhost:3000 for frontend and http://localhost:5000 for backend.

Key Highlights

Real-Time Communication: Powered by Socket.IO for instantaneous messaging. Modern UI: Built with Tailwind CSS, ensuring responsive and user-friendly design. Scalability: Structured to handle a large number of concurrent users. Secure Authentication: Robust JWT-based system for user authentication.

Resume-Worthy Skills Demonstrated

Building real-time applications with Socket.IO. Secure authentication using JWT. Implementing responsive design with Tailwind CSS. MongoDB integration for efficient data storage. Developing reusable React components for scalability.

Author

Kazi Azahar Uddin
Full-Stack Developer | Open to work

• GitHub: KAZI-AZAHAR-UDDIN
• LinkedIn: Kazi Azahar Uddin