💬 Basic MERN Chat Application

A beginner-friendly full-stack real-time chat application built using the MERN stack, modern frontend tooling, and WebSocket-based communication.

---

📌 Project Introduction

The Basic MERN Chat Application is a full-stack real-time messaging platform that allows users to securely communicate with each other. This project was built to strengthen understanding of full-stack development, real-time communication, authentication systems, and modern frontend architecture.

The application demonstrates how different technologies in the MERN ecosystem work together to create scalable and interactive web applications. It focuses on performance, security, and user experience while keeping the implementation beginner-friendly and easy to understand.

---

🚀 Features

• 🔐 Secure user authentication (Signup & Login)
• 💬 Real-time messaging using WebSockets
• 🟢 Online user presence tracking
• 🍪 Cookie-based session management
• 🔔 Interactive toast notifications
• 📱 Fully responsive modern UI
• ⚡ Fast frontend bundling using Vite
• 🔄 Global state management using Redux Toolkit

---

🛠 Tech Stack

🎨 Frontend Technologies

• React (Vite) – Fast and modern frontend framework
• Tailwind CSS – Utility-first styling framework
• DaisyUI – Pre-built Tailwind UI components
• React Router DOM – Client-side routing
• Axios – API request handling
• Redux Toolkit – Global state management
• Socket.io Client – Real-time communication
• React Icons – UI icon support
• React Hot Toast – Notification system

---

⚙️ Backend Technologies

• Node.js – Backend runtime environment
• Express.js – Backend web framework
• MongoDB – NoSQL database
• Mongoose – MongoDB object modeling
• cookie-parser – Cookie handling middleware
• bcryptjs – Password hashing
• JSON Web Token (JWT) – Authentication system
• CORS – Cross-origin request handling
• Socket.io – Real-time server communication

---

📸 Screenshots

---

⚙️ Installation & Setup

Follow these steps to run the project locally.

---

1️⃣ Backend Setup

Run the server:

cd server
npm install
npm run dev

Create a .env file in the server folder:

PORT=5000
MONGODB_URL=your_mongodb_connection_string
JWT_SECRET=your_secret_key
JWT_EXPIRES="2d"
COOKIE_EXPIRES=2
CLIENT_URL="http://localhost:5173"

2️⃣ Frontend setup

Run the client:

cd client
npm install
npm run dev

Create a .env file in the client folder:

VITE_DB_URL="http://localhost:5000/api/v1"
VITE_DB_ORIGIN="http://localhost:5000"

---

👨‍💻 Author

Kishan Kumar

• GitHub: https://github.com/Kishan-code
• LinkedIn: https://www.linkedin.com/in/kishan-kumar-6772a2338/