https://github.com/sanjanayadav07/quickchat
## 📖 About QuickChat is a real-time chat application built with the MERN stack and Socket.io. It allows users to sign up, update profiles with pictures, see online/offline status, and chat instantly with others.
https://github.com/sanjanayadav07/quickchat
authorization axios-react express html-css-javascript mognodb nodejs react-router reactjs responsive-design socket-io tailwind-css vercel-deployment
Last synced: 2 months ago
JSON representation
## 📖 About QuickChat is a real-time chat application built with the MERN stack and Socket.io. It allows users to sign up, update profiles with pictures, see online/offline status, and chat instantly with others.
- Host: GitHub
- URL: https://github.com/sanjanayadav07/quickchat
- Owner: Sanjanayadav07
- Created: 2025-09-22T09:48:41.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-09-22T11:44:27.000Z (9 months ago)
- Last Synced: 2025-09-22T12:04:05.554Z (9 months ago)
- Topics: authorization, axios-react, express, html-css-javascript, mognodb, nodejs, react-router, reactjs, responsive-design, socket-io, tailwind-css, vercel-deployment
- Language: JavaScript
- Homepage: https://quick-chat-sage.vercel.app
- Size: 1.65 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 💬 QuickChat - Real-time Chat Application ⚡
QuickChat is a **⚡ real-time chat application** built with the **MERN stack** (🍃 MongoDB, 🚏 Express.js, ⚛️ React.js, 🟩 Node.js) and **📡 Socket.io**.
It supports **🔑 user authentication, 🟢 online status, 🖼️ profile pictures, and 💬 real-time messaging**.
---
## ✨ Features ✨
- 🔑 **User Authentication** (Signup/Login with JWT)
- 👤 **User Profiles** with profile picture
- 🟢 **Online/Offline User Status**
- 💬 **Real-time Messaging** using Socket.io
- 📸 **Image & File Uploads** (Cloudinary integration)
- 📱 **Responsive UI** with React
- 🔔 **Typing Indicators & Message Notifications**
---
## 🛠️ Tech Stack 🛠️
**🎨 Frontend:**
- ⚛️ React.js + ⚡ Vite
- 🎨 TailwindCSS / CSS
- 📡 Axios
**⚙️ Backend:**
- 🟩 Node.js
- 🚏 Express.js
- 🍃 MongoDB + 🧩 Mongoose
- 📡 Socket.io
- 🔐 JWT Authentication
- ☁️ Cloudinary (for media upload)
**☁️ Deployment:**
- ▲ Vercel (Frontend + Backend)
- 🍃 MongoDB Atlas (Database)
---
📂 Project Structure
```
QuickChat/
│
├── client/ 🎨 # React frontend
│ └── src/
│ ├── components/
│ ├── pages/
│ └── context/
│
├── server/ ⚙️ # Node.js backend
│ ├── routes/
│ ├── models/
│ ├── controllers/
│ └── server.js
│
└── README.md 📖
```
## 🚀 Getting Started 🚀
### 1️⃣ Clone the repository
```bash
git clone https://github.com//QuickChat.git
cd QuickChat
```
## 2️⃣ Setup Backend
```
cd server
npm install
```
Create a .env file inside server/:
```
MONGO_URI=your_mongodb_connection
JWT_SECRET=your_jwt_secret
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret
PORT=5000
```
Start backend:
```
npm start
```
## 3️⃣ Setup Frontend
```
cd ../client
npm install
npm run dev
```
## 📝 License 📜
MIT License – Free to use & modify ✅
## 👩💻 Author
**Sanjana Yadav**
🌐 [GitHub](https://github.com/Sanjanayadav07) | 💼 [LinkedIn](https://www.linkedin.com/in/sanjana-yadav007)