💬 VibeChat - Real-Time MERN Chat Application

VibeChat is a full-featured, real-time instant messaging web application built using the MERN stack (MongoDB, Express, React, Node.js) and WebSockets. The application allows users to seamlessly authenticate, discover other registered users, text in real time, monitor online/offline availability, see unseen message counters, and instantly transfer images.

---

🚀 Key Features

• Real-Time Messaging: Instant data transmission powered by Socket.io connection lifecycles.
• Media Support: Send and preview image messages seamlessly via integrated Cloudinary media storage.
• Live User Availability: Persistent tracking of online and offline statuses across independent browser sessions using a synchronized server memory registry.
• Unseen Message Counters: Automatically logs and increments unread text notifications in the sidebar until the respective chat interface is opened.
• Responsive Sidebar & UI: Sleek user layout with custom animations, full-text user filtering, profile edits, and layout triggers optimized for mobile viewports.
• Context-Driven State Management: Global user states, token verifications, and real-time message streams safely routed through robust React Context Hooks (AuthContext, ChatContext).

---

🛠️ Tech Stack

Frontend (Client)

• React.js (Vite) – High-performance single-page application framework.
• Tailwind CSS – Modern utility-first stylesheet layouts and styling.
• React Router DOM – Smooth client-side SPA routing and view navigation.
• Axios – Promise-based HTTP client managing global API integration.
• React Hot Toast – Dynamic, real-time alert notifications.

Backend (Server)

• Node.js & Express.js – Robust RESTful API development platform.
• Socket.io (WebSockets) – Continuous bi-directional channel streaming for instant push updates.
• MongoDB & Mongoose – NoSQL database schema modeling storing relational data pipelines.
• Cloudinary SDK – Cloud infrastructure handling automated Base64 image encoding and hosting.
• JSON Web Tokens (JWT) – Encrypted cookie/header-based stateless user authorization.

---

📂 Project Structure

├── backend/
│   ├── config/             # Database and Cloudinary configuration files
│   ├── controllers/        # Request handling logic (authController, messageController)
│   ├── models/             # Mongoose schemas (User, Message)
│   ├── routes/             # Express API endpoint declarations
│   └── server.js           # Server initialization and Socket.io tracking map
└── frontend/
    ├── src/
    │   ├── assets/         # App icons, vectors, and avatar templates
    │   ├── components/     # UI components (Sidebar, ChatContainer)
    │   ├── context/        # React Global Context State (AuthContext, ChatContext)
    │   ├── lib/            # Utility helper functions (formatAMPM timestamp tools)
    │   └── App.jsx         # App routing entry layout
    ├── vercel.json         # Routing configuration for SPA hosting
    └── index.html          # Application root point

Installation & Setup
Prerequisites
Node.js installed locally

MongoDB Atlas database connection URI

Cloudinary API credentials

1. Clone the Repository
Bash
git clone [https://github.com/YourUsername/YourRepoName.git](https://github.com/YourUsername/YourRepoName.git)
cd YourRepoName
2. Backend Setup
Navigate into the backend directory, install packages, and set up your .env variables:

Bash
cd backend
npm install
Create a .env file in the root of the backend/ directory:

Code snippet
PORT=5000
MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_super_secret_jwt_key
CLOUDINARY_CLOUD_NAME=your_cloudinary_name
CLOUDINARY_API_KEY=your_cloudinary_key
CLOUDINARY_API_SECRET=your_cloudinary_secret
Start the local server terminal execution loop:

Bash
node server.js
3. Frontend Setup
Open a separate terminal window, navigate into the frontend directory, install dependencies, and run Vite:

Bash
cd ../frontend
npm install
npm run dev
Open http://localhost:5173 in your browser to verify it runs locally!

🌐 Production Deployment
Because WebSockets require an uninterrupted, persistent connection loop, deploying this application follows a split-hosting architecture to prevent Serverless connection drops:

🖥️ Frontend (Vercel)
The static frontend assets are highly optimized for Vercel. To guarantee pages load cleanly when refreshed on a deep React Router endpoint (like /profile), a vercel.json routing fallback is configured:

JSON
{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}
⚙️ Backend (Render / Railway)
The backend uses a persistent Node deployment environment (such as Render) to maintain the active server socket connection map (userSocketMap) 24/7. When moving to production, ensure the CORS origin domain configuration inside server.js points precisely to your live Vercel domain link to allow authentications to pass smoothly.

🤝 Contribution
Contributions, issues, and feature requests are welcome! Feel free to check the issues page if you want to fork and extend this chat platform further.

Proudly developed as part of full-stack engineering milestones.