مطور خبير لرفع كفاءة موقع (Front-end & Back-end)

السلام عليكم،

لدي مشروع منصة تعليمية تفاعلية تم بناؤه بنسبة 90%، والموقع يتكون من واجهة أمامية (Front-end) بملف واحد index.html مبني بـ Tailwind CSS و JavaScript، وواجهة خلفية (Back-end) مرفوعة على Vercel بـ Node.js للربط مع Gemini API (Audio streaming عبر الـ WebSockets).

أريد منك تنفيذ المهام التالية وتفنيش الموقع ليعمل بشكل "بيرفكت":

1. حماية المحتوى والملكية الفكرية:

- بهدف حماية المحتوى، سأزودك بملفات المشروع وبها (درسين تجريبيين فقط) لتطبيق البرمجة واختبارها عليها. وبعد استلام الكود سليماً وشغالاً، سأقوم أنا برفع المحتوى الكامل الحقيقي بنفسي.

- تسليم المشروع سيكون عبر ملف مضغوط (Zip)، ولن يتم مشاركة حسابات GitHub أو Vercel الشخصية الخاصة بي.

2. الأداء وحل مشكلة انهيار المتصفح (Crash) في الجوال:

- فصل مصفوفة البيانات (الدروس) من ملف index.html الحالي ووضعها في ملف خارجي مستقل lessons.json.

- تعديل الكود ليستدعي الدروس من ملف الـ JSON الخارجي عند الطلب (On-demand) لتخفيف حجم الصفحة وضمان عدم كراش الجوال.

- شرط مهم: الحفاظ على التصميم والألوان الأصلية الفخمة والوضع الليلي وتناسق الخطوط دون أي تشويه أو تغيير أثناء تعديل الكود أو فصله.

3. أداة الـ AI والمايك (Gemini API):

- ضبط واستقرار اتصال الـ WebSockets والـ Audio Streaming بين الباك إند و Gemini API ليعمل دون تعليق.

- تفعيل ميزة المقاطعة (Barge-in) بالكامل (إذا تكلم المستخدم، يسكت الروبوت فوراً ليستمع).

- ضبط مهلة المايك (Timeout Handler) ليفصل تلقائياً بعد 12 ثانية إذا علق السيرفر حمايةً للمنصة.

- ستستخدم مفتاح API تجريبي خاص بك أثناء البرمجة، وسأقوم بتبديله لمفتاحي لاحقاً من Vercel.

4. التوافق مع الآيفون وجميع المتصفحات (Cross-Browser Compatibility):

- ضمان عمل المايك وتشغيل الصوت التفاعلي (Audio Context) على متصفح الآيفون الأساسي (Safari) والأندرويد (Chrome) والكمبيوتر دون أي مشاكل.

- استخدام صيغ صوت ومعدل ترميز (Sample Rate) متوافق تماماً مع نظام iOS.

- التأكد من أن الواجهة متجاوبة (Responsive) بالكامل مع كل شاشات الجوالات.

5. ميزات إضافية وجودة الكود:

- حفظ تقدم الطالب في خريطة الدروس باستخدام الـ LocalStorage حتى لا يضيع تقدمه عند إغلاق المتصفح.

- إضافة مؤشرات بصرية واضحة وحركية أثناء حديث الروبوت، وأثناء استماع المايك.

- تفعيل ميزة تنقية الصوت (Echo Cancellation) عند تسجيل المايك.

- كتابة تعليقات توضيحية (Comments) واضحة داخل الأسطر البرمجية الهامة لسهولة التطوير مستقبلاً.

أتطلع لرؤية عرضك والمدة المتوقعة للتنفيذ. شكراً لك.