أحدث ما نشرناه

  • ٍمربع البحث | Search Box

    يتم توضيح طريقة التصفية والبحث والترتيب المتبعة وأيضاً كيفية إضافة مربع البحث للموقع وجعله يعمل بشكل حقيقي.

  • الترتيب حسب التاريخ

    يتم إضافة خاصية ترتيب الوصفات بشكل تصاعدي أو تنازلي حسب تاريخ التحديث، وذلك باستخدام qs و خاصية strapi لــِ filtering and searching.

  • Pagination Functionality

    في هذا الدرس: سيتم إضافة Pagination Functionality، وسيتم طلب الصفحات من Backend وعرضها في واجهة Next JS.

  • مفهوم Pagination

    في هذا الدرس سنستعرض سوية مفهوم Pagination أو تجزئة القيود ضمن صفحات. كما سيتم إنشاء Pagination Component.

  • Display Thumbnails

    سنقوم بعرض الصورة المصغرة أو البارزة لكل وصفة في الصفحة الرئيسية وصفحة الوصفة الأحادية.

  • رفع الصورة للسيرفر

    سنرفع الصورة لسيرفر Strapi من NextJS ونعرض رسائل الخطأ و النجاح الخاصة بعملية الرفع.

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

    في هذا الدرس، سنضيف خاصية التصفية حسب الوجبة وحسب المدة الكلية لتحضير الوصفة.

  • بناء مشروع متكامل(Recipes Project) – الجزء الثاني

    في هذا الجزء من مشروع Recipes سنقوم ببناء الواجهة الأمامية (FrontEnd). يشمل ذلك استخدام CSS Styles والقيام بـــِ Form Validation.

  • Recipe Card Styling

    سنقوم بالتعديل على Recipe Container & Recipe Card في الصفحة الرئيسية، وسنضيف بعض من Styling لها.

  • التعامل مع الكلمات والترجمات

    نتحدث عن كيفية التعامل مع strings في أي مشروع، وما هي سلبيات وإيجابيات الطرق المختلفة. كما إننا سنقوم بفصل هذه strings في ملف خاص.

  • Fonts & formatDate & Single Recipe Page

    سنقوم باستخدام خطوط الغوغل في مشروعنا، وأيضاً سيتم إضافة أدوات مساعدة للمشروع. كما سيتم تعديل صفحة الوصفة الأحادية لتظهر بشكل أفضل.

  • Style Recipe Form

    في هذه الخطوة سننهي الشكل العام لمشروع Recipe بإضافة ستايلات لــِ Recipe Form.

  • مقدمة حول Validation and Sanitization

    ما هو Validation؟ وما هي أهميته في الموقع الإلكتروني؟ ما هو Sanitization؟ وكيف يتم تطبيقه؟

  • Register User

    إنشاء صفحة التسجيل في الموقع مع النموذج الخاص بها. أيضاً سيتم بناء نقطة Register وإرسال طلب لــِ backend لتسجيل المستخدم وعرض أخطاء التسجيل و تسجيل الدخول على الواجهة الأمامية.

  • Edit Recipe Form & Header

    في هذا الدرس، سنقوم بتعديل نموذج الوصفة والهيدر. سنضيف بعض من CSS Classes له، وأيضاً سنضيف Arabic Strings له.