twitter clone frontend

تويتر استنساخ الواجهة

وصف المشروع

يأخذني على تطبيق ويب على Twitter. تم تصميمه باستخدام NextJs و Tailwindcss ويعمل مع خلفية Fastapi التي قمت بإنشائها هنا (https://github.com/dericf/twitter-clone-server-fastapi).

ملخص

تم تصميم هذا للعمل على سطح المكتب والجوال (مع بعض الأخطاء المتوقعة بالتأكيد على الهاتف المحمول)

تمت كتابة كل شيء في TypeScript من البداية ويستخدم async / await كلما كان ذلك ممكنًا.

لم أحاول بالفعل "استنساخ" Twitter وجميع وظائفه أو تصميماته. بدلاً من ذلك ، لقد صممت خذائي من الصفر.

مصادقة المستخدم/التفويض

تم إعداد الخادم للتعامل مع رموز JWT عبر ملفات تعريف الارتباط HTTP فقط أو رأس إذن. يتم استخدام ملفات تعريف الارتباط للحفاظ على الأمور بسيطة.

كل طلب fetch يتطلب AUTH يرسل credentials: "include" خيار.

التخويل أساسي للغاية - لا يوجد سوى نوع مستخدم واحد ويضمن الخادم المستخدمين فقط الوصول/تعديل/حذف الموارد التي يمتلكونها بالفعل.

تغريدات

يمكن للمستخدم إنشاء تغريدات وتحريرها وحذفها ، وكذلك رؤية التغريدات التي نشرها المستخدمون الآخرون. حاليا تويت الدعم فقط النص. قد يتم تنفيذ النص الغني ، والصور ، ومعاينات الارتباط المباشر ، وما إلى ذلك في المستقبل.

تغريدة الإعجابات

يمكن للمستخدم أن يعجبه أي تغريدة (بما في ذلك الخاص بك للبساطة).

تعليقات

يمكن للمستخدم إنشاء التعليقات وتحريرها وحذفها على أي تغريدة (بما في ذلك الخاص بك)

التعليق يحب

يمكن للمستخدم أن يعجبه أي تعليق (بما في ذلك الخاص بك للبساطة).

التالي

يمكن للمستخدم متابعة المستخدمين الآخرين ومتابعتهم ومشاهدة قائمة من المستخدمين الذين يتابعونه حاليًا

أتباع

يمكن للمستخدم رؤية قائمة بجميع المستخدمين الذين يتابعونهم حاليًا

محادثة

لقد قمت بتنفيذ دردشة في الوقت الفعلي باستخدام WebSockets وتفاعل السنانير/السياق. لا يدعم حاليًا دردشات المجموعة ولكن قد يتم تنفيذها في المستقبل. تعتمد الدردشة على وسيط بحيث لا تتداخل مع تدفقك على الإطلاق ، ما عليك سوى فتح/إغلاق مشروط الدردشة من أي صفحة دون إعادة توجيهها.

مخطط

لقد استخدمت TypeScript لتحديد مخطط صارم للبيانات التي تتدفق من وإلى الخادم.

مثال على المخطط هو كما يلي تغريدة

 import { APIResponse } from "./API" ;
import { EmptyResponse } from "./General" ;

export interface Tweet {
  tweetId : number ;
  userId : number ;
  username : string ;
  content : string ;
  createdAt : string ;
}

export interface TweetCreateRequestBody {
  content : string ;
}

export interface TweetUpdateRequestBody {
  newContent : string ;
}

export type TweetResponse = APIResponse < Array < Tweet > > ;
export type TweetCreateResponse = APIResponse < Tweet > ;
export type TweetUpdateResponse = APIResponse < EmptyResponse > ;
export type TweetDeleteResponse = APIResponse < EmptyResponse > ;

interface APIResponse<T> هي واجهة عامة مخصصة تعيد كل استجابة - استبدال النوع العام T بنوع الإرجاع المناسب لنقطة النهاية هذه في خاصية تسمى value .

على سبيل المثال:

 // T could be something like Array<CommentLike> or EmptyResponse
export interface APIResponse < T > {
  value ?: T ;
  error ?: APIResponseError ;
}

class APIResponseError هي فئة غلاف يتم إنشاء مثيل لها فقط عندما يكون هناك خطأ (تم إلقاء حالة استجابة غير 200 أو خطأ في TypeScript). يوفر الفئة طريقة كائن .errorMessageUI للحصول على النص المناسب لإظهار المستخدم في إخطار نخب أو نافذة منبثقة.

يتم استخدام interface EmptyResponse فقط لتمثيل نوع الإرجاع لنقاط النهاية التي يتم تعريفها بشكل صريح بعدم إرجاع أي شيء - عادة بعد حذف أو تحديث سجل. ربما كان من الممكن أن أستخدم فقط null ولكني أردت أن أكون صريحًا والقضاء على أي تخمين.

---

الاختبار

اختبار المكون

تودو

التقنيات

NextJS

https://nextjs.org/

Tailwindcss (مع JIT)

https://tailwindcss.com/

لحظة

https://momentjs.com/

تفاعل مع عدم التصريح

https://github.com/jossmac/React-toast-notifications

رد الفعل

https://github.com/jedwatson/React-Select

التنمية المحلية

إنشاء ملف .env وأضف المتغير التالي:

 NEXT_PUBLIC_API_URL="http://localhost:<SERVER_PORT>"
NEXT_PUBLIC_API_WS_URL="ws://localhost:<SERVER_PORT>/ws"

قم بتشغيل npm install ثم قم بتشغيل npm run dev لبدء تشغيل خادم التطوير التالي

تأكد من تشغيل خادم الواجهة الخلفية (المنفذ الافتراضي 8001)

نشر

أسهل طريقة للنشر على Vercel. ما عليك سوى إنشاء مشروع Vercel جديد مرتبط بـ Git Repo وأضف NEXT_PUBLIC_API_URL و NEXT_PUBLIC_API_WS_URL الذي يشير إلى خادم واجهة برمجة التطبيقات المستضافة.

لنشر إصدار جديد ، ما عليك سوى دفع GIT إلى Master/Main لنشر الإنتاج أو الضغط على أي فرع غير مقلق/رئيسي لنشر المعاينة/التدريج.

في النهاية ، أرغب في تطوير سير عمل سلس لنشر JextJs مع Docker. يجب أن يكون الأمر واضحًا نظرًا لأنه لا يتم استخدام وظائف بدون خادم حاليًا.