منصة تعليمية · معمارية الواجهة الأمامية
Univerta
منصة تعليم متعددة الواجهات تشمل الإدارة وتشغيل البرامج والمدرسين وتجربة تعلم الطالب.
الدور
مهندس واجهة أمامية عمل أساساً عبر لوحات React والمكونات المشتركة وتكامل API والتحقق والتعريب.
النطاق
إدارة البرامج والدورات والفصول والتعلم المرتبط بالعمل · التعلم والتقويم والدروس والملاحظات والتعليقات والتسجيل للطلاب · الأدوار والصلاحيات وتسجيل الدخول وشهادات المدرسين ورفع الملفات · جداول CRUD مشتركة وأنماط النماذج والبحث والإعدادات والتسجيل عبر CSV
الفريق
ثلاثة مطوري واجهة أمامية، ومطورا واجهة خلفية، ومدير مشروع، ومهندس جودة، ومصمم UI/UX.
التحدي
تحويل التعقيد إلى حالة مفهومة.
التحدي
تسببت سلاسل اعتماد دائرية متعددة واستيرادات غير منظمة باحتكاك كبير أثناء التطوير، وعطلت التحديث الفوري، وأثرت في أداء التطبيق المبني.
النهج
استخدمنا مخطط مشاريع Nx لكشف سلاسل الاعتماد. ساهمت في تنظيف الاستيرادات والتصديرات وتنظيمها حول مكتبات core والمكتبات المشتركة، ثم عززنا الحدود بقواعد ESLint أشد.
النتيجة
عاد التحديث الفوري، وأصبح مخطط الاعتماد أوضح، وانتقل اختبار Lighthouse مكتبي أجراه زميل تحت الظروف نفسها من 78 إلى 92.
أبرز المساهمات
- 01نفذت تدفقات رئيسية للبرامج والدورات والتصنيفات والفصول والتعلم المرتبط بالعمل والأدوار والشهادات.
- 02بنيت تصفح البرامج وتفاصيل الدورات والدروس والجلسات والتقويم والإكمال والملاحظات والتعليقات للطلاب.
- 03أنشأت واجهة جداول CRUD ومنطق hooks أعاد الفريق استخدامهما عبر الوحدات.
- 04رسخت نمطاً يفصل عرض النموذج عن منطق hook أو context.
التقنيات
تابع الاستكشاف
مصحف اقرأ
تكامل واجهة لجلسات التلاوة المباشرة، وصوت المتصفح، والملاحظات على مستوى الآية، وقارئ قرآن بست لغات.
عرض دراسة الحالة
إدارة متون
منصة إدارة طورتها منذ إعدادها الأول، وتشمل مجالس التسميع المباشرة وGraphQL والحضور والشهادات.
عرض دراسة الحالة
Adam Radar
لوحات غنية بالبيانات وتدفق تقارير مخصصة مع الاستطلاع والإلغاء والتصفح اللانهائي والإشعارات وتصدير CSV.
عرض دراسة الحالة