مسار هندسة الفرونت إند

مستوى

فرونت إند المستوى 3: مهندس فرونت إند محترف

من بناء تطبيقات لهندسة منتجات: Next.js بالإنتاج، معمارية، أداء، وقيادة الـ AI agents.

المدة
8 أسابيع
الساعات المباشرة
48
المواعيد
3 جلسات مباشرة بالأسبوع (ساعتين لكل جلسة) + 6–8 ساعات تطبيق

لمن هذا البرنامج

خريجي المستوى 2 أو المطوّرين المبتدئين بالشغل.

قبل أن تنضم

المستوى 2 أو اختبار تحديد مستوى (React, TypeScript, اختبارات).

ماذا ستستطيع أن تفعل

  • تنشر وتصون تطبيقات Next.js بالإنتاج
  • تاخد قرارات معمارية وتدافع عنها
  • تنجح بمقابلات mid-level ومنها الـ system design
  • تقود الـ AI agents بدل ما يحلّوا محلك

أسبوعاً بأسبوع

  1. 1الأسبوع 1Next.js واستراتيجيات العرض
    • App Router
    • CSR / SSR / SSG / ISR
    • Server vs Client Components
    • Metadata & SEO
    التركيز الهندسي
    اختار طريقة العرض لكل صفحة وبرّر اختيارك.
    المهمة
    إعادة بناء تطبيق المستوى 2 بـ Next.js
  2. 2الأسبوع 2طبقة البيانات
    • Server Actions
    • Route handlers
    • Prisma / Supabase
    • Caching & revalidation
    التركيز الهندسي
    ارسم مسار البيانات قبل ما تبني.
    المهمة
    ميزة CRUD كاملة من الأول للآخر
  3. 3الأسبوع 3تسجيل الدخول والأمان
    • Sessions
    • Middleware
    • Roles
    • XSS & CSRF
    • Secrets
    • Zod validation
    التركيز الهندسي
    فكّر كمهاجم: كيف حدا ممكن يكسر هالشي؟
    المهمة
    لوحة أدمن بصلاحيات + قائمة فحص أمني
  4. 4الأسبوع 4الأداء
    • Core Web Vitals
    • Bundle analysis
    • Code splitting
    • Image & font optimization
    • Memoization
    التركيز الهندسي
    قيس أولاً، وبعدين حسّن.
    المهمة
    تقرير أداء بأرقام قبل وبعد
  5. 5الأسبوع 5معمارية الفرونت إند
    • Feature-based structure
    • Design systems
    • Monorepos intro
    • State at scale
    • API contracts
    التركيز الهندسي
    سجلات قرارات معمارية، وصمّم للتغيير.
    المهمة
    إعادة هيكلة كود فوضوي مع ADR
  6. 6الأسبوع 6الجودة على نطاق واسع
    • Playwright E2E
    • GitHub Actions CI/CD
    • Preview deploys
    • Sentry
    • Accessibility audit
    التركيز الهندسي
    أتمت الشي اللي البشر بينسوه.
    المهمة
    CI بيمنع دمج أي PR فاشل
  7. 7الأسبوع 7تصميم أنظمة الفرونت إند
    • Designing a feed, chat or dashboard
    • i18n & RTL (Arabic)
    • Real-time basics
    التركيز الهندسي
    متطلبات ← مكوّنات ← بيانات ← مفاضلات.
    المهمة
    مقابلة system design تجريبية + وثيقة تصميم
  8. 8الأسبوع 8الهندسة مع الـ AI
    • Specs for AI agents
    • Reviewing agent PRs
    • AI features in the UI
    • Streaming chat
    التركيز الهندسي
    انت بتكتب المواصفات، الـ AI بينفّذ، وانت مسؤول عن الجودة.
    المهمة
    المشروع النهائي + دفاع تقني

المشروع النهائي

منتج Next.js بمستوى إنتاج (داشبورد SaaS، سوق إلكتروني، أو أداة AI) مع تسجيل دخول وقاعدة بيانات و CI واختبارات E2E ومراقبة و Lighthouse 90+ وعربي/إنجليزي، ودفاع تقني 20 دقيقة.

الأدوات التي ستستخدمها

  • Next.js (App Router)
  • Server Components & Actions
  • Prisma / Supabase
  • Zod
  • Playwright
  • GitHub Actions
  • Sentry
  • Lighthouse
  • AI coding agents

الشهادة

شهادة إتمام — فرونت إند المستوى 3

سنجاب بتعطي شهادات إتمام مع رابط تحقق وقائمة المشاريع اللي بنيتها، وهي مش شهادات أكاديمية أو معتمدة حكومياً.