برمجة وتصميم موقع للبحث ولتصفح كاتالوج منتجات مع مشاهدة أسعار الموردين

https://www.etsy.com

قوالب الصفحات و ال Routing:

يجب إنشاء جميع الصفحات أدناه بواسطة Layout مستقل خاص بها:

1. الصفحة الرئيسية.

2. صفحة تفاصيل المنتج من خلال ال slug و ال ID. لللغتين.

3. صفحة نتائج البحث أو التصفح مع أو بدون query parameters.

4. صفحات الخصوصية + الشروط SSG.

5. يتم تطبيق ال Navigation bar وال Footer لكافة الصفحات أعلاه.

تفاصيل الصفحات:

الصفحة الرئيسية:

تعمل بالنمطين: SSR + CSR

1. العنوان مع صورة توضيحية.

2. البحث عن المنتجات مع المقترحات باستخدام Elastic API. *****راجع قسم التكامل للتفاصيل.

3. إدراج بطاقات المنتجات مع scroll أفقي.

4. إدراج بطاقات العلامات التجارية مع scroll أفقي.

5. إدراج بطاقات التصنيفات مع scroll أفقي.

صفحة تفاصيل المنتج:

تعمل بالنمطين: SSR + CSR

1. صورة المنتج (عرض صورة واحدة بدون أي وظيفة).

2. اسم المنتج.

3. موديل المنتج.

4. اسم التصنيف (مع إعادة التوجيه إلى نتائج البحث عند النقر).

5. اسم العلامة التجارية (مع إعادة التوجيه إلى نتائج البحث عند النقر).

6. زر مشاركة الصفحة.

7. قسم خيارات المنتج (عند النقر عليه سيتم استدعاء API).

8. قسم الموردين مع الأسعار وروابط الشراء CSR.

9. ثلاثة أنماط (بلوكات) لجوجل ادسنس.

ملاحظات:

سيتم الحصول على قسم خيارات المنتج و الموردين من استدعاء API endpoint

يجب عمل hashing لل URL عند تغيير المتغيرات و عند قيام المستخدم بمشاركة صفحة المنتج.

صفحة نتائج البحث:

تعمل بالنمطين: CSR + SSR

1. حقل نصي للبحث.

2. قسم للفلاتر الديناميكية و الثابتة.

3. قسم بطاقات المنتجات (نتائج البحث).

4. ال pagination أو load more لإظهار النتائج من الصفحات التالية.

الوظائف المتعلقة بالمستخدم:

1. رؤية مسارات التنقل ال breadcrumbs أعلى الصفحة.

2. البحث عن المنتجات باستخدام الفلاتر وتحميل المزيد من النتائج عند الضغط على زر المزيد pagination.

3. مشاركة صفحة تفاصيل المنتج عبر أي منصة تواصل اجتماعي مع رسالة مخصصة مسبقاً.

4. إمكانية حفظ موقع الويب كتطبيق يشبه تطبيقات الهواتف الذكية.

5. أيقونات الموقع مجهزة و متوافقة مع كل المتصفحات المختلفة.

6. موقع ويب Responsive يناسب جميع الشاشات.

الوظائف المتعلقة بإدارة الموقع:

1. صفحات صديقة لمحركات البحث (SEO).

2. البيانات التعريفية JSON-LD + OG على الصفحات المتعلقة بتفاصيل المنتج.

3. إنشاء ملف خاص لتغيير جميع الألوان المستخدمة في الموقع بسهولة.

التكامل:

1. Google AdSense يجب تعريفه على شكل Component مخصصة لكل نمط (٣ أنماط كحد أقصى).

2. InstantSearch Components (على غرار البحث الفوري في Algolia). يتوفر SDK للتعامل مها و يتوفر API أيضاً.

طبيعة العمل:

git لدفع تحديثات المشروع. لكل متطلب PR منفصل.

تم إعداد بيئة التطوير مسبقاً حتى نتمكن أنا وأنت من رؤية وتقييم عمليات التسليم على خادم مباشر.

Trello لإدارة المشاريع.

منصة مستقل للتواصل.

نمط الكود:

1. يجب تنفيذ كافة واجهات المستخدم ك Components مخصصة و متوافقة مع الوضع اليلي.

2. يجب أن يكون الموقع ثنائي اللغة عربي / انجليزي.

4. يجب إضافة أي اعدادات عامة إلى .env.

5. يجب إنشاء أي hooks مخصصة قابلة لإعادة الاستدعاء.

6. يجب استدعاء كافة ال Requests الخاصة ب ال (API) من مصدر واحد.

7. يجب تعريف جميع البيانات بشكل Types or Interfaces لا يُسمح بأي نوع "any" في الكود.

8. أي باكجات خارجية Packages NPM غير معروفة أو غير مشهورة لن يتم إعتمادها بالمشروع. كلما كانت أقل كان أفضل.