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

استنساخ ممارسة واجهة المستخدم على Twitter

الهدف من هذا المشروع هو التعرف على JS التالي. خلفيتي هي مصمم ويب يتمتع بخبرة في HTML و CSS Tailwind مع بعض المعرفة الأساسية JavaScript. انتهى بي الأمر في محاولة لإعادة إنشاء واجهة المستخدم الخاصة بتطبيق Twitter. إنه أبعد ما يكون عن الأصل وأنا متأكد من أن هناك العديد من العيوب. أي اقتراحات أو تحسينات ، يرجى إعلامي. الشيء الرئيسي هو الاستمتاع وتعلم شيء جديد ، ونأمل أن تتمكن من ذلك أيضًا.

Twitter-demo.mp4.mp4

ابدء

عندما تتخلص من المستودع 

npm install
npm run dev

Checkout Storybook لعرض المكونات في عزلة 

npm run storybook

مشاكل

لا تتبع اللوحة الجانبية اليمنى نفس سلوك Twitter. أثناء التمرير ، تلتصق ولكن يجب أن تكون قادرًا على رؤية روابط التذييل.

كومة

  • Next.js
  • Tailwind CSS
  • Radix
  • قصص
  • Vercel

موارد

الأشخاص الذين تابعتهم وفحصوا مستودعاتهم ومقاطع الفيديو لبناء الاستنساخ.

  • ترو نارلا
  • كولبي فايوك
  • ستيفن تي
  • لي روب
  • فلورنتين

ما هذا؟

إذا قمت بالخروج من الحزمة.

  • تأليف التصنيف: يمكّنك من إنشاء متغيرات لأشياء مثل الأزرار. إذا كنت مصممًا ، فهو مثل متغيرات مكون Figma.
  • أسماء ClassNames: إذا قمت بتصميم مكون مثل مكونات Radix UI ، فيمكنك الحصول على خط طويل من فئات الأداة المساعدة CSS عند استخدام CSS Tailwind. قد يكون لديك تحوم ، الرسوم المتحركة ، الاستجابة ، التصميم وغيرها من الفصول. الآن يمكنك تجميعها على خطوط منفصلة.

مكون النص

مكون النص youtube فيديو - اختبار حاليًا

قصص

قصص ADDON المقبل

متفرقات

  • مكون زر قابل لإعادة الاستخدام
  • الواردات المطلقة

مؤلف

روي كويلور

يتصل

  • ؟ اتبعني على Twitter
  • اشترك على YouTube
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل