Wasla

نظرة عامة

Wasla منصة تعلم فيديو مبنية على فكرة بسيطة: يوتيوب مليان كورسات حلوة، بس مش مبني زي فصل دراسي. Wasla بتستورد القنوات وقوائم التشغيل بالـ ID أو الـ handle أو اللينك، وبعدين تحولها لكورسات منظمة مع تتبع للتقدم وتصنيفات وبحث.

التحدي

YouTube Data API بيديك مواد خام كتير بس مفيش هيكل كورس. التحدي كان إني أعمل موديل للقنوات وقوائم التشغيل والفيديوهات يحس فيه المستخدم إنه منهج — من غير ما أطلب منه ينظم كل حاجة بإيده.

الطريقة

بنيت واجهة React 19 بـ Tailwind CSS بتفتح بالعربي افتراضيًا وبتتحول للإنجليزي بشكل نظيف. Express API بيتعامل مع القنوات واستيراد قوائم التشغيل؛ والواجهة بتجمع الفيديوهات في وحدات شبه الكورس، وبتخزن التقدم محليًا، وبتخليك تكمل من حيث وقفت.

بيعمل إيه

• استيراد القنوات بالـ ID أو الـ handle أو اللينك
• تحويل قوائم التشغيل لكورسات منظمة
• تتبع التقدم واستكمال التشغيل
• فلترة وبحث بالتصنيف والفترة الزمنية والترتيب
• واجهة ثنائية اللغة والعربي هو الافتراضي
• تجربة PWA متجاوبة

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

• واجهة React 19 + Tailwind CSS
• طبقة API بـ Node.js + Express 5
• YouTube Data API لبيانات القنوات وقوائم التشغيل
• النشر على Vercel

اتعلمت إيه

Wasla علمتني قد إيه في تفكير منتج جوه موديل البيانات. الفرق بين قائمة تشغيل وكورس مش تقني — هو مجموعة افتراضات عن طريقة تعلم الناس. وبناء الواجهة الثنائية خلاني أصمم التخطيط للاتجاهين من البداية.