Connect

A real-time chat application built with the MERN stack and WebSockets, designed for seamless communication through private chat rooms , persistent messages and instant messaging.

---

🚀 Live Demo

🔗 https://chat-frontend-ivory-eta.vercel.app

---

📌 Overview

Connect is a full-stack real-time messaging platform where users can:

• Create private chat rooms
• Join rooms using a Room Name
• Send and receive messages instantly
• View previous chat history
• Manage your profile

---

✨ Features

🔐 Authentication

• User registration and login
• Secure password hashing using bcrypt
• JWT-based authentication stored in cookies
• Protected routes for authorized users only

💬 Real-Time Persistent Messaging

• Messages are saved in mogodb database
• Instant messaging with WebSockets
• Live updates without refreshing

🏠 Rooms System

• Room-based isolated conversations
• Create chat rooms
• Join existing rooms using room name

---

✨ Features & Interface

1 . Authentication

• Secure Signup and Login system
• Password hashing using bcrypt
• JWT-based authentication stored in cookies
• Protected routes for authenticated users only
  
  
• Login page

• SignUp page

2. Home Page

• Sidebar navigation
• Create or Join chat rooms
  
  
• Home Page

---

4. Create Room

• Generate a unique Room ID
• Share Room ID with friends instantly

📷 Screenshot

---

5. Join Room

• Join existing chat rooms using Room ID

📷 Screenshot

---

6. Real-Time Messaging

• Send and receive messages instantly
• Messages persist in MongoDB
• WhatsApp-like chat interface
• Grouped messages with timestamps
  
  

---

7. Profile Management

• Update profile picture
• Edit user details
  
  

---

🛠️ Tech Stack

Frontend

• React.js

• Vite
  
• Tailwind CSS
  
• Axios
• React Router DOM

Backend

• Node.js

- Express.js

• WebSocket (ws) library

Database

• MongoDB

---

⚙️ Installation & Setup

1️⃣ Clone the Repository

git clone https://github.com/GitAditya404/chat.git
cd chat

2️⃣ Setup Frontend

cd frontend
npm install
npm run dev

3️⃣ Setup Backend

cd backend
npm install
npm start

Setup Environment Variables

Create a .env file in the backend folder:

PORT = 5000
MONGODb_URI = your_mongodb_connection_string
JWT_SECRET = your_secret_key