البرمجة التحادثية

اصنع لي form

أنا أبني تطبيق Next.js 14 للتجارة الإلكترونية باستخدام TypeScript و Tailwind.
أحتاج نموذج (form) لتسجيل حساب جديد يحتوي على:
- الاسم الكامل
- البريد الإلكتروني
- كلمة المرور (مع تأكيد)
- رقم الهاتف (اختياري)
استخدم React Hook Form للتحقق من المدخلات.

أنشئ مكون Button قابل لإعادة الاستخدام:
- ثلاثة أحجام: sm, md, lg
- ثلاثة أنواع: primary, secondary, outline
- دعم حالة التحميل مع spinner
- تأثيرات hover و focus
- TypeScript مع props موثقة

أريد بناء dashboard لإدارة المهام.
الصفحة الرئيسية تعرض:
- إحصائيات المهام
- قائمة المهام الحالية
- زر إضافة مهمة جديدة

رائع! الآن دعنا نحسن قسم الإحصائيات:
- أضف رسم بياني للمهام المنجزة هذا الأسبوع
- استخدم recharts للرسوم البيانية
- أضف animation عند التحميل

أحببت النتيجة! تعديلات صغيرة:
- غير لون الرسم البياني للتدرج الأزرق
- أضف tooltip عند hover على النقاط
- اجعل التحديث كل 30 ثانية

تصرف كمهندس أمان متخصص في تطبيقات الويب.
راجع كود المصادقة التالي وحدد الثغرات الأمنية المحتملة:

[الكود هنا]

أريد توحيد أسلوب أسماء الدوال في المشروع.

الأسلوب المطلوب:
- getUserById ✓
- get_user_by_id ✗
- GetUserById ✗

حول هذه الدوال للأسلوب الصحيح:
- fetch_all_products
- CreateNewOrder
- delete_item_from_cart

أحتاج خوارزمية لترتيب المنتجات في صفحة المتجر.
المعايير:
- الأكثر مبيعاً
- الأحدث
- التقييم
- السعر

اشرح تفكيرك خطوة بخطوة قبل كتابة الكود.
كيف ستوازن بين هذه المعايير؟

أحاول فهم مشكلة في الكود.
عندما يضغط المستخدم على زر "حفظ":
1. يتم إرسال البيانات للـ API
2. يظهر loading spinner
3. لكن أحياناً تُحفظ البيانات مرتين!

ساعدني في التفكير: ما الذي يمكن أن يسبب هذا؟

[أنت] ابنِ مكون للتعليقات

[الذكاء الاصطناعي] [يقدم الكود]

[أنت] جيد، لكن:
- أضف pagination
- استخدم infinite scroll بدلاً من الأزرار
- أضف تحميل skeleton

[الذكاء الاصطناعي] [يعدل الكود]

[أنت] ممتاز، أضف اختبارات Jest لهذا المكون

[الذكاء الاصطناعي] [يضيف الاختبارات]

[أنت] اشرح لي كيف يعمل WebSocket في المتصفح

[الذكاء الاصطناعي] [يشرح المفهوم]

[أنت] الآن طبق هذا في مشروعي.
أريد real-time notifications.

[الذكاء الاصطناعي] [يكتب الكود]

[أنت] هذا الخطأ يظهر عندما أحاول حفظ المستخدم:
TypeError: Cannot read property 'id' of undefined

الكود المتعلق:
[الكود]

[الذكاء الاصطناعي] [يحلل المشكلة]

[أنت] فهمت، لكن لماذا user أحياناً undefined؟

[الذكاء الاصطناعي] [يشرح سبب المشكلة الجذري]

ما الفرق بين useMemo و useCallback في الكود الذي كتبته؟
لماذا استخدمت أحدهما هنا والآخر هناك؟

@components/Button.tsx
@lib/utils.ts

أنشئ مكون Card يتبع نفس أسلوب Button
واستخدم دوال utils الموجودة

قررنا استخدام Zustand بدلاً من Redux.
السبب: مشروع صغير ولا نحتاج تعقيد Redux.

الآن، أنشئ store لإدارة سلة المشتريات.

أعطني 3 طرق مختلفة لتنفيذ lazy loading للصور.
لكل طريقة اذكر:
- الإيجابيات
- السلبيات
- متى تستخدمها