# 💬 Chatify — Real-Time MERN Chat Application

🔐 Authentication • 💬 Real-Time Messaging • 🟢 Online Users • 🖼️ Cloudinary Uploads

Chatify is a full-stack real-time chat application built with Node.js, Express, MongoDB, React, Vite, Socket.IO, Zustand, and Cloudinary.

--- ## 🚀 Live Demo ### Frontend 👉 [**Chatify — Live Website**](https://chatify-plum.vercel.app/) ### Backend 👉 [**Chatify — Backend**](https://chatify-backend-4qij.onrender.com/) --- ## 📌 Overview **Chatify** is a full-stack real-time messaging application built using the MERN stack and Socket.IO. The application provides a modern chat experience with authentication, real-time communication, online user tracking, profile image uploads, and client-side state management. The project uses a separated frontend and backend architecture, with the React frontend deployed on Vercel and the Node.js/Express backend deployed on Render. --- ## ✨ Features - 🔐 Cookie-based JWT authentication - 📝 User signup and login - 🚪 Secure logout functionality - 💬 Real-time one-to-one messaging - ⚡ Socket.IO-based communication - 🟢 Online user tracking - 🖼️ Profile picture uploads using Cloudinary - 🎨 Responsive React interface - 🧠 Zustand state management - 🔗 Axios-based API communication - 🗄️ MongoDB persistence with Mongoose - 🌐 Separate production frontend and backend deployment --- ## 🧰 Tech Stack ### Frontend | Technology | Purpose | |---|---| | React | User interface | | Vite | Frontend tooling | | Zustand | State management | | Axios | API communication | | Tailwind CSS | Styling | | Socket.IO Client | Real-time communication | ### Backend | Technology | Purpose | |---|---| | Node.js | Runtime | | Express.js | Backend framework | | MongoDB | Database | | Mongoose | MongoDB ODM | | JWT | Authentication | | Socket.IO | Real-time communication | ### Media | Technology | Purpose | |---|---| | Cloudinary | Profile image storage and delivery | --- ## 🏗️ Architecture ```text ┌────────────────────────┐ │ React Frontend │ │ Vite + Zustand + UI │ └────────────┬───────────┘ │ REST API + Socket.IO │ ┌────────────▼───────────┐ │ Node.js + Express │ │ │ │ Authentication │ │ REST APIs │ │ Socket.IO Server │ └─────────┬───────┬──────┘ │ │ │ │ ┌─────────▼──┐ ┌──▼────────────┐ │ MongoDB │ │ Cloudinary │ │ + Mongoose │ │ Media │ │ │ │ Storage │ └────────────┘ └───────────────┘ ``` --- ## 📁 Project Structure ```text LIVE_CHAT/ │ ├── README.md ├── Home.png ├── Login.png │ ├── Backend/ │ ├── src/ │ │ ├── app.js │ │ │ │ │ ├── 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/ ├── 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 ### Prerequisites Before running the project locally, make sure you have: - Node.js installed - MongoDB Atlas or a local MongoDB instance - Cloudinary account --- ## 1. Backend Setup ```bash cd Backend npm install ``` Create: ```text Backend/.env ``` Use `Backend/.env.example` as the reference for the required variables. For PowerShell: ```powershell Copy-Item .env.example .env ``` Start the backend: ```bash npm start ``` --- ## 2. Frontend Setup Open another terminal: ```bash cd Frontend/vite-project npm install ``` Create: ```text Frontend/vite-project/.env ``` Use the provided environment example as the reference. For PowerShell: ```powershell Copy-Item .env.example .env ``` Start the frontend: ```bash npm run dev ``` --- ## 🔑 Environment Variables ### Backend Create: ```text Backend/.env ``` | Variable | Required | Description | |---|---|---| | `PORT` | No | Backend server port | | `MONGODB_URI` | Yes | MongoDB connection string | | `secretKey` | Yes | JWT secret | | `CLIENT_URL` | No | Frontend URL allowed by CORS | | `CLOUDINARY_CLOUD_NAME` | Yes | Cloudinary cloud name | | `CLOUDINARY_API_KEY` | Yes | Cloudinary API key | | `CLOUDINARY_SECRET_KEY` | Yes | Cloudinary API secret | ### Frontend Create: ```text Frontend/vite-project/.env ``` | Variable | Required | Description | |---|---|---| | `VITE_API_BASE_URL` | Yes | Backend API base URL | | `VITE_SOCKET_URL` | Yes | Backend Socket.IO URL | ### Local Example ```env VITE_API_BASE_URL=http://localhost:5000/api VITE_SOCKET_URL=http://localhost:5000 ``` --- ## 🚢 Deployment ### Backend — Render 1. Create a Node.js service on Render. 2. Set the backend root directory to `Backend/`. 3. Install dependencies using `npm install`. 4. Configure the required environment variables. 5. Set `CLIENT_URL` to the deployed Vercel frontend URL. 6. Deploy the backend. ### Frontend — Vercel 1. Import the repository into Vercel. 2. Set the frontend root directory to: ```text Frontend/vite-project ``` 3. Configure: ```env VITE_API_BASE_URL=https://chatify-backend-4qij.onrender.com/api VITE_SOCKET_URL=https://chatify-backend-4qij.onrender.com ``` 4. Deploy the frontend. --- ## 🧠 Key Technical Concepts Chatify demonstrates practical experience with: - MERN stack development - REST API architecture - JWT authentication - Cookie-based authentication - MongoDB data modeling - Mongoose - Real-time communication with Socket.IO - Online presence tracking - React component architecture - Zustand state management - Axios API integration - Cloudinary media handling - CORS configuration - Production deployment with Vercel and Render --- ## 🔄 Application Flow ```text User ↓ React Frontend ↓ Axios / Socket.IO Client ↓ Node.js + Express ↓ Authentication / API / Socket Events ↓ MongoDB + Mongoose ↓ Cloudinary for media ↓ Response / Real-Time Update ↓ React UI ``` --- ## ⚡ Challenges Faced ### CORS Configuration Configured communication between the separately deployed frontend and backend. ### Real-Time Connections Handled Socket.IO connections across local and production environments. ### Cookie-Based Authentication Configured JWT-based authentication using cookies between the frontend and backend. ### Media Uploads Integrated Cloudinary for profile picture uploads and stored the resulting image URL in MongoDB. ### Production Deployment Configured separate deployments using Vercel and Render for the frontend and backend. --- ## 🧩 Common Issues ### CORS Errors Make sure the backend `CLIENT_URL` exactly matches the deployed frontend URL. ### Socket.IO Not Connecting Verify: ```env VITE_SOCKET_URL=https://chatify-backend-4qij.onrender.com ``` ### API Requests Failing Verify: ```env VITE_API_BASE_URL=https://chatify-backend-4qij.onrender.com/api ``` ### Cloudinary Upload Errors Check all Cloudinary credentials in the backend environment variables. --- ## 👨‍💻 Author **Avinash Kumar** GitHub: https://github.com/Avinash-sdbegin ---

⭐ If you found Chatify useful, consider giving the repository a star.