💬 Chatify — Real-Time Chat Application

Chatify is a feature-rich, full-stack real-time messaging application built with the MERN stack (MongoDB, Express, React, Node.js) and Socket.IO. It features instant messaging, typing indicators, read receipts, image sharing, dark/light theme customization, and robust security protections.

---

🚀 Key Features

⚡ Real-Time Messaging & Sockets

• Instant Delivery: Real-time bidirectional messaging powered by Socket.IO.
• Typing Indicators: Real-time animated indicator when the recipient is typing.
• Read Receipts: Visual ticks (✓ Sent, ✓✓ Read) that sync live via sockets.
• Message Deletion: Delete sent messages in real time for both sender and receiver.
• Optimistic Updates: Instant UI feedback before server confirmation for ultra-fast performance.

📷 Media & Rich Chat Features

• Image Sharing: Upload and send images powered by Cloudinary.
• Image Lightbox: Full-screen modal overlay for shared images.
• Emoji Picker: Built-in dark-themed emoji library for expressiveness.
• Unread Counter & Search: Live unread message badges and instant contact searching.

🔐 Auth, Security & Protection

• JWT Cookie Auth: Secure authentication using HttpOnly, SameSite cookies.
• Arcjet Security Shield: Live attack protection, bot detection, and rate limiting (100 refill/min).
• Password Safety: Hashed credentials using bcryptjs.
• Welcome Email: Automated onboarding emails powered by Resend.

🎨 Custom UI / UX & Sound Effects

• Theme Switcher: Seamless Dark & Light mode toggle (persisted to localStorage).
• Sound Effects: Dynamic typing sounds, incoming message chimes, and audio settings toggle.
• Responsive Layout: Adaptive sidebar for fluid desktop and mobile interaction.
• Profile Management: Custom profile picture uploads to Cloudinary with fallback avatars.

---

🛠️ Tech Stack

Frontend

• Framework: React 19, Vite
• State Management: Zustand
• Real-Time Engine: Socket.IO Client
• Styling: Tailwind CSS, DaisyUI, Lucide React Icons
• Utilities: Axios, React Hot Toast, Emoji Picker React

Backend

• Runtime & Framework: Node.js (>=20.0.0), Express.js
• Database: MongoDB & Mongoose ORM
• Real-Time Engine: Socket.IO
• Security & Bot Detection: Arcjet (@arcjet/guard, @arcjet/node)
• Cloud Media & Email: Cloudinary API, Resend

---

📁 Project Structure

CHATIFY-APP/
├── backend/
│ ├── src/
│ │ ├── controller/ # Auth and message logic
│ │ ├── emails/ # Email templates & Resend config
│ │ ├── lib/ # Socket, DB, and Cloudinary clients
│ │ ├── middleware/ # JWT auth & Arcjet security middleware
│ │ ├── models/ # Mongoose schemas (User, Message)
│ │ ├── routes/ # API route definitions
│ │ └── server.js # Express & Socket server startup
│ └── package.json
└── frontend/
├── src/
│ ├── components/ # Chat containers, sidebar, modals, audio
│ ├── hooks/ # Custom React hooks
│ ├── pages/ # Chat, Profile, Login & Register views
│ ├── store/ # Zustand global state (Auth, Chat, Theme)
│ └── lib/ # Axios & Socket client instances
└── package.json

---

⚡ Getting Started Locally

Prerequisites

• Node.js (v20.0.0 or higher)
• MongoDB instance (Local or MongoDB Atlas)

---

1. Clone the repository

git clone https://github.com/seid8974/chatify.git
cd chatify

---

2. Install Dependencies

Install root, backend, and frontend dependencies:
npm run build

---

3. Environment Setup

Create a .env file inside the backend directory with your API keys:
PORT=5000
MONGODB_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret
CLOUDINARY_CLOUD_NAME=your_cloudinary_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secret
RESEND_API_KEY=your_resend_api_key
ARCJET_KEY=your_arcjet_api_key

---

4. Run the Application

Start both the backend server and frontend Vite app concurrently:
npm run dev

Open http://localhost:5173 in your browser to test Chatify!

---

⭐️ Developed by Seid Mohammed