Realtime Chat App – Social Login • Tìm bạn • Profile • Gửi file (CodeWebKhongKho)

Ứng dụng chat realtime gồm Backend NodeJS (API + Socket) và Frontend React, hỗ trợ chat realtime, đăng nhập JWT (access/refresh), social login (GitHub/LinkedIn), tìm bạn bè, quản lý hồ sơ, cài đặt, gửi file/ảnh và nhiều tính năng mở rộng (chat nhóm, typing, seen, thông báo).

---

✨ Tính năng nổi bật

• 💬 Chat realtime qua Socket
• 🔐 Xác thực JWT (Access Token / Refresh Token)
• 🌐 Social Login: GitHub / LinkedIn (tuỳ cấu hình)
• 👥 Bạn bè: tìm kiếm • danh sách • xoá
• 👤 Profile: xem • sửa thông tin • avatar
• ⚙️ Settings: cấu hình tài khoản & trải nghiệm
• 📎 Gửi file/ảnh (Cloudinary nếu dùng upload)
• ✉️ OTP / Reset password (Nodemailer nếu dùng)
• 🛡️ Google reCAPTCHA (frontend bắt buộc cấu hình site-key)

---

🧱 Tech Stack

• Backend: NodeJS, Express, Socket, JWT, MongoDB (Mongoose)
• Frontend: React
• Tích hợp tuỳ chọn: Nodemailer, Cloudinary, OAuth (GitHub/LinkedIn), Google reCAPTCHA

---

📁 Cấu trúc thư mục

.
├── backend
│   ├── src
│   ├── .env
│   ├── .env.example
│   ├── app.js
│   ├── server.js
│   ├── socket.js
│   ├── package.json
│   └── vercel.json
└── frontend
    ├── public
    ├── src
    ├── .env
    ├── .env.example
    └── package.json

---

✅ Yêu cầu trước khi chạy

• Node.js: >= 16 (khuyến nghị 18+)
• MongoDB: local hoặc MongoDB Atlas
• (Tuỳ chọn) Cloudinary: dùng khi upload ảnh/file
• (Tuỳ chọn) SMTP / Gmail App Password: dùng cho OTP & reset password
• (Tuỳ chọn) OAuth App: GitHub / LinkedIn nếu bật social login
• Google reCAPTCHA: cần site key + secret key (tuỳ version dự án)

---

🔧 Cấu hình ENV (Copy y nguyên theo dự án)

Backend: backend/.env

Tạo file backend/.env từ backend/.env.example và điền giá trị (các mục Required bắt buộc phải có).

# Required
PORT=8000
MONGODB_URI=""
JWT_ACCESS_SECRET=""
JWT_REFRESH_SECRET=""

# Origin - (Required-Change with your frontend url)
FRONT_URL="http://localhost:3000"

# Nodemailer Config (Can be skipped | required for otp and reset password)
MAIL_USER=""
MAIL_PASS=""

# Cloudinary Config (Can be skipped but required for image uploads)
CLOUDINARY_CLOUD_NAME=""
CLOUDINARY_API_KEY=""
CLOUDINARY_API_SECRET=""

# ----Social Auths---- (Can be skipped)
# GitHub OAuth
GITHUB_AUTH_CLIENT_ID=""
GITHUB_AUTH_CLIENT_SECRET=""

# Linkedin OAuth
LINKEDIN_AUTH_CLIENT_ID=""
LINKEDIN_AUTH_CLIENT_SECRET=""
# -------------------

# Google reCAPTCHA
GOOGLE_RECAPTCHA_SECRET=""

Giải thích nhanh

• MONGODB_URI: chuỗi kết nối MongoDB
• JWT_ACCESS_SECRET / JWT_REFRESH_SECRET: secret ký JWT (nên dài và khó đoán)
• FRONT_URL: URL frontend để CORS/redirect
• MAIL_USER / MAIL_PASS: chỉ cần khi dùng OTP/reset
• CLOUDINARY_*: chỉ cần khi upload ảnh/file
• GITHUB_* / LINKEDIN_*: chỉ cần khi dùng social login
• GOOGLE_RECAPTCHA_SECRET: secret key để verify captcha (nếu backend có verify)

Frontend: frontend/.env

Tạo file frontend/.env từ frontend/.env.example và điền giá trị (REACT_APP_API_ORIGIN và REACT_APP_RECAPTCHA_CLIENT thường là bắt buộc theo dự án).

# Required
REACT_APP_NODE="local"

# Required (change with your backend url)
REACT_APP_API_ORIGIN="http://localhost:8000/api"

# Social Auths Client IDs (Can be skipped if not using social auths)
REACT_APP_GOOGLE_AUTH_CLIENT_ID=""
REACT_APP_GITHUB_AUTH_CLIENT_ID=""
REACT_APP_LINKEDIN_AUTH_CLIENT_ID=""

# Google reCAPTCHA Client ID (Cannot be skipped-Required)
REACT_APP_RECAPTCHA_CLIENT=""

Giải thích nhanh

• REACT_APP_API_ORIGIN: base URL gọi API (đang để /api)
• REACT_APP_*_AUTH_CLIENT_ID: Client ID social login (nếu dùng)
• REACT_APP_RECAPTCHA_CLIENT: site key reCAPTCHA (bắt buộc theo dự án)

---

▶️ Chạy dự án local

1) Chạy Backend

cd backend
npm install
npm run dev

Backend chạy mặc định: http://localhost:8000

2) Chạy Frontend

cd frontend
npm install
npm start

Frontend chạy mặc định: http://localhost:3000

---

🚀 Lưu ý khi deploy

• Cập nhật FRONT_URL (backend) thành domain frontend thật
• Cập nhật REACT_APP_API_ORIGIN (frontend) thành domain backend thật (ví dụ: https://your-api.com/api)
• Nếu bật social login: cấu hình OAuth Redirect URL đúng theo domain deploy
• Nếu bật upload: cấu hình Cloudinary đầy đủ
• Nếu dùng OTP/reset: cấu hình MAIL_USER/MAIL_PASS hoặc SMTP hợp lệ

---

📚 Dạy Học Online

Bên cạnh tài liệu miễn phí, mình còn mở các khóa học online:

• Lập trình web cơ bản → nâng cao
• Ứng dụng về AI và Automation
• Kỹ năng phỏng vấn & xây CV IT

Thông Tin Đăng Ký

• 🌐 Website: https://profile-forme.com
• 📧 Email: [email protected]
• 📞 Zalo/Hotline: 0798805741

---

💖 Donate Ủng Hộ

Nếu bạn thấy các source hữu ích và muốn mình tiếp tục phát triển nội dung miễn phí, hãy ủng hộ mình bằng cách donate.
Mình sẽ sử dụng kinh phí cho:

• 🌐 Server, domain, hosting
• 🛠️ Công cụ bản quyền (IDE, plugin…)
• 🎓 Học bổng, quà tặng cho cộng đồng

QR Code Ngân Hàng

ABBank

• Chủ tài khoản: Nguyễn Tiến Tài
• Ngân hàng: Ngân Hàng TMCP An Bình
• Số tài khoản: 1651002972052

---

📞 Liên Hệ

• 📚 TikTok Dạy Học: https://www.tiktok.com/@code.web.khng.kh
• 💻 GitHub: https://github.com/fdhhhdjd
• 📧 Email: mailto:[email protected]

Cảm ơn bạn đã quan tâm & chúc bạn học tập hiệu quả! Have a nice day <3!!