ChatApp – تطبيق محادثة فورية (Realtime Chat) متكامل

فيما يلي وصف احترافي ومفصّل يمكنك استخدامه على منصة “مستقل” لعرض مشروعك:

---

### ? **ChatApp – تطبيق محادثة فورية (Realtime Chat) متكامل**

أقدّم لكم تطبيق **ChatApp**، وهو نظام محادثة فورية (Realtime Chat) متكامل مبني بأحدث تقنيات الـ Full-Stack، يوفّر تجربة استخدام سريعة، آمنة، وقابلة للتوسع، مع دعم كامل للمراسلة اللحظية (Realtime Messaging) وإدارة المستخدمين.

---

## ? **التقنيات المستخدمة (Tech Stack)**

* **الواجهة الأمامية (Frontend):**

* React + Vite (أداء عالي وتجربة مستخدم سلسة)

* **الخادم (Backend):**

* Node.js + Express

* Socket.IO (للتواصل الفوري)

* **قاعدة البيانات:**

* PostgreSQL

* Prisma ORM

* **ميزات إضافية:**

* Redis (اختياري لدعم تعدد السيرفرات + Presence + Typing)

---

## ? **نظام المصادقة (Authentication System)**

يعتمد التطبيق على نظام JWT متقدم باستخدام:

* Access Token

* Refresh Token (مخزّن في httpOnly Cookie لزيادة الأمان)

### Endpoints:

* `POST /auth/register` → إنشاء حساب

* `POST /auth/login` → تسجيل الدخول وإصدار التوكن

* `POST /auth/refresh` → تجديد التوكن

* `POST /auth/logout` → تسجيل الخروج وإلغاء التوكن

---

## ? **نظام البحث عن المستخدمين (Contact Finder)**

يتيح للمستخدم بدء محادثات بسهولة:

* البحث باستخدام البريد الإلكتروني

* إنشاء محادثة مباشرة (1-on-1)

* منع تكرار المحادثات عبر نظام **find-or-create**

### Endpoints:

* `GET /users/search?email=...`

* `POST /conversations`

---

## ? **نظام الرسائل (Messaging System)**

### 1) حفظ الرسائل (Persistence)

* جميع الرسائل يتم حفظها في PostgreSQL

* عند إعادة تحميل الصفحة، يتم استرجاع المحادثات السابقة تلقائيًا

Endpoint:

* `GET /conversations/:id/messages?limit=30`

---

### 2) التحديث الفوري (Realtime via Socket.IO)

يدعم التطبيق أحداث فورية متقدمة:

* `message:new` → رسالة جديدة

* `message:delivered` → تم التسليم

* `message:read` → تم القراءة

* `conversation:typing` → مؤشر الكتابة

* `user:online / user:offline` → حالة المستخدم

### ⚡ Optimistic UI:

* يتم عرض الرسالة فورًا قبل تأكيد السيرفر

* يتم تحديث الحالة لاحقًا (نجاح / فشل)

---

### 3) Pagination (تحميل تدريجي)

* تحميل الرسائل القديمة عند التمرير للأعلى

* باستخدام Cursor Pagination عبر:

* `before=<timestamp>`

---

## ? **تصميم قاعدة البيانات (Data Model)**

باستخدام Prisma، يحتوي النظام على:

* User

* Conversation (مباشرة / جماعية)

* ConversationMember

* Message (مع حالات + حذف منطقي)

* Attachment (مرفقات)

* MessageReadReceipt (تأكيد القراءة)

## ? **دعم Redis (اختياري)**

عند تفعيل Redis:

* دعم حالة المستخدم (Online/Offline)

* مؤشرات الكتابة (Typing Indicators)

* تشغيل التطبيق على أكثر من سيرفر (Scalable)

---

## ? **هيكل المشروع (Architecture)**

### Backend:

* `app.js` → إعداد السيرفر

* `routes/` → API Routes

* `controllers/` → منطق التطبيق

* `middleware/` → التحقق من JWT

* `sockets/` → إدارة Socket.IO

* `lib/` → Prisma + Redis

### Frontend:

* `App.jsx` → الهيكل العام

* `useAuth.js` → إدارة التوكن

* `useConversations.js` → المحادثات

* `useChat.js` → الرسائل الفورية

* `components/` → الواجهة

---

## ? **مميزات المشروع**

* ⚡ محادثة فورية بدون تأخير

* ? نظام أمان متقدم (JWT + Cookies)

* ? تصميم قابل للتوسع (Scalable Architecture)

* ? واجهة حديثة وسريعة

* ? دعم Realtime + Persistence

* ? دعم حالة المستخدم (Online/Typing)

* ? كود منظم وقابل للتطوير

---

## ? **الترخيص (License)**

يمكن استخدام رخصة MIT للنشر والاستخدام التجاري مع الحفاظ على حقوق الملكية.

---

## ? **حالات الاستخدام**

* تطبيقات الدردشة (مثل WhatsApp / Messenger)

* أنظمة دعم العملاء (Customer Support Chat)

* تطبيقات العمل الجماعي (Team Collaboration)

* منصات التعليم والتواصل