NextJs Messenger Clone

NextJS-Messenger-Clone

تطبيق دردشة في الوقت الفعلي بشكل كامل مصنوع من NextJS 13 (جهاز توجيه التطبيق) ، و MongoDB ، و CSS Tailwind ، و Pusher ، و Next-Auth و CleeDinary.

• NextJS (13.4.x)
• رد فعل (18.x)
• MongoDB (6.x)
• CSS Tailwind (3.x)
• بوهي (5.x)
• القادم Auth (4.x)
• TypeScript (5.x)
• إنتاج النصي

عرض حي

شاهد عرضًا حيًا على Vercel

سمات

• تحديث الدردشة في الوقت الفعلي مع Puster
• دردشة جماعية
• حذف تاريخ الدردشة
• استضافة الصور مع Cloberinary
• دعم الموضوع الديناميكي (الوضع الخفيف والظلام)
• دعم لكل من شاشات سطح المكتب والشاشات المحمولة

تثبيت

إعداد mongodb

1. انتقل إلى https://www.mongodb.com/atlas/database والتسجيل

2. البحث وحدد Build a Database
   حدد الطبقة المجانية واضغط على Create في الأسفل
   

3. قم بإنشاء مستخدم (لاحظ كلمة المرور)
   قم بالتمرير لأسفل Add entries to your IP Access List
   أدخل 0.0.0.0/0 واضغط على Add Entry
   

4. اضغط على Go to Databases
   

5. انقر على Connect وحدد MongoDB for VSCode
   انسخ سلسلة الاتصال وحفظها في مفكرة
   استبدل <password> بكلمة المرور الخاصة بك في الخطوة 3
   أضف test في نهاية سلسلة الاتصال (على سبيل المثال. connectionstring/test )
   

إعداد مصادقة جيثب

1. انتقل إلى https://github.com/
   انقر على منسدك الشخصي في أعلى اليمين
   انقر فوق Settings
   

2. انقر فوق Developer settings
   انقر فوق OAuth Apps
   انقر فوق New OAuth App
   

3. أعط اسمًا لتطبيقك
   اكتب http://localhost:3020/ في Homepage URL وعلامة عنوان Authorization callback URL .
   انقر فوق "تسجيل التطبيق"
   

4. انسخ Client Id ولاحظه لأسفل
   انقر فوق Generate a new client secret ، ونسخه وألاحظه لأسفل
   

إعداد مصادقة Google

1. انتقل إلى https://console.cloud.google.com وإنشاء مشروع جديد
   

2. انتقل إلى المشروع الذي تم إنشاؤه حديثًا والبحث عن API & Services
   

3. اذهب إلى OAuth consent screen
   انقر على الحقل External
   انقر فوق CREATE
   

4. انقر فوق حقل App name واعطيه اسمًا
   في حقل بريد المستخدم ، حدد بريدك الإلكتروني
   قم بالتمرير لأسفل إلى Developer contact information واكتب بريدك الإلكتروني
   انقر فوق SAVE AND CONTINUE حتى تكون في خطوة Summary
   

5. اذهب إلى Credentials
   انقر فوق CREATE CREDENTIALS
   حدد OAuth client ID
   

6. حدد Web application كنوع التطبيق
   قم بالتمرير لأسفل إلى Authorized redirect URIs وإضافة http://localhost:3020/api/auth/callback/google
   انقر فوق CREATE
   انسخ CLient ID Client Secret ولاحظه لأسفل
   

الإعداد Clobinary

1. انتقل إلى https://console.cloudinary.com وتسجيل الدخول
   انتقل إلى Dashboard ولاحظ Cloud name
   

2. انتقل إلى الإعدادات
   ثم انتقل Upload
   

3. انقر فوق Add upload preset
   تغيير Signing Mode إلى Unsigned
   انقر فوق Save انسخ اسم الإعداد المسبق المُضاف حديثًا ولاحظه أسفل
   

إعداد STIP

1. انتقل إلى https://dashboard.pusher.com/channels
   انقر فوق Create app (أو Get Started )
   امنح التطبيق اسمًا
   حدد React للواجهة الأمامية و Node.js للخلفية الخلفية
   إنشاء التطبيق
   

2. انتقل إلى App Keys
   لاحظ القيم لأسفل
   

مشروع الإعداد

1. استنساخ/تنزيل repo
2. إنشاء ملف يسمى .env.local في الدليل الجذر لمشروعك ، اكتب ما يلي في CMD/PowerShell

    cp env.example .env.local
   

3. داخل ملف .env.local ، أضف مفاتيح MongoDB و Pusher و Clourinary و Github و Google من الخطوات السابقة
4. yarn install لتثبيت التبعيات (قم بتشغيل npm install yarn إذا لم يكن لديك غزل مثبت)
5. yarn prisma db push لإنشاء مجموعات DB
6. prisma generate لإنشاء عميل Prisma

الاستخدام

تطوير

yarn dev

• بناء التطبيق بشكل مستمر (تمكين HMR)

إنتاج

yarn start yarn build الغزل

• بناء التطبيق مرة واحدة (تعطيل HMR) إلى /.next/

---

جميع الأوامر

يأمر	وصف
yarn dev	بناء التطبيق بشكل مستمر (تمكين HMR)
yarn build	بناء التطبيق مرة واحدة (تعطيل HMR) إلى /.next/
yarn start	تشغيل إنتاج الإنتاج

انظر أيضا

• تم أخذ بعض أفكار التصميم من Facebook Messenger
• بعض أفكار التنفيذ لهذا المشروع مأخوذة من جوش وأنطونيو
• تم تجهيز المشروع مع إنشاء Next-Next-App