ROADMAP / SYLLABUS
من الفكرة إلى الـ production
دي مش Outline عام. دي خريطة دراسة مفصلة تشرح كل مرحلة هتتعلم فيها إيه، وهتطلع منها بإيه.
الصفحة دي معمولة للطالب اللي عايز يفهم الكورس بعمق قبل ما يشتري. هتشوف الـ workflow كامل: التخطيط، التصميم، التنفيذ، المراجعة، الأمان والأداء، SEO والـ Marketing، وبعدين Docker + Production. كل مرحلة فيها مفاهيم، أدوات، Outputs، ودروس عملية مبنية على نفس السيستم اللي هنشتغل بيه جوه الكورس.
HOW TO READ THIS ROADMAP
إزاي تقرأ الخريطة دي صح
الكورس متقسم بشكل sequential. كل مرحلة بتبني على اللي قبلها. مش هتاخد theory منفصل عن التطبيق، ومش هتشوف prompts من غير فهم للسياق. كل Phase فيها: مفاهيم، طريقة تفكير، تنفيذ عملي، مراجعة، ومخرجات واضحة.
مش Prompt Engineering وبس
هتفهم ليه كل prompt بيتكتب، إمتى تستخدمه، وإزاي تمنع الـ AI يخرج عن الـ scope أو ينسى context المشروع.
كل مرحلة لها Output حقيقي
مش بتخلص فيديو وخلاص. بتطلع بفايلات، Specs، Screens، Tests، Audit fixes، أو Setup production جاهز.
المسار مترتب زي شغل حقيقي
بنبدأ بالتخطيط، وبعدها التصميم، وبعدها التنفيذ Phase by Phase، ثم مراجعة، ثم Hardening و Growth و Deploy.
FULL MAP
الخريطة الكاملة في نظرة واحدة
دي الصورة السريعة قبل ما ندخل في التفاصيل. كل Phase ليها دور واضح في نقل المشروع من فكرة غير منظمة إلى System Production-ready.
التخطيط
تحوّل الفكرة إلى PRD + Specs + CLAUDE.md.
Output: PRD.md / Spec Kit / CLAUDE.md
التصميم
تحدد الـ UI والـ design direction قبل ما تكتب كود.
Output: Screens / UI direction / Components plan
التنفيذ
تنفذ المشروع Phase by Phase باستخدام الـ spec كعقد تنفيذ.
Output: Working features / Branch workflow
المراجعة
تراجع الشغل، تطلع TODOs، وتبني E2E tests.
Output: Review notes / Playwright coverage
الأمان والأداء
تعمل Audit على الأمان والأداء قبل الإطلاق.
Output: Security fixes / Performance gains
SEO والـ Marketing
تجهز الموقع للظهور والتتبع والتحويل.
Output: SEO setup / Analytics / Pixel events
Docker + Production
تحول المشروع إلى Build قابل للنشر مع Docker و CI/CD وخط إنتاج واضح.
Output: Dockerized app / CI/CD / Server deploy
DETAILED CURRICULUM
تفاصيل كل مرحلة جوه الكورس
هنا التفاصيل الفعلية. كل بلوك تحت مش مجرد عنوان مرحلة، لكنه يوضح إيه اللي هيتشرح، إيه المصطلحات اللي هتفهمها، إيه الأدوات المستخدمة، وإيه النتيجة اللي هتطلع بيها.
01التخطيط
02التصميم
03التنفيذ
04المراجعة
05الأمان والأداء
06SEO والـ Marketing
07Docker + Production
PHASE 01
التخطيط | قبل ما تكتب سطر كود
بنبدأ من الفكرة نفسها ونحوّلها لمستندات تنفيذ، مش كلام مبعثر. المرحلة دي بتبني الذاكرة الدائمة للمشروع وتحدد حدود الشغل من أول يوم.
من فكرة في دماغك إلى PRD و Spec واضحين يخلو الـ AI فاهم المشروع وقراراته وConventions الشغل من البداية.
هتتعلم إيه في المرحلة دي
- يعني إيه PRD احترافي وإزاي تكتبه من فكرتك بدل كلام عام.
- إزاي تستخرج Spec Kit يحول المنتج إلى Features وPhases وTasks.
- وظيفة ملف
CLAUDE.mdفي حفظ قرارات المشروع والـ conventions. - إزاي تحدد current phase وحدود التنفيذ عشان الـ AI مايتوهش.
المصطلحات اللي هتفهمها
PRDمستند يشرح المنتج، الهدف، المستخدم، والـ scope بشكل تنفيذي.
Spec Kitتقسيم المنتج إلى Specs قابلة للتنفيذ والقياس.
CLAUDE.mdالذاكرة الدائمة للمشروع: decisions, conventions, architecture notes.
Current Phaseالجزء الحالي فقط من الخطة اللي الـ AI مسموح له ينفذه.
الأدوات المستخدمة
ClaudeSpec KitMarkdownPRD Workflow
الـ Output اللي هتطلع بيه
PRD.mdSpec filesCLAUDE.mdPhase plan
من داخل الكورس
من الفكرة للـ PRD الاحترافي
بنحوّل فكرتك لوثيقة Product واضحة فيها الهدف، المستخدم، الفلو، والنتيجة المطلوبة بدل شرح عشوائي.
استخراج الـ Spec Kit
بنفك الـ PRD إلى modules وphases وtasks صغيرة قابلة للتنفيذ والمتابعة.
كتابة CLAUDE.md
بنبني ملف context دايم للمشروع يحفظ conventions، stack decisions، وطريقة الشغل.
تحديد Current Phase
بنتعلم إزاي نمنع الـ AI يشتغل على المشروع كله مرة واحدة ونقفل الـ scope صح.
Representative prompts: كتابة الـ PRD، كتابة CLAUDE.md، تقسيم الـ phases، ضبط الـ scope الحالي.
ليه المرحلة دي مهمة: لأن أي تنفيذ بعد كده هيعتمد على جودة التخطيط.
PHASE 02
التصميم | الـ UI كامل قبل الكود
المرحلة دي بتجاوب على سؤال: شكل المنتج هيبقى عامل إزاي قبل التنفيذ؟ بدل ما تسيب الـ AI يطلع UI عشوائي، بنبني design direction واضح ثم نحوله لواجهات قابلة للتنفيذ.
من وصف ضبابي للشكل إلى Screens واضحة وDesign system direction يخلّي الكود بعد كده أسرع وأدق.
هتتعلم إيه في المرحلة دي
- إزاي توصف الـ UI بشكل صحيح قبل ما تطلب أي شاشة أو component.
- إزاي تستخدم Stitch أو نفس المنهج لإخراج Screens بسرعة.
- تحويل مخرجات الـ design إلى Components قابلة للتكويد.
- ضبط design tokens والهوية البصرية عشان الشكل يبقى consistent.
المصطلحات اللي هتفهمها
UI Directionالأسلوب البصري، الهرمية، الألوان، والإحساس العام للمنتج.
Design Tokensقيم موحدة للألوان، المسافات، والزوايا والظلال.
Screen Flowتسلسل الشاشات الرئيسية والـ user journey.
HTML to Componentsتحويل شكل بصري لمكونات قابلة للدمج داخل المشروع.
الأدوات المستخدمة
StitchCursorFigma ExportUI Prompting
الـ Output اللي هتطلع بيه
UI directionCore screensComponents mapToken guidance
من داخل الكورس
Claude يسألك عن الـ UI
بناخد أسئلة واضحة تحدد الأسلوب البصري والـ hierarchy بدل ما الشكل يطلع generic.
Google Stitch: طلع الـ UI كامل
بنشوف إزاي نطلع شاشات فعلية بسرعة، ونختار منها الاتجاه الأنسب للمشروع.
من Stitch للـ Code
بنحوّل الـ output إلى structure مناسب للكود بدل ما يفضل مجرد شكل.
ضبط الـ Tokens والـ Components
بنبني لغة تصميم قابلة لإعادة الاستخدام بدل ما كل جزء يبقى بشكل مختلف.
Representative prompts: UI questioning flow، screen generation، component conversion، design token alignment.
ليه المرحلة دي مهمة: لأنها بتمنع ساعات طويلة من إعادة التصميم والتعديل بعد ما الكود يبدأ.
PHASE 03
التنفيذ | Phase by Phase
دي مرحلة البناء الحقيقي. هنا بنشتغل على كل Phase لوحدها بعقد واضح من الـ spec، عشان الـ AI ينفذ صح بدل ما يشتت نفسه في المشروع كله.
من Specs مكتوبة إلى Features شغالة، متقسمة على مراحل واضحة، مع Branch workflow يقلل الأخطاء ويزود الاتساق.
هتتعلم إيه في المرحلة دي
- إزاي تبدأ كل Phase صح وتحدد المطلوب فقط منها.
- استخدام الـ spec كـ execution contract يمنع الخروج عن المطلوب.
- تنفيذ Frontend وBackend وIntegration بشكل منظم.
- إدارة branches أو checkpoints بطريقة مناسبة للشغل مع AI.
المصطلحات اللي هتفهمها
Execution Contractالـ spec اللي بيحدد المطلوب والممنوع في كل Phase.
Focused Task Sizeتقسيم الشغل لوحدات صغيرة عشان الجودة تزيد.
Branch Workflowتنظيم مراحل التنفيذ والمراجعة قبل الدمج.
Integration Passضبط التوصيل بين الأجزاء بعد تنفيذها منفصلة.
الأدوات المستخدمة
Claude CodeCursorGitComposer
الـ Output اللي هتطلع بيه
Working featuresIntegrated modulesExecution historyStable phase flow
من داخل الكورس
إعداد المشروع وبيئة الشغل
بنضبط الـ repo والـ stack وملفات الـ context قبل ما التنفيذ يبدأ بشكل فعلي.
بدء Phase جديدة
بنتعلم prompt البداية الصحيح اللي يحدد المطلوب ويمشي الـ AI على حدود واضحة.
لما Claude يخرج عن الـ Spec
بنشوف إزاي ترجّعه تاني للـ scope بدل ما المشروع يتفكك.
Integration لما الـ Phases تكثر
بنربط الـ phases ببعض ونراجع التوافق بين الواجهات والمنطق والبيانات.
Representative prompts: بدء Phase جديدة، تقييد التنفيذ بالـ spec، integration prompts، phase completion checks.
ليه المرحلة دي مهمة: لأنها المرحلة اللي بتحول المعرفة إلى منتج حقيقي بدل Documentation بس.
PHASE 04
المراجعة | Review + Testing
بعد كل تنفيذ لازم يحصل review حقيقي. هنا بنتعامل مع الكود بعقلية مهندس بيراجع، يطلع مشاكل، ينضف الـ debt، ويبني اختبارات تحمي المسارات المهمة.
من كود شغال فقط إلى كود مفهوم، متراجع، وعليه تغطية اختبارية تقلل الانهيارات بعد الإطلاق.
هتتعلم إيه في المرحلة دي
- إزاي تستخدم Claude أو موديل آخر كـ reviewer بدل مجرد منفذ.
- إزاي تطلع TODOs عملية ومشاكل هيكلية مبكرًا.
- كتابة واستخدام E2E tests بـ Playwright على المسارات الحرجة.
- تنظيف الـ technical debt قبل ما يترسخ.
المصطلحات اللي هتفهمها
Code Review Promptأسلوب مراجعة يركز على bugs, regressions, risks, missing tests.
TODO Extractionاستخراج لائحة إصلاحات قابلة للتنفيذ من المراجعة.
E2E Coverageاختبار رحلة المستخدم من البداية للنهاية.
Critical Pathsالمسارات اللي لو كسرت، المنتج كله يتأثر.
الأدوات المستخدمة
Claude ReviewPlaywrightCodexRefactor Cycle
الـ Output اللي هتطلع بيه
Review notesTODO listE2E test casesCleaner codebase
من داخل الكورس
Claude يراجع Phase كاملة
بنشوف صياغة review تخلي الموديل يركّز على المشاكل الفعلية بدل praise أو إعادة الوصف.
Cleanup + Refactor Cycle
بعد review بنحوّل المشاكل إلى إصلاحات مترتبة بدل تغييرات عشوائية.
Testing + E2E بـ Playwright
بنبني tests على الـ flows المهمة عشان نعرف بسرعة لو كسرنا حاجة.
حماية الـ Critical Paths
بنتعلم إيه اللي لازم يتغطى فعلًا وإيه اللي مش أولويتنا في المرحلة الحالية.
Representative prompts: code review، TODO extraction، E2E generation، regression checking.
ليه المرحلة دي مهمة: لأن الكود اللي من غير مراجعة واختبارات بيبان سريع في الأول لكنه بيدفعك تكلفة أعلى بعدين.
PHASE 05
الأمان والأداء | Hardening قبل الإطلاق
المرحلة دي بتحوّل المشروع من “شغال” إلى “جاهز يتعرض للمستخدمين”. بنراجع السرعة، الاختناقات، ونقاط الضعف اللي ممكن تكسر الثقة أو التجربة.
من تطبيق functional إلى تطبيق أسرع، أأمن، وأقرب لستاندردات الإطلاق الفعلية.
هتتعلم إيه في المرحلة دي
- إزاي تعمل Security Audit على المشروع بدل افتراض إنه آمن.
- تشخيص مشاكل الأداء في Frontend وBackend.
- قراءة نتائج Lighthouse وربطها بإصلاحات عملية.
- معرفة vulnerabilities الشائعة وإزاي تقفلها بسرعة.
المصطلحات اللي هتفهمها
Security Auditمراجعة منهجية لمواضع الخطر في المدخلات، الأسرار، والصلاحيات.
Lighthouseقياسات للأداء والجودة وإشارات قابلة للتحسين.
Bottlenecksنقاط الاختناق اللي بتأثر على سرعة أو استقرار التجربة.
Launch Readinessمعيار عملي يحدد هل المشروع جاهز يتعرض لمستخدمين أو لا.
الأدوات المستخدمة
LighthouseSecurity AuditPerf ProfilingFix Pass
الـ Output اللي هتطلع بيه
Security fixesPerformance improvementsAudit checklistLaunch-ready baseline
من داخل الكورس
Performance: Frontend وBackend
بنراجع rendering، assets، requests، واختناقات الأداء اللي بتخلي المنتج بطيء أو ثقيل.
Security Audit كامل
بنشوف أماكن المخاطر الشائعة ونبني prompt review يجيب مشاكل حقيقية.
إصلاحات Hardening
بنتعامل مع نتائج الـ audit كخطة تنفيذ، مش مجرد تقرير.
جاهزية ما قبل الإطلاق
بنحدد إيه الحد الأدنى اللي لازم يكون متحقق قبل ما المشروع يطلع للناس.
Representative prompts: performance optimization، security audit، vulnerability checks، launch readiness checklist.
ليه المرحلة دي مهمة: لأن السرعة والثقة جزء من المنتج، مش تحسينات جانبية بعدين.
PHASE 06
SEO والـ Marketing | الظهور + التتبع
هنا بنضمن إن المشروع مش بس موجود، لكن قابل يجيب Trafic ويتقاس ويتفهم. بنجهزه للبحث، للـ indexing، وللـ conversion tracking.
من موقع شغال إلى موقع قابل للظهور، القياس، وربط النتائج بالـ marketing decisions.
هتتعلم إيه في المرحلة دي
- يعني إيه Technical SEO في التطبيق العملي، مش مجرد كلمات مفتاحية.
- إضافة metadata, sitemap, robots, structured data بشكل صحيح.
- إعداد Meta Pixel وGA4 أو منطق الـ analytics tracking.
- بناء events مرتبطة بخطوات التحويل المهمة في المنتج.
المصطلحات اللي هتفهمها
Technical SEOعناصر تقنية تساعد محركات البحث تفهم وتفهرس الموقع.
JSON-LDStructured data يضيف معنى أوضح للمحتوى.
Pixel / Eventsتتبع أفعال المستخدم المهمة زي view, click, lead, purchase.
Analytics Layerالمنطق اللي يربط أحداث المنتج بالقياس والتقارير.
الأدوات المستخدمة
SEO SetupJSON-LDMeta PixelGA4 Logic
الـ Output اللي هتطلع بيه
SEO-ready pagesSitemap + robotsStructured dataTracking events
من داخل الكورس
SEO تقني للمواقع
بنغطي metadata، canonical، robots، sitemap، والـ structured data اللي فعلاً يفرق.
Marketing Setup للـ E-commerce
بنربط الـ product events بالـ pixel أو analytics عشان يبقى في measurement واضح.
Meta Pixel + Events
بنشوف إزاي تضيف الـ events الصح بدل tracking عشوائي ملوش قيمة.
ربط الـ SEO بالـ Conversion
بنوضح العلاقة بين الظهور، دخول الزائر، والرحلة اللي عايز منه يعملها جوه المنتج.
Representative prompts: SEO كامل، JSON-LD setup، Meta Pixel + events، conversion tracking.
ليه المرحلة دي مهمة: لأن المنتج اللي مفيهوش discoverability أو measurement بيخليك شغال في الضلمة.
PHASE 07
Docker + Production | الإطلاق الفعلي
آخر مرحلة بتقفل الدائرة: إزاي المشروع يطلع من عندك ويشتغل على سيرفر حقيقي بشكل منظم، قابل للتحديث، ومفهوم لو حصل rollback أو deployment جديد.
من مشروع على جهازك إلى نظام Production مع Docker و CI/CD وطريقة نشر متكررة وواضحة.
هتتعلم إيه في المرحلة دي
- يعني إيه Docker وليه مهم في توحيد بيئة التشغيل.
- بناء multi-stage setup مناسب للنشر والإدارة.
- إعداد CI/CD pipeline يختصر خطوات الـ deploy.
- التعامل مع الـ server deployment والـ rollback logic.
المصطلحات اللي هتفهمها
Docker Imageحزمة تشغيل موحدة تحمل التطبيق واعتماداته.
Multi-stage Buildطريقة تقلل الحجم وتفصل build عن runtime.
CI/CDسير عمل أوتوماتيكي للبناء، الاختبار، والنشر.
Rollbackالرجوع لنسخة مستقرة لو deployment جديد حصل فيه مشكلة.
الأدوات المستخدمة
DockerDocker ComposeCI/CDServer Deploy
الـ Output اللي هتطلع بيه
Dockerized appDeploy pipelineServer-ready setupProduction workflow
من داخل الكورس
Docker من الصفر
بنبدأ بالمفاهيم الأساسية ونوصل لملفات تشغيل حقيقية للمشروع.
Compose والخدمات
بنشوف إزاي ترتب الخدمات والبيئات بشكل عملي ومفهوم.
CI/CD Pipeline
بنحط خطوات أوتوماتيكية للبناء والنشر بدل deploy يدوي كل مرة.
Deploy على السيرفر
بنشرح الإطلاق الفعلي، وآلية تحديث النسخة، والتصرف وقت المشاكل.
Representative prompts: Docker setup كامل، multi-stage build، CI/CD pipeline، server deployment checks.
ليه المرحلة دي مهمة: لأن آخر خطوة هي اللي بتحول المنتج من مشروع تعليمي إلى حاجة تقدر فعلاً تنشرها وتكرر تشغيلها بثقة.
LEARNING EXPERIENCE
طريقة الشرح جوه الكورس
أنت هنا مش بتاخد topics معزولة. أنت بتتعلم سيستم شغل كامل: إزاي تفكر، تكتب، تنفذ، تراجع، وتقيس النتيجة. كل مرحلة لها نفس الإيقاع العملي عشان تثبت في إيدك.
Concept أولًا
بنشرح الفكرة والمشكلة اللي بتحلها المرحلة قبل أي prompt أو tool.
Workflow Thinking
بنفهم منطق القرار: ليه نستخدم الأداة دي هنا؟ وليه نمنع خطوة تانية؟
Live Execution
بنشوف التطبيق الفعلي على artifacts وoutputs بدل تنظير مجرد.
Debug + Review
بنتعامل مع الأخطاء والتخبيط كجزء من الشغل، مش حاجة بنخبيها.
Output Validation
كل مرحلة لها نتيجة واضحة بنراجعها ونقيسها قبل ما نكمل.
Phase Handoff
بنتعلم إزاي نسلم من مرحلة للي بعدها من غير ما السياق يتكسر.
Prompt Categories
بنعرض أنواع الـ prompts اللي تحتاجها، من غير ما نحول الكورس لنسخ ولصق.
Production Mindset
الهدف النهائي مش demo. الهدف workflow تقدر تعتمد عليه في شغل حقيقي.
END RESULT
بعد ما تخلص الـ Roadmap دي، هتقدر تعمل إيه؟
هتكون فاهم إزاي تحوّل أي فكرة لنظام تنفيذ AI واضح، وتبني المنتج خطوة بخطوة لحد ما يطلع Production-ready بدل ما تعتمد على trial and error.
تحويل الفكرة إلى PRD + Specs قابلة للتنفيذ
بناء UI direction وشاشات قبل بداية الكود
تنفيذ Phase by Phase بجودة أعلى واتساق أكبر
مراجعة الكود واستخراج مشاكل حقيقية مبكرًا
كتابة أو توليد E2E tests للمسارات الحرجة
تحسين الأمان والأداء قبل الإطلاق
إعداد SEO والتتبع والتحويل analytics
نشر المشروع بـ Docker و CI/CD بشكل عملي
READY TO JOIN?
لو شايف إن ده الـ workflow اللي محتاجه، ارجع للحجز وخد مكانك.
الصفحة دي معمولة عشان تخليك فاهم بالضبط إنت داخل تتعلم إيه. لو الـ roadmap دي منطقية بالنسبة لك، الخطوة التالية بسيطة: اختار الباقة المناسبة وابدأ.
7 مراحل مترتبة
Outputs حقيقية في كل مرحلة
شرح عملي مش نظري
رد خلال ساعة