⚠️ المسار ده مخصص فقط لخريجي Software Engineering Fundamentals أو اجتياز الاختبار بنسبة 80%.

تجاوز مرحلة تصميم المواقع البسيطة..
واحترف بناء تطبيقات الويب الحقيقية (Complex Web Apps).

دبلومة احتراف الـ Front-end Engineering من التأسيس لحد الـ Enterprise Apps بـ Next.js 15.

ابدأ اختبار القبول دلوقتي تصفح المنهج الهندسي

The Mega Projects Showcase

مشاريع بمستوى الشركات، مش مجرد "To-Do List" عادية. هتتعلم إزاي تبني Architecture حقيقي.

SaaS Landing Page
TAILWIND CSS SEO SYSTEMS ACCESSIBILITY FRAMER MOTION

SaaS Landing Page

بناء واجهة SaaS بتدعم الـ Dark Mode مع نظام SEO متكامل وصديق لمحركات البحث، مع التركيز على الـ Accessibility ومعايير الـ UIUX العالمية.

Mini Chart Engine
JS INTERNALS CANVAS API MEMORY MANAGEMENT LOGIC

Mini Chart Engine

تحدي المهندسين: بناء محرك رسوم بيانية من الصفر بالـ JavaScript الخام لربط مفاهيم الـ C++ بالويب، بدون الاعتماد على أي Libraries خارجية.

Shipping Admin Dashboard
REACT TYPESCRIPT ZUSTAND TANSTACK QUERY ZOD

Shipping Admin Dashboard

لوحة تحكم عملاقة لشركة شحن، بنظام Auth وحماية للمسارات و Validation معقد بـ TypeScript مع ربط حقيقي بـ APIs وإدارة حالات الـ Loading والـ Error.

E-learning System
NEXT.JS 15 APP ROUTER SERVER COMPONENTS TYPESCRIPT POSTGRESQL

The Graduation Mega Project: E-learning System

الملحمة النهائية: بناء منصة تعليمية كاملة بمواصفات "nzmly"، بتدعم الـ SSR والـ Caching وإدارة الفيديوهات والاشتراكات، مع لوحة تحكم متكاملة للمدربين.

رأي ابطالنا في المسار؟

تجارب واقعية لطلاب تحولوا لمهندسين حقيقيين بعد إتمام المسار.

"
👨‍💻

م/ أحمد سالم

Frontend Engineer

"أصعب حاجة في المسار ده هي البداية، بس لما بتفهم الـ Internals بتاعة الـ JS وتدخله في الـ React، بتحس إنك بقيت بتمتلك قوة خارقة. المنهج مش سهل بس النتيجة تستاهل كل دقيقة تعب."

SaaS Landing Page
STUDENT WORK
واجهة SaaS مذهلة

React Dashboard

"
👨‍💻

م/ يوسف إبراهيم

Software Engineer

"نقلة تانية خالص في طريقة تفكيري للـ Architecture. قبل الكورس كنت بكتب كود شغال وخلاص، دلوقتي بقيت بصمم الـ System بحيث يكون Scalable و Maintainable. الـ Code Review كان بيطلعلي أخطاء عمري ما كنت هأخد بالي منها."

Student Project Result
STUDENT WORK
لوحة تحكم الخدمات اللوجستية

مشروع التخرج

"
👩‍💻

مهندسة/ رنا علي

React Developer

"كنت فاكرة إني عارفة React لحد ما دخلت المسار ده. اتعلمت يعني إيه Performance optimization بجد وإزاي أبني سيستم كامل معقد بـ TypeScript من غير ما الكود يضرب مني."

Student Project
STUDENT WORK
منصة تعليمية متكاملة

Next.js Platform

خارطة الطريق الكاملة

رحلة بطل الـ Front-End

خارطة طريق هندسية متكاملة.. مش بنسيبك غير وإنت جاهز تسد في أكبر الشركات.

150+
مهمة تقنية
15+
مشروع حقيقي
12
Module تعليمي
6
شهور من الخبرة
المرحلة الأولى

🟦 Semantic HTML & CSS Architecture

بناء الهيكل الخرساني والـ Layouts القابلة للتوسع

"انسى الـ CSS العشوائي (Spaghetti Code) اللي بيبوظ لما الشاشة تصغر. هنا بنتعلم إزاي نبني أنظمة تصميم (Design Systems) بـ Architecture حقيقي، ونكتب HTML 'Semantic' يفهمه الـ Browser والـ SEO. إنت بتأسس هيكل متين، مش مجرد شكل حلو."

40
Tasks
1
Project
2
Modules
Semantic HTML & SEO Systems 01

الـ Structure لمحركات البحث • Semantics بعمق • Accessibility (A11y) • Meta Tags & Open Graph

15 Tasks
CSS Architecture & Tailwind 02

Box Model & Positioning • Modern Layouts (Flex/Grid) • Design Tokens • Tailwind JIT Engine

25 Tasks
Phase Project

SaaS Landing Page

المرحلة الثانية

🟧 JavaScript for Engineers

السيطرة على الـ Engine والـ Business Logic

"دي مش جافاسكريبت بتاعة 'تغيير لون الزرار'. إحنا هنغوص تحت الكابوت في الـ JS Engine، الـ Event Loop، والـ Memory. هنطبق مفاهيم الـ Data Structures عشان تكتب Business Logic معقد، سريع، وميهنجش الـ Browser."

50
Problems
1
Project
2
Modules
JS Core & Engine Internals 03

Inside the Engine (Stack/Heap) • Execution Context & Hoisting • Memory Management • ES6+ Mastery

30 Problems
The DOM as a Tree Structure 04

DOM Traversal (Tree manipulation) • Advanced Events (Delegation) • Web APIs (Observers) • Drag & Drop

20 Tasks
Phase Project

Mini Chart Engine

المرحلة الثالثة

🟦 React Core + TypeScript

بناء أنظمة (Enterprise-Grade) بصرامة هندسية

"هندخل عالم الـ Components بس بصرامة الـ TypeScript. مفيش مساحة للـ Runtime Errors. هتفهم الـ Virtual DOM والـ Rendering Cycle بتشتغل إزاي، عشان تبني تطبيقات ضخمة قابلة للصيانة والتوسع، مش مجرد كود ملزق في بعضه."

20+
Tasks
1
Project
3
Modules
React Components & Hooks 05

Re-rendering & Virtual DOM • Architecture • Mastering Hooks (State, Effect, Memo, Ref)

15 Tasks
TypeScript for React 06

Interfaces & Generics • Prop Types & State Definition • Functional Component Typing

5 Conversions
Modern Routing (Router Dom) 07

Dynamic & Protected Routes • Navigation Guards • Data Loaders & Actions

Deep Dive
Phase Project

Booking System UI

المرحلة الرابعة

🟪 State Management & Data Flow

هندسة البيانات والسيطرة على الـ Renders

"لما الأبليكيشن يكبر، الداتا بتتحول لفوضى. هنتعلم إزاي نسيطر على الـ Global & Server State، ونعمل Caching ذكي، عشان نضمن Data Flow منظم، و Performance طيارة من غير Re-renders مالهاش أي لازمة تسحب من أداء الجهاز."

30+
Tasks
1
Project
3
Modules
Scalable State (Zustand) 08

Smarter Global State Management • Store Design • Data Slicing and Optimization

Server State (TanStack) 09

Caching & Synchronization • Pagination & Infinite Scrolling • Optimistic Updates

Advanced Forms (Hook Form + Zod) 10

Complex Forms • Schema Validation • Performance Optimization in Input handling

Phase Project

Shipping Admin Dashboard

المرحلة الخامسة

🟩 Production Peak (Next.js 15)

القمة الهندسية وبناء أنظمة جاهزة للسوق

"المحطة الأخيرة. هنستغل Next.js في الـ Server-Side Rendering (SSR) والـ Data Fetching المتقدم عشان نوصل لأعلى SEO وأسرع Load Time. ده المكان اللي بتتحول فيه من مجرد ديفيلوبر، لمهندس بيطلع منتج (Production-Ready) بيتحمل آلاف المستخدمين."

15+
Tasks
1
Mega Project
2
Modules
Next.js App Router (Full Stack) 11

Server vs Client Components • Data Fetching (Server Actions) • Streaming & Suspense

Performance & System Design 12

Core Web Vitals • Image Optimization • Static vs Dynamic Rendering • Deployment Architecture

The Mega Project

E-learning Management System

🎓 التخرج والجاهزية لسوق العمل

"وصولك لهنا معناه إنك معاك Portfolio حقيقي يثبت إنك مش مجرد 'Junior' بيكتب كود وخلاص. إنت مهندس بيفكر في الـ Architecture والـ Performance أولاً. إنت دلوقتي جاهز تنافس بقوة في الإنترفيوهات التقنية وتثبت مكانك في أكبر الشركات."

جاهز تبدأ التحدي الحقيقي؟

لو معاك أساسيات هندسة البرمجيات، فده المكان اللي هتبني فيه عضلاتك في الـ Front-End.