محاور الجافا سكريبت

القسم الأول

مقدمة وبيئة العمل — ما هي الجافاسكربت وأين تُستخدم، إعداد الأدوات.
الأساسيات — المتغيرات، الأنواع، العمليات، التعليقات.
التحكم في التدفق — الجمل الشرطية والحلقات.
الدوال — التعريف، الدوال السهمية، البراميترات، higher-order.
النطاق والكلوزر — scope، closures.
الكائنات — الخصائص، الطرق، prototype.
المصفوفات — التعامل مع العناصر وطرق مثل map وfilter وreduce.
this وCall/Apply/Bind — فهم السياق والتحكم به.
ميزات ES6+ — let/const، destructuring، classes، modules.
الوحدات (Modules) — import/export وتنظيم الكود.
DOM — التعديل على العناصر والسمات.
الأحداث — التعامل مع Event Listeners وdelegation.
واجهات المتصفح — LocalStorage، Fetch API، Geolocation.
التواصل الشبكي — AJAX، Fetch، WebSockets.
البرمجة غير المتزامنة — callbacks، promises، async/await.
إدارة الحزم — npm، scripts، Babel.
الأداء — تحسين السرعة واستخدام Web Workers.
الوصولية والتدويل — مبادئ A11y ودعم اللغات.
Node.js — بناء خوادم والتعامل مع الملفات.
مشاريع عملية — تطبيقات مثل ToDo أو متجر صغير.

القسم الثاني

مقدمة إلى React — مفهوم الـ component-based UI، Virtual DOM، لماذا نستخدم React ومتى تكون مناسبة.
البيئة والأدوات — Node/npm أو pnpm، إنشاء المشاريع (Create React App / Vite)، إعداد محرر، React DevTools.
JSX — كتابة JSX، الفروقات عن HTML، التعبيرات داخل JSX، الصفة className وchildren.
المكونات (Components) — مكونات وظيفية (Functional) مقابل كلاس (Class)، مبدأ التركيب (composition) وإعادة الاستخدام.
Props وState — تمرير البيانات عبر props، إدارة الحالة المحلية، مبدأ الـ immutability ورفع الحالة (lifting state up).
دورة حياة المكونات — lifecycle methods في الكلاسات (componentDidMount...) والمعادل باستخدام useEffect في الـ hooks.
التعامل مع الأحداث والـ DOM — event handlers (Synthetic Events)، التعامل مع النماذج، منع السلوك الافتراضي، الوصول للـ DOM عبر refs.
القوائم والمفاتيح (Lists & Keys) — عرض قوائم ديناميكية، أهمية الـ key وكيفية اختيارها لتجنّب إعادة التصيير غير الضرورية.
النماذج (Forms) والتحقق — controlled vs uncontrolled components، التحقق validation، مكتبات شائعة (Formik, React Hook Form).
Refs والـ Imperative Code — useRef، forwardRef، createRef، when and how to use imperative handles.
الـ Hooks الأساسية — useState، useEffect، useRef، useContext: ما تفعل ولمتى تُستخدم.
الـ Hooks المتقدمة — useMemo وuseCallback لتحسين الأداء، useReducer لإدارة حالات مركبة، useLayoutEffect، useImperativeHandle.
الـ Custom Hooks — كتابة hooks قابلة لإعادة الاستخدام لفصل المنطق عن العرض ونماذج تصميم شائعة.
Context API — توفير القيمة عبر الشجرة بدون prop-drilling، نمط الاستخدام ومشاكل الأداء وكيفية تجنّبها.
إدارة الحالة المتقدمة — مقارنة بين Redux / MobX / Zustand / Recoil، مفاهيم store, actions, reducers، middleware.
جلب البيانات وإدارة الـ Server State — patterns للـ data fetching (fetch/axios)، التعامل مع loading/error، أدوات مثل React Query أو SWR للـ caching وbackground updates.
Suspense وConcurrent Features (React 18+) — مفاهيم التزامن، startTransition، Suspense للـ code-splitting والبيانات (مقدمة).
تقسيم الكود (Code Splitting) والتحميل الكسول — React.lazy وSuspense وdynamic imports لتحميل أجزاء التطبيق عند الحاجة.
التوجيه (Routing) — استخدام react-router: إعداد المسارات، nested routes، params، حماية المسارات (protected routes).
التعامل مع الأخطاء (Error Boundaries) — كتابة Error Boundaries لمكونات معينة وتجربة المستخدم عند حدوث أخطاء.
الأداء Optimization — تقنيات تقليل إعادة التصيير (memo، useMemo، useCallback)، virtualized lists (react-window), profiling وأدوات القياس.
الاختبار (Testing) — unit tests مع Jest، اختبارات الواجهة مع React Testing Library، e2e مع Cypress أو Playwright، استراتيجيات Mocking.
الستايلينغ وCSS في React — CSS Modules، CSS-in-JS (styled-components, Emotion)، Tailwind، مقاربة التصميم المكوّناتي.
الوصولية (A11y) وSEO — عناصر ARIA، الوصول عبر لوحة المفاتيح، تحسين SEO للواجهات المُحمّلة من جهة الخادم أو المهيأة مسبقًا.
العمل مع TypeScript — كتابة مكونات مؤنّنة، typing لـ props وhooks، نماذج شائعة لتجنب أخطاء الأنواع.
الـ Server-side Rendering وStatic Generation — مبادئ SSR/SSG، مقدمة إلى Next.js (getServerSideProps, getStaticProps) وفوائدها.
التكامل مع Backends وGraphQL — REST vs GraphQL، استخدام Apollo Client أو urql، إدارة الـ caching والـ subscriptions.
Realtime & WebSockets — حالات الاستخدام (chat، live updates)، نمط التكامل وإدارة الحالة في الوقت الحقيقي.
النشر والبناء وCI/CD — إعدادات build، env variables، نشر على Vercel/Netlify/Docker، إعداد خط تكامل/نشر مستمر.
أمن تطبيقات React — تجنّب XSS، التعامل الآمن مع توكنات المصادقة، best practices للتخزين والمحافظة على السرية.
تصميم المعمارية لتطبيقات كبيرة — تقسيم الميزات (feature folders)، boundaries للمكونات، ممارسات لفرق متعددة المطورين.
الرسوم المتحركة (Animations) — CSS transitions vs libraries (Framer Motion)، أمثلة على حركة واجهات تفاعلية.
التقنيات الحديثة ونظرة مستقبلية — React Server Components، edge rendering، micro-frontends، وكيفية متابعة التحديثات في الإيكوسيستم.
مشاريع عملية مقترحة — قائمة مشاريع تدريجية: ToDo مع CRUD، مدونة مع SSR، متجر إلكتروني بسيط، لوحة تحكم Dashboard، تطبيق دردشة في الوقت الحقيقي.

القسم الثالث

مقدمة إلى Next.js — ما هو Next.js؟ ولماذا يُستخدم؟ مميزات SSR, SSG مقارنة بـ CRA/React التقليدي.
إعداد البيئة — تثبيت Next.js عبر create-next-app، هيكل المشروع الافتراضي، تشغيل الخادم المحلي.
الصفحات (Pages) — نظام الصفحات المبني على الملفات، إنشاء صفحات ديناميكية وثابتة، التعامل مع 404 و500.
التوجيه (Routing) — التوجيه التلقائي، الروابط باستخدام next/link، التوجيه الديناميكي (dynamic routes)، التوجيه المتداخل (nested).
جلب البيانات (Data Fetching) — getStaticProps، getServerSideProps، getStaticPaths، متى يُستخدم كل واحد منها.
التصيير (Rendering) — SSR (Server-Side Rendering)، SSG (Static Site Generation)، ISR (Incremental Static Regeneration) والفرق بينهم.
المكونات والتخطيطات (Layouts) — إنشاء Layout مشترك بين الصفحات، _app.js و _document.js ودورهما.
الستايلينغ — دعم CSS وSass، CSS Modules، styled-jsx، التكامل مع Tailwind CSS أو styled-components.
الصور (Image Optimization) — استخدام next/image لتحسين الصور، التحميل الكسول (lazy loading)، إعدادات domains.
الخطوط (Fonts) — تحميل الخطوط باستخدام next/font، ميزات التحسين والأداء.
API Routes — إنشاء API داخل مشروع Next.js، التعامل مع REST endpoints، أمثلة على GET/POST.
المصادقة (Authentication) — التكامل مع NextAuth.js، JWTs، حماية الصفحات (protected routes).
إدارة الحالة — استخدام Context API أو Redux أو Zustand داخل Next.js، مشاركة الحالة بين الصفحات.
التعامل مع قواعد البيانات — التكامل مع Prisma، MongoDB، أو PostgreSQL، الاتصال من خلال API Routes.
النماذج (Forms) — معالجة البيانات في النماذج، رفع الملفات، التعامل مع المكتبات (Formik, React Hook Form).
التوجيه المتقدم (Advanced Routing) — catch-all routes، optional routes، middleware في Next.js.
الوسيطات (Middleware) — مفهوم Middleware، التحكم بالطلبات قبل وصولها للصفحات أو الـ APIs.
الأداء والتحسين — prefetching للروابط، code splitting، lazy loading، القياس باستخدام Lighthouse.
التدويل (i18n) — دعم اللغات المتعددة، إعداد next.config.js، إدارة الترجمة (next-i18next).
SEO في Next.js — تحسين محركات البحث، استخدام next/head، Open Graph وMeta Tags.
الأمان — حماية API Routes، التعامل مع CSRF/XSS، best practices.
النشر (Deployment) — النشر على Vercel، Netlify، Docker، إعدادات بيئة الإنتاج (env variables).
Next.js 13 وما بعده (App Router) — نظام المجلد app/ الجديد، server components، layout.tsx، page.tsx، loading.tsx.
React Server Components (RSC) — الفرق عن المكونات التقليدية، تحسين الأداء.
Streaming وSuspense — التصيير الجزئي (partial rendering)، تحديثات React 18.
التكامل مع GraphQL — استخدام Apollo Client أو urql مع Next.js.
Realtime وWebSockets — إضافة دعم للتحديثات الفورية (chat/live updates).
اختبار تطبيقات Next.js — unit tests مع Jest، integration tests، e2e مع Cypress/Playwright.
مشاريع عملية — مدونة مع SSG، متجر إلكتروني بقاعدة بيانات، Dashboard مع مصادقة، تطبيق دردشة realtime.

القسم الرابع

مقدمة إلى MongoDB — ما هي NoSQL؟ مقارنة مع قواعد البيانات العلائقية، مميزات MongoDB.
تثبيت وإعداد البيئة — تثبيت MongoDB Community/Atlas، استخدام MongoDB Compass وmongosh.
المفاهيم الأساسية — قواعد البيانات (Databases)، المجموعات (Collections)، الوثائق (Documents).
أنواع البيانات — النصوص، الأرقام، القيم المنطقية، المصفوفات، الكائنات المتداخلة، ObjectId، التواريخ.
الأوامر الأساسية — insertOne/Many، find، updateOne/Many، deleteOne/Many.
الاستعلامات (Queries) — عوامل مقارنة ($eq, $gt, $in ...)، عوامل منطقية ($and, $or, $not)، البحث النصي.
الفهارس (Indexes) — أنواع الفهارس (وحيد، مركّب، نصي)، تحسين الأداء باستخدام الفهرسة.
التجميع (Aggregation Framework) — مراحل التجميع: $match، $group، $project، $sort، $lookup.
العلاقات بين البيانات — Embedding vs Referencing، متى تستخدم كل واحدة، $lookup للربط بين المجموعات.
التعامل مع المصفوفات — إضافة عناصر ($push, $addToSet)، التحديث بعوامل ($elemMatch, $size, $slice).
التعامل مع التواريخ — تخزين التواريخ، الاستعلام باستخدام $gte/$lt، استخدام Aggregation مع التواريخ.
التعامل مع البيانات الجغرافية — GeoJSON، الفهارس الجغرافية (2dsphere)، استعلامات الموقع (near, within).
الأمان — إنشاء المستخدمين والأدوار، التحكم في الصلاحيات، التشفير.
النسخ المتماثل (Replication) — مفهوم الـ Replica Set، الفوائد للتوافر العالي، إعداد النسخ المتماثل.
التجزئة (Sharding) — تقسيم البيانات على عدة خوادم، مفهوم shard key، متى تحتاج sharding.
النسخ الاحتياطي والاستعادة — أوامر mongodump وmongorestore، إدارة النسخ الاحتياطية.
الأداء — تحليل الاستعلامات باستخدام explain()، تحسين الفهارس، best practices.
التكامل مع Node.js — استخدام مكتبة MongoDB driver أو Mongoose، CRUD مع Express.
Mongoose — النماذج (Schemas & Models)، الفاليديشن، Middleware hooks، Population.
التكامل مع Next.js/React — ربط MongoDB مع واجهة حديثة، API Routes مع MongoDB Atlas.
Atlas — إنشاء Cluster على MongoDB Atlas، الاتصال بالتطبيق، إعداد users/roles.
اختبار قواعد البيانات — استخدام in-memory MongoDB للاختبارات (mongodb-memory-server).
مشاريع عملية — مدونة بسيطة، نظام إدارة مستخدمين، متجر إلكتروني صغير بمنتجات ومستخدمين وطلبات.

القسم الخامس

مقدمة إلى Strapi — ما هو Headless CMS؟ مميزاته مقارنة بـ WordPress وExpress.
إعداد البيئة — التثبيت عبر npx أو Docker، هيكل المشروع.
لوحة التحكم (Admin Panel) — نظرة على الواجهة، إدارة المستخدمين، الصلاحيات.
إنشاء Content Types — الحقول الأساسية (String, Number, Boolean, Date, Media)، العلاقات (one-to-one, one-to-many, many-to-many).
إدارة البيانات — إنشاء وتعديل وحذف البيانات من خلال لوحة التحكم أو عبر API.
REST API — استهلاك بيانات عبر /api/، التصفية (filters)، الترتيب، Pagination، Populate.
GraphQL API — تثبيت Plugin GraphQL، كتابة Queries وMutations.
Roles & Permissions — التحكم في الوصول (Public, Authenticated, Custom Roles).
المصادقة (Authentication) — تسجيل الدخول/الخروج، JWT Tokens، التكامل مع OAuth (Google, GitHub...).
رفع الملفات (Upload) — إدارة الوسائط، تخزين محلي أو عبر S3/Cloudinary.
التدويل (i18n) — دعم اللغات المتعددة وإدارة المحتوى المترجم.
الإضافات (Plugins) — نظرة على plugins الافتراضية، تثبيت Plugins جديدة، تطوير Plugins مخصصة.
التخصيص (Customization) — تعديل الـ Controllers وServices، Middleware، Hooks.
Webhooks — إرسال إشعارات للتطبيقات الأخرى عند إنشاء/تعديل/حذف بيانات.
التكامل مع قواعد البيانات — MongoDB، PostgreSQL، MySQL، SQLite.
الأمان — ضبط CORS، حماية المفاتيح، الصلاحيات الدقيقة للـ API.
الأداء — تحسين الاستعلامات، استخدام caching، تقليل populate غير الضروري.
النشر (Deployment) — على Vercel، Heroku، DigitalOcean، أو AWS، إعداد ملفات env.
التكامل مع Frontend — استهلاك الـ API من React/Next.js/Vue.
مشاريع عملية — مدونة Blog، متجر إلكتروني صغير، نظام إدارة مستخدمين مع صلاحيات.

محاور كورس الفرونت إند المستوى الثاني

JavaScript - React js - next js - MongoDB

القسم الأول

القسم الثاني

القسم الثالث

القسم الرابع

القسم الخامس