مشهد مقابلات الواجهات الأمامية

خطتك الدراسية لمدة 8 أسابيع

3 دقيقة للقراءة

الخطة الدراسية المنظمة هي الفرق بين إضاعة أشهر والحصول على عرض في 8 أسابيع. تفترض هذه الخطة 2-3 ساعات من التمرين اليومي إلى جانب وظيفة بدوام كامل.

الخطة

الأسبوعان 1-2: أساسيات JavaScript و TypeScript

الهدف: سد الفجوات المعرفية في أساسيات JS/TS التي تُعثّر المرشحين.

  • حلقة الأحداث، مكدس الاستدعاءات، طوابير المهام الصغيرة مقابل الكبيرة
  • الإغلاقات (Closures) — اكتب 5 أمثلة من الذاكرة
  • قواعد ربط this (افتراضي، ضمني، صريح، new)
  • الوراثة النموذجية مقابل صيغة الفئات
  • الوعود (Promises)، async/await، أنماط معالجة الأخطاء
  • TypeScript generics، أنواع المساعدة، حراس الأنواع
  • التمرين: 3-5 مسائل برمجة JS يوميًا على LeetCode (سهل/متوسط)

الأسبوعان 3-4: التعمق في React

الهدف: إتقان أساسيات React الداخلية وأنماط المقابلات الشائعة.

  • بنية React Fiber وخوارزمية المصالحة
  • جميع الخطافات: useState, useEffect, useRef, useMemo, useCallback, useReducer
  • الخطافات المخصصة — تصميم وتنفيذ 3-5
  • إدارة الحالة: Context API, Zustand, Redux Toolkit, TanStack Query
  • مكونات الخادم وتوجيهات "use client" / "use server"
  • Next.js App Router, Server Actions, streaming SSR
  • التمرين: بناء تطبيقين React صغيرين من الصفر (بدون قالب بداية)

الأسبوعان 5-6: تصميم أنظمة الواجهات الأمامية

الهدف: تطوير إطار عمل للإجابة على أسئلة تصميم الأنظمة.

  • تعلم إطار RADIO (المتطلبات → البنية → نموذج البيانات → الواجهة → التحسين)
  • تمرين على 5 مسائل كلاسيكية:
    • تصميم إكمال تلقائي/typeahead
    • تصميم واجهة تطبيق دردشة
    • تصميم جدول بيانات
    • تصميم موجز أخبار
    • تصميم معرض صور مع تمرير لا نهائي
  • بنية مكتبة المكونات وتصميم API
  • إدارة الحالة على نطاق واسع
  • التحديثات الفورية (WebSockets, SSE, مقايضات الاستطلاع)
  • التمرين: رسم مسألة تصميم واحدة يوميًا على السبورة (اضبط مؤقتًا لـ 35 دقيقة)

الأسبوع 7: الأداء وإمكانية الوصول

الهدف: القدرة على مناقشة وتحسين مشاكل الأداء الواقعية.

  • Core Web Vitals: LCP, CLS, INP — العتبات واستراتيجيات التحسين
  • Chrome DevTools تبويب الأداء و Lighthouse
  • تقسيم الكود، التحميل الكسول، الجلب المسبق
  • تحسين الصور (الصيغ، الصور المتجاوبة، التحميل الكسول)
  • متطلبات WCAG 2.2 AA — إدارة التركيز، ARIA، التنقل بلوحة المفاتيح
  • التمرين: فحص 2-3 مواقع حقيقية باستخدام Lighthouse وتحديد الإصلاحات

الأسبوع 8: السلوكي والمقابلات التجريبية

الهدف: صقل قصتك والحصول على ملاحظات مباشرة.

  • إعداد 8-10 قصص STAR تغطي: القيادة، النزاع، الفشل، التأثير، التعاون
  • ربط القصص بمبادئ قيادة Amazon إذا كنت تستهدف Amazon
  • بحث الرواتب على levels.fyi لدورك/مستواك/شركتك المستهدفة
  • تمرين سيناريوهات التفاوض
  • أجرِ مقابلتين تجريبيتين على الأقل — استخدم Pramp أو interviewing.io أو اسأل صديقًا
  • سجّل نفسك وأنت تجيب على الأسئلة وراجع الكلمات الحشو والإيقاع

قالب الجدول اليومي

الفترة الزمنية النشاط المدة
الصباح 1-2 مسألة برمجة (LeetCode/خاصة بالواجهات الأمامية) 45 دقيقة
الغداء قراءة مقال واحد عن موضوع الأسبوع 15 دقيقة
المساء جلسة دراسة معمقة (مفاهيم، تمرين تصميم أنظمة، أو تجريبي) 60-90 دقيقة

التعديلات حسب الشركة المستهدفة

إذا كنت تستهدف... اقضِ وقتًا أكثر في...
Meta برمجة Vanilla JS، تصميم أنظمة واجهات أمامية
Google الخوارزميات/DSA، البرمجة العامة
Amazon قصص STAR مرتبطة بـ LPs (خصص يومين كاملين+)
Apple المسائل العملية/التطبيقية، إمكانية الوصول
ناشئة مشاريع الحقيبة، تمرين البرمجة الثنائية

الموارد

  • تمرين البرمجة: LeetCode, GreatFrontEnd, BFE.dev
  • تصميم الأنظمة: "Frontend System Design" من GreatFrontEnd, Educative
  • المقابلات التجريبية: Pramp (مجاني)، interviewing.io، Exponent
  • بيانات الرواتب: levels.fyi
  • التحضير الخاص بالشركة: مراجعات مقابلات Glassdoor, Blind

نصيحة: الاستمرارية تتفوق على الشدة. ساعتان يوميًا لمدة 8 أسابيع أكثر فعالية من جلسات مكثفة لـ 8 ساعات في عطلة نهاية الأسبوع.

الآن بعد أن حصلت على الصورة الكبيرة، لنغص في المحتوى التقني. بدءًا بإتقان JavaScript و TypeScript. :::

اختبار

الوحدة 1: مشهد مقابلات الواجهات الأمامية

خذ الاختبار