https://github.com/dineshkarthikn/chat-web
A real-time MERN stack chat application with: Authentication, Real-time Messaging, Cloud Image Uploads
https://github.com/dineshkarthikn/chat-web
authentication chat-application cloudinary express jwt mern nodejs react real-time-messaging socket-io
Last synced: 3 months ago
JSON representation
A real-time MERN stack chat application with: Authentication, Real-time Messaging, Cloud Image Uploads
- Host: GitHub
- URL: https://github.com/dineshkarthikn/chat-web
- Owner: DINESHKARTHIKN
- Created: 2025-05-04T13:32:27.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-06T14:00:50.000Z (about 1 year ago)
- Last Synced: 2025-06-24T04:05:23.146Z (about 1 year ago)
- Topics: authentication, chat-application, cloudinary, express, jwt, mern, nodejs, react, real-time-messaging, socket-io
- Language: JavaScript
- Homepage:
- Size: 5.6 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 💬 MERN Chat Application
A real-time full-stack chat application built using the **MERN stack** (MongoDB, Express, React, Node.js) with **Socket.io** for real-time communication.
## ✨ Features
- 🔐 Authentication & Authorization using **JWT**
- 👾 Real-time messaging powered by **Socket.io**
- 🟢 Online user presence status
- ☁️ Cloudinary image upload support
- ✅ Error handling on both client and server
- 🔐 Passwords hashed using **bcryptjs**
- 🍪 JWT stored in HTTP-only cookies for session management
- ⚡ Modern UI with **React**, **Lucide Icons**, and **Zustand** for state management
---
## 📸 Screenshots
### Signup Page
### Login Page
### Profile Page
### Chat Page
---
## 🚀 Tech Stack
### 🖥️ Frontend
- **React**
### 🌐 Backend
- **Node.js**
- **Express**
### 🗄️ Database
- **MongoDB**
- **Cloudinary** (for image storage)
---
## 🛠️ Libraries
### Frontend Libraries
- **React Router DOM** (for navigation and routing between different pages)
- **Axios** (for making HTTP requests to the backend)
- **Zustand** (for state management and storing application data globally)
- **Lucide React** (for providing icons to enhance UI)
- **React Hot Toast** (for showing toast notifications on the client)
### Backend Libraries
- **Mongoose** (for MongoDB interactions)
- **Socket.io** (for real-time messaging)
- **dotenv** (for environment variables)
- **jsonwebtoken** (for JWT authentication)
- **bcryptjs** (for password hashing)
- **cookie-parser** (for handling cookies)
- **cloudinary** (for image uploading)
- **cors** (for Cross-Origin Resource Sharing)
---
## 🛠️ Installation & Setup
### 1. Clone the repository
```bash
git clone https://github.com/yourusername/your-chat-app.git
cd your-chat-app
```
### 2. Install server dependencies
```bash
cd server
npm install
```
### 3. Install client dependencies
```bash
cd ../client
npm install
```
### 4. Setup environment variables
Create a `.env` file in the `/server` directory and add:
```env
MONGODB_URI=your_mongo_connection_string
PORT=5001
JWT_SECRET=your_jwt_secret
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret
NODE_ENV=development
```
---
## ▶️ Run the application
### Start the backend server
```bash
cd server
npm run dev
```
### Start the frontend client
```bash
cd client
npm run dev
```
---
## 📂 Folder Structure
```
client/ # React frontend
server/ # Node.js + Express backend
```
---
## 🙌 Acknowledgements
This project uses:
- [Cloudinary](https://cloudinary.com/)
- [Socket.io](https://socket.io/)
- [Lucide Icons](https://lucide.dev/)
- [Zustand](https://zustand-demo.pmnd.rs/)
## 🤝 Contributing
Contributions are welcome! Fork the repo and create a pull request.