Chatty - Realtime Chat Application

A full-stack, real-time messaging application built with the MERN stack (MongoDB, Express, React, Node.js) and Socket.io.

🌟 Features

• Real-time Messaging: Instant message delivery using WebSocket (Socket.io).
• Authentication: JWT-based secure user authentication and authorization.
• Image Sharing: Upload and share images smoothly via Cloudinary.
• Modern UI: Beautiful, responsive design built with TailwindCSS v4 and DaisyUI.
• State Management: Optimized global state handling using Zustand.
• Online Status: See which users are currently active.

🛠️ Tech Stack

Client:

• React 19 (via Vite)
• TailwindCSS v4 & DaisyUI
• Zustand (State Management)
• React Router DOM v7
• Socket.io-client
• Axios

Server:

• Node.js & Express
• MongoDB & Mongoose
• Socket.io
• JSON Web Tokens (JWT)
• Cloudinary
• bcryptjs for password hashing

🚀 Getting Started

Prerequisites

Make sure you have Node.js and MongoDB installed on your system. You will also need a Cloudinary account.

1. Clone the repository and install dependencies

To install the dependencies for both the frontend and backend simultaneously, run:

npm run build

(This uses the custom build script in the root package.json)

2. Setup Environment Variables

Create a .env file in the backend/ directory with the following variables:

PORT=5001
MONGODB_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret_key
NODE_ENV=development

# Cloudinary Setup
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret

3. Run the Application

You'll need to run both the backend and frontend servers.

To run the Backend:

cd backend
npm run dev

To run the Frontend:

cd frontend
npm run dev

The frontend will be available at http://localhost:5173 and the backend will start on the port specified in your .env file (usually 5001).

📁 Project Structure

chatty/
├── backend/            # Express, MongoDB, Socket.io Server
│   ├── src/
│   │   ├── controllers/# API logic
│   │   ├── lib/        # DB, Socket, Cloudinary Configs
│   │   ├── middleware/ # Route Protections
│   │   ├── models/     # DB Schemas
│   │   ├── routes/     # Express Routers
│   │   └── index.js    # Entry Point
│   └── package.json
│
├── frontend/           # React, Vite, Tailwind Client
│   ├── src/
│   │   ├── components/ # Reusable UI pieces
│   │   ├── constants/  # Theme & static data
│   │   ├── lib/        # API Utils
│   │   ├── pages/      # App Views
│   │   └── store/      # Zustand Stores
│   └── package.json
│
└── package.json        # Main workflow commands