💬 Chatify (MERN + Socket.IO)

🔐 Authentication • 💬 Real-time messaging • 🟢 Online users • 🖼️ Cloudinary uploads
Chatify is a full-stack real-time chat app built with Node.js, Express, MongoDB, React (Vite), and Socket.IO.

---

🌐 Live Website

• Frontend (Vercel): https://chatify-plum.vercel.app/
• Backend (Render): https://chatify-backend-4qij.onrender.com/

---

🚀 A production-ready real-time chat app with a scalable MERN backend and low-latency Socket.IO messaging.

✨ Features

• 🔐 Cookie-based JWT authentication (signup/login/logout)
• 💬 Real-time chat with Socket.IO
• 🟢 Online user tracking
• 🖼️ Profile picture upload via Cloudinary
• 🎨 Modern UI (React + Tailwind) with Zustand state management

---

🧰 Tech Stack

• Backend: Node.js, Express, MongoDB (Mongoose), JWT (cookie-based), Socket.IO
• Frontend: React, Vite, Zustand, Axios, Tailwind CSS, Socket.IO Client
• Media: Cloudinary (uploads stored in Cloudinary, DB stores image URL)

---

📁 Project Structure

LIVE_CHAT/
├── Readme.md
├── Home.png
├── Login.png
├── Backend/                         # Express + MongoDB + Socket.IO
│   ├── src/
│   │   ├── app.js                   # Express app + socket bootstrap
│   │   ├── controllers/
│   │   │   ├── authController.js
│   │   │   └── messageController.js
│   │   ├── routes/
│   │   │   ├── authRoute.js
│   │   │   └── messageRoute.js
│   │   ├── middlewares/
│   │   │   └── authMiddleware.js
│   │   ├── model/
│   │   │   ├── userModel.js
│   │   │   └── messageModel.js
│   │   └── lib/
│   │       ├── cloudinary.js
│   │       ├── socket.js
│   │       └── token.js
│   ├── package.json
│   └── .env.example
└── Frontend/
	└── vite-project/                 # React (Vite) client
		├── src/
		│   ├── Pages/
		│   │   ├── HomePage.jsx
		│   │   ├── LoginPage.jsx
		│   │   ├── ProfilePage.jsx
		│   │   └── SignUpPage.jsx
		│   ├── components/
		│   │   ├── ChatContainer.jsx
		│   │   ├── ChatHeader.jsx
		│   │   ├── MessageInput.jsx
		│   │   ├── Messages.jsx
		│   │   ├── Navbar.jsx
		│   │   ├── NoChatSelected.jsx
		│   │   ├── Sidebar.jsx
		│   │   └── UserChatHeader.jsx
		│   ├── store/
		│   │   ├── authStore.js
		│   │   └── chatStore.js
		│   ├── lib/
		│   │   ├── axios.js
		│   │   └── utils.js
		│   ├── App.jsx
		│   └── main.jsx
		├── public/
		├── vite.config.js
		└── package.json

---

📸 Preview

🏠 Home / Chat

🔐 Login

---

🚀 Getting Started (Local)

✅ Prerequisites

• Node.js installed
• MongoDB connection string (Atlas or local)
• Cloudinary account

1) Backend Setup

cd Backend
npm install

Create Backend/.env (copy from Backend/.env.example):

copy .env.example .env

Start backend:

npm start

2) Frontend Setup

cd Frontend/vite-project
npm install

Create Frontend/vite-project/.env (copy from .env.example):

copy .env.example .env

Start frontend:

npm run dev

---

🔑 Environment Variables

Backend (Backend/.env)

Variable	Required	Description
PORT	❌	Server port
MONGODB_URI	✅	MongoDB connection string
secretKey	✅	JWT secret used to sign cookies
CLIENT_URL	❌	Frontend URL allowed by CORS (Vercel domain)
CLOUDINARY_CLOUD_NAME	✅	Cloudinary cloud name
CLOUDINARY_API_KEY	✅	Cloudinary API key
CLOUDINARY_SECRET_KEY	✅	Cloudinary API secret

Frontend (Frontend/vite-project/.env)

Variable	Required	Description
VITE_API_BASE_URL	✅	Backend API base URL (e.g. http://localhost:5000/api)
VITE_SOCKET_URL	✅	Backend socket URL (e.g. http://localhost:5000)

---

🚢 Deployment

Backend (Render)

1. Deploy Backend/ as a Node service.
2. Set env vars from Backend/.env in Render dashboard.
3. Set CLIENT_URL = your Vercel frontend domain.

Frontend (Vercel)

1. Deploy Frontend/vite-project/.
2. Set VITE_API_BASE_URL and VITE_SOCKET_URL to your deployed Render backend URLs.

---

⚡ Challenges Faced

• Fixed CORS issues during deployment
• Managed socket connections across environments
• Handled cookie-based authentication in production

🧩 Common Issues

• CORS errors: make sure backend CLIENT_URL matches your deployed frontend domain.
• Socket not connecting: ensure VITE_SOCKET_URL points to backend.
• Uploads failing: verify Cloudinary env vars.

---

👨‍💻 Author

Built by Avinash.