الصفحة الرئيسية>المتعلقة بالبرمجة>كود الذكاء الاصطناعي
تنزيل

استنساخ Twitter مدمج في Next.js + TypeScript + Tailwind CSS باستخدام Cloud Firestore والتخزين

معاينة؟

عرض. mp4

سمات

  • المصادقة مع مصادقة Firebase
  • مكونات رد الفعل المكتوبة بقوة مع TypeScript
  • يمكن للمستخدمين إضافة تغريدات ، مثل ، إعادة التغريد ، والرد
  • يمكن للمستخدمين حذف التغريدات ، وإضافة تغريدة إلى الإشارات المرجعية ، وعلاج تغريداتهم
  • يمكن للمستخدمين إضافة صور وجيف إلى تغريدة
  • يمكن للمستخدمين متابعة المستخدمين الآخرين وتفكيكهم
  • يمكن للمستخدمين رؤية أتباعهم وغيرهم والقائمة التالية
  • يمكن للمستخدمين رؤية جميع المستخدمين وقائمة التوجه
  • RealTime Update الإعجابات ، إعادة التغريد ، وملف تعريف المستخدم
  • تتجه الوقت الحقيقي من Twitter API
  • يمكن للمستخدم تعديل ملفه الشخصي
  • تصميم متجاوب للهاتف المحمول والكمبيوتر اللوحي وسطح المكتب
  • يمكن للمستخدمين تخصيص نظام ألوان الموقع وخلفية اللون
  • يتم تخزين جميع عمليات تحميل الصور على تخزين سحابة Firebase

التكنولوجيا؟

  • Next.js
  • TypeScript
  • Tailwind CSS
  • Firebase
  • SWR
  • واجهة مستخدم مقطوعة الرأس
  • رد فعل توست ساخن
  • حركة الإطارات

تطوير

فيما يلي خطوات تشغيل المشروع محليًا.

  1. استنساخ المستودع 

    git clone https://github.com/ccrsxx/twitter-clone.git

  2. تثبيت التبعيات 

    npm i

  3. قم بإنشاء مشروع Firebase وحدد تطبيق الويب

  4. أضف تكوين Firebase الخاص بك إلى .env.development . لاحظ أن NEXT_PUBLIC_MEASUREMENT_ID اختياري

  5. تأكد من تمكين خدمات Firebase التالية:

    • المصادقة. تمكين طريقة تسجيل الدخول إلى Google.
    • سحابة فايرستور. قم بإنشاء قاعدة بيانات وضبط موقعها على أقرب منطقة لك.
    • تخزين السحابة. إنشاء دلو التخزين.

  6. تثبيت Firebase CLI على مستوى العالم 

    npm i -g firebase-tools

  7. تسجيل الدخول إلى Firebase 

    firebase login

  8. احصل على معرف المشروع الخاص بك 

    firebase projects:list

  9. حدد معرف المشروع الخاص بك 

    firebase use your-project-id

  10. في هذه المرحلة ، لديك خياران. إما قم بتشغيل هذا المشروع باستخدام Firebase على السحابة أو محليًا باستخدام المحاكي.

    1. باستخدام الواجهة الخلفية السحابة Firebase:

      1. نشر قواعد Firestore ، فهارس Firestore ، وقواعد التخزين السحابية 

        firebase deploy --except functions

      2. تشغيل المشروع 

        npm run dev

    2. باستخدام محاكي Firebase المحلي:

      1. تثبيت Java JDK الإصدار 11 أو أعلى قبل المتابعة. هذا مطلوب لتشغيل المحاكيات.

      2. قم بتعيين متغير البيئة NEXT_PUBLIC_USE_EMULATOR على true في .env.development . هذا سيجعل التطبيق يستخدم المحاكيات بدلاً من الواجهة الخلفية السحابية.

      3. في هذه المرحلة ، يمكنك تشغيل الأمر التالي للحصول على استنساخ Twitter يعمل بالكامل يعمل محليًا: 

        npm run dev:emulators

ملاحظة : عند نشر قواعد فهارس Firestore ، قد يستغرق إكمال بضع دقائق. لذلك قبل تمكين الفهارس ، ستحصل على خطأ عند جلب البيانات من Firestore.

يمكنك التحقق من حالة فهارس Firestore الخاصة بك مع الرابط أدناه ، واستبدل your-project-id بمعرف المشروع الخاص بك: https://console.firebase.google.com/u/0/project/your-project-id/firestore/indexes

خياري:

  • إذا كنت ترغب في الحصول على بيانات توجيه من Twitter API ، فأنت بحاجة إلى إنشاء حساب مطور Twitter والحصول على مفاتيح API الخاصة بك. ثم أضف مفاتيح API إلى .env.development . آمل أن لا يدفع Elon Musk هذه API؟
  • إذا كنت ترغب في جعل إحصائيات المستخدم تتم مزامنتها مع التغريدات المحذوفة ، فأنت بحاجة إلى تمكين وظائف السحابة لـ Firebase. ثم نشر وظائف السحابة.
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل