تطوير واجهة متجر إلكتروني متجاوبة
تفاصيل المشروع
لدي نموذج أولي (Prototype) لموقع متجر إلكتروني لبيع الملابس باسم Ket3a مكتوب بـ HTML و CSS فقط (صفحة رئيسية واحدة بدون JavaScript وبدون تصميم متجاوب). أحتاج مطوّر Front-End محترف لتحويله إلى واجهة متجر كاملة وجاهزة للإنتاج، مع الحفاظ على الهوية البصرية الحالية (الألوان والخطوط والشعار).
المرفقات: صور للصفحة الحالية + ملفات المشروع.
المطلوب تنفيذه
1) التصميم المتجاوب (Responsive)
- يعمل بشكل سليم على الموبايل (320px)، التابلت (768px)، اللابتوب (1024px)، والشاشات الكبيرة (1440px+).
- قائمة تنقل (Hamburger Menu) على الموبايل.
- شبكة المنتجات تتكيف مع حجم الشاشة (1 / 2 / 3 / 4 أعمدة).
2) المنتجات (ديناميكية)
- استبدال المنتجات المكررة في HTML بملف products.json (الاسم، السعر، الصورة، الفئة، الوصف).
- عرض المنتجات عبر JavaScript.
- بحث بالاسم، وتصفية حسب الفئة، وترتيب حسب السعر.
- صفحة (أو نافذة منبثقة) لتفاصيل المنتج.
3) سلة المشتريات
- إضافة وحذف المنتجات وتعديل الكمية.
- عرض الإجمالي وعدّاد على أيقونة السلة.
- حفظ السلة في localStorage بحيث لا تضيع عند تحديث الصفحة.
4) الصفحات الإضافية
- صفحة تواصل معنا مع نموذج وتحقق من البيانات (Validation) في الواجهة.
- صفحة إتمام الطلب (Checkout) كواجهة فقط مع تحقق من الحقول (بدون بوابة دفع).
5) إصلاح وتحسين الكود الحالي
- إصلاح تكرار الـ id (product1 مكرر)، وأيقونات السلة غير الصحيحة، وتكرار روابط Font Awesome.
- استخدام عناصر HTML الدلالية (Semantic HTML) وإضافة alt لكل الصور.
- تحسين الأداء: ضغط الصور وتحويلها إلى WebP وتفعيل lazy-loading.
- تنظيم الملفات (css / js / data / img) وكتابة كود نظيف ومعلّق.
6) الجودة
- التوافق مع Chrome و Safari و Firefox و Edge، ومتصفحات الموبايل (iOS Safari و Android Chrome).
- نتيجة Lighthouse على الموبايل: 90+ في Performance و Accessibility و Best Practices.
اختياري (ميزة إضافية تُحتسب في التقييم):
- دعم اللغة العربية واتجاه RTL مع زر تبديل اللغة.
التقنيات
HTML5 + CSS3 + JavaScript (ES6+) بدون Frameworks (للحفاظ على بساطة المشروع). يُفضّل Flexbox/Grid ومتغيرات CSS.
خارج نطاق المشروع
Backend، قاعدة بيانات، بوابة دفع حقيقية، لوحة تحكم.
التسليم
- الكود الكامل (GitHub أو ملف مضغوط) + ملف README يشرح طريقة التشغيل وإضافة منتج جديد.
- نشر نسخة تجريبية (GitHub Pages أو Netlify) للمراجعة.
- تعديلات ومعالجة أي أخطاء لمدة 7 أيام بعد التسليم.
عند التقديم أرجو ذكر
1) روابط 2–3 أعمال سابقة (يفضّل متاجر أو مواقع متجاوبة).
2) المدة والسعر المقترحان.
3) ملاحظاتك أو اقتراحاتك على النموذج الحالي.
أولوية القبول للمتقدمين الذين يعرضون أعمالًا سابقة مشابهة.
صاحب المشروع
أحــمـــد س.
| تاريخ التسجيل | |
| معدل التوظيف | |
| المشاريع المفتوحة | 1 |
| مشاريع قيد التنفيذ | 0 |
| التواصلات الجارية | 0 |
العروض المقدمة
Yousef S.
أهلا أستاذ أحمد، أنا يوسف، Full-Stack DevOps Software Engineer متخصص في HTML5، CSS، جافا سكريبت، وتطوير واجهات المتاجر الإلكترونية. لدي عمل سابق مشابه بشكل مباش...
Mohamed M.
السلام عليكم أستاذي الكريم معك محمد مصطفى، مطور Full-Stack. فتحت مشروع Ket3a نفسه، والنسخة الحالية فيها أساس بصري واضح نقدر نحافظ عليه، لكن محتاجة تتحول من صفحة...
Mohamed A.
السلام عليكم أستاذ أحمد، مشروع Ket3a هنا مش مجرد تحسين شكل الصفحة الحالية، لكن تحويل الـ Prototype الموجود من صفحة HTML ثابتة إلى واجهة متجر إلكتروني متكاملة وت...
محمد ايمن ر.
السلام عليكم ورحمة الله وبركاته أستاذ أحمد، قرأت تفاصيل المشروع. تحويل صفحة HTML/CSS ثابتة إلى واجهة متجر كاملة بـ JavaScript خام، مع الحفاظ على هوية Ket3a البص...
Mohamed M.
السلام عليكم أ. احمد، أنا محمد مصطفى، مطور Full-Stack بخبرة أكثر من سنتين، والمشروع هنا يحتاج إلى مطور يفهم الفرق بين مجرد جعل الصفحة تعمل وبين تحويل نموذج HTML...
Omar K.
السلام عليكم أخي الكريم، هدفي في هذا المشروع كسب ثقتك قبل أي مقابل مادي، ولهذا سأعمل على مراحل مدفوعة بعد استلامك لكل مرحلة وموافقتك عليها. أنا مطور Full-Stack ...
Mohamed Y.
السلام عليكم، المطلوب هو تحويل نموذج Ket3a الحالي من صفحة HTML وCSS ثابتة إلى متجر إلكتروني متكامل من جهة الواجهة الأمامية، مع الحفاظ على الهوية البصرية الحالية...
محمود ي.
السلام عليكم أستاذ أحمد، أنا محمود، مطور Full Stack، وعندي خبرة في بناء متاجر إلكترونية بـ HTML وCSS وJavaScript وReact. بنيت 3 متاجر (لابتوبات، ملابس، أحذية) ف...
Ahmed J.
بما أن عندك Prototype جاهز، لن أبدأ من الصفر أو أغير هوية Ket3a سأحوله إلى متجر تفاعلي متكامل من ناحية الواجهة، مع الحفاظ على التصميم الحالي وتطويره ليعمل على ج...
سامر ي.
السلام عليكم، أنا سامر، Full Stack Developer، وعندي خبرة في تطوير واجهات المواقع باستخدام HTML وCSS وJavaScript، بالإضافة إلى React وNext.js. اطلعت على تفاصيل ا...
خالد ع.
السلام عليكم ورحمة الله وبركاته، انا مطور واجهات امامية (Front-End) ومصمم مواقع بخبرة تزيد عن 10 سنوات، وتحويل نموذج HTML/CSS ثابت الى واجهة متجر كاملة وجاهزة ل...
Ahmad A.
السلام عليكم أستاذ قمت بتنفيذ بفضل الله أكثر من 140 مشروع عبر منصة مستقل بتقييم 5 نجوم، ومئات المشاريع الأخرى خارجها بحمد الله. مع حضرتك أحمد أبو الخير، مهندس ب...
Abdelrahman S.
السلام عليكم، اطلعت على تفاصيل مشروع Ket3a، وأقدر أحول النموذج الحالي إلى واجهة متجر إلكتروني متكاملة ومتجاوبة، مع الحفاظ على الهوية البصرية الحالية من ألوان وخ...
Abdullah M.
مرحبا بك انا frontend developer خبير في انشاء المواقع الاحترافيه تواصل معي وستحصل علي موقع احترافي بجوده هاليه مع دعم مجاني لمده اسبوع واضافه اي ميزه او تعديل ا...
Ayhem B.
السلام عليكم، أنا أيهم، مطور ويب متخصص في المتاجر الإلكترونية، وأستطيع تحويل نموذج Ket3a إلى واجهة متجر كاملة وجاهزة للإنتاج، مع الحفاظ على هويته البصرية (الألو...
اندرو ا.
مرحبا، قرأت تفاصيل مشروع تحويل النموذج الأولي (Prototype) لموقع متجر الملابس Ket3a من HTML/CSS ثابت إلى واجهة متجر كاملة جاهزة للإنتاج. واضح إن الأولوية الحفاظ ...
محمد م.
أهلا بحضرتك، أنا شايف إن أحسن حاجة في مشروع Ket3a إننا مش محتاجين نبدأ من الصفر، عندنا Prototype نقدر نبني عليه ونطوره لحد ما يبقى متجر متكامل، من غير ما نفقد ش...
Hassan H.
السلام عليكم أستاذ أحمد، قرأت مشروعك بدقة: تحويل نموذج متجر الملابس إلى واجهة متجر متجاوبة كاملة بـ HTML وCSS وJavaScript بدون مكتبات، وتشمل: - تصميم متجاوب على...
Abdullah A.
مرحبا أستاذ أحمد، لاحظت في متطلبات Ket3a أنك لا تبحث عن مجرد تحسين تصميم الصفحة، بل تريد تحويل نموذج أولي إلى متجر إلكتروني تفاعلي يمكن الاعتماد عليه وتطويره مس...
Hazem H.
السلام عليكم ورحمة الله وبركاته، الفرق بين صفحة بتعرض ملابس ومتجر العميل يقدر يتسوق منه فعليا مش مجرد تصميم متجاوب، وده تحديدا اللي محتاجه Ket3a في مرحلته الحال...
Omar M.
مرحبا أستاذ أحمد، يمكنني تطوير نموذج متجر Ket3a وتحويله إلى واجهة متجر إلكتروني متجاوبة ومنظمة، مع الحفاظ على الهوية البصرية الحالية، والالتزام باستخدام HTML وC...
Mahmoud A.
السلام عليكم أستاذ أحمد، اطلعت على ملفات Ket3a، وهذه ملاحظاتي على النموذج الحالي قبل التنفيذ: - حجم المشروع 23 ميجا، والصفحة لا تستخدم إلا جزءا صغيرا منه. يوجد ...
سراج ا.
السلام عليكم استاذ احمد , انا جاهز للعمل معك يمكنني تطوير ما هو مطلوب وباحسن شكل ممكن , يمكنك التعاون معي لانتاج موقع ويب احترافي ايضا سأضيف اضافات رائعة , يمكن...
عبدالرحمن م.
السلام عليكم أستاذ أحمد، فتحت ملفات Ket3a، وسبب أيقونات السلة الغلط واضح: الكلاس fal fa-bag-shopping-cart فيه مشكلتين، fal ستايل مدفوع من Font Awesome Pro، واسم...
Tarek S.
هل تريدون تحويل نموذج Ket3a الحالي إلى متجر إلكتروني متكامل ومتجاوب مع الحفاظ على هويته البصرية سبق لي تنفيذ متاجر إلكترونية مشابهة، من بينها Griffa Lingerie La...
Mahmoud M.
اهلا ي احمد اطلعت على تفاصيل مشروع Ket3a، وعجبني إن الهدف مش مجرد تحويل التصميم إلى صفحات، لكن بناء تجربة تسوق متكاملة وسهلة الاستخدام، مع الحفاظ على الهوية الب...
Mohab M.
مرحبا أحمد، بعد فحص واستعراض أكواد المشروع الحالية (index.html و style.css)، رصدت بعض الملاحظات الهامة التي تعيق جاهزية المشروع للإنتاج وتؤثر على الأداء ونظافة ...
Elsayed M.
السلام عليكم أستاذ أحمد، اطلعت على تفاصيل مشروع متجر Ket3a، وفهمت أن المطلوب هو تطوير النموذج الحالي إلى واجهة متجر متجاوبة وتفاعلية، مع الحفاظ على الهوية البصر...
ايوب أ.
السلام عليكم اطلعت على تفاصيل مشروع متجر Ket3a، ويمكنني تحويل الـ Prototype الحالي إلى متجر إلكتروني متكامل من جهة الواجهة الأمامية، مع الحفاظ على الهوية البصري...
Malak S.
السلام عليكم، انا ملك front-end developer قرأت تفاصيل مشروع Ket3a، ومتحمسة لتنفيذه. فهمت إن المطلوب تحويل النموذج الأولي لمتجر كامل وجاهز للإنتاج، مع الحفاظ على...
Ahmed F.
السلام عليكم، اطلعت على تفاصيل مشروع Ket3a، ويمكنني تطوير النموذج الحالي إلى متجر إلكتروني متكامل ومتجاوب باستخدام HTML وCSS وJavaScript، مع الحفاظ على الهوية ا...
Atef M.
السلام عليكم ورحمة الله وبركاته، قرأت تفاصيل مشروع متجر Ket3a بعناية. أستطيع تحويل النموذج الأولي الخاص بك إلى واجهة تفاعلية احترافية، متجاوبة بالكامل، وجاهزة ل...
يوسف ي.
أهلا بحضرتك، أقدر أشتغل على متجر Ket3a وأطور الصفحة الحالية لمتجر كامل من ناحية الـ Front-End، مع الحفاظ على نفس الألوان والخطوط والشعار، وتعديل الحاجات اللي مح...
عمر ا.
السلام عليكم أستاذ أحمد، فهمت المطلوب: تحويل نموذج Ket3a من صفحة HTML/CSS ثابتة إلى واجهة متجر كاملة بـ JavaScript خام (بدون Frameworks)، مع الحفاظ على الألوان ...
Ahmed S.
تريد موقع قطعه ريسبونسف بالكامل تعرف الاهم ف المتجر الالكتروني من الرسبونسف هي ازرار call to action بمعنى الاهم من انه نعمله ريسبونسف بالكامل ان نخلي تجربه المس...
ملك ح.
السلام عليكم أستاذ أحمد، فتحت ملفات Ket3a وفحصتها، وهذه أهم الملاحظات قبل التنفيذ: لا توجد أي Media Queries في الـCSS، فالصفحة غير متجاوبة تماما حاليا. الـid pr...
Mahmoud A.
السلام عليكم انا محمود مطور برمجيات وصفحات ويب لو اطلعت على اخر مشروع عندي هتلاقيه بيتوافق مع طلبك صفحه رئيسيه ذات تصميم متفاعل وجميل ومريح للعين الصفحه يمكن ال...
Farouk Y.
السلام عليكم أستاذ أحمد، اطلعت على تفاصيل مشروع متجر Ket3a، وفهمت أن المطلوب هو تطوير النموذج الحالي باستخدام HTML وCSS وJavaScript، مع الحفاظ على الهوية البصري...
Kareem E.
أهلا أستاذ أحمد، فهمت إن المطلوب تحويل نموذج Ket3a من صفحة HTML وCSS ثابتة إلى واجهة متجر ملابس متجاوبة وتفاعلية، مع الحفاظ على الهوية الحالية، من غير إضافة Bac...
Mazen O.
مرحبا، فهمت أنك تريد تحويل نموذج Ket3a الحالي إلى متجر إلكتروني متكامل ومتجاوب، مع الحفاظ الكامل على هويته البصرية، وتحويل المنتجات إلى بيانات ديناميكية تعرض من...
Omar A.
مرحبا، اطلعت على تفاصيل مشروع متجر Ket3a، ويمكنني تحويل النموذج الحالي إلى متجر إلكتروني متكامل من جهة الـ Front-End، مع الحفاظ على الهوية البصرية الحالية وتحسي...
Abdelrahman A.
السلام عليكم، اطلعت على تفاصيل مشروع متجر Ket3a، ويمكنني العمل على تطوير الواجهة الحالية باستخدام HTML وCSS وJavaScript، مع الحفاظ على الهوية البصرية الموجودة و...
عز الدين ن.
أستاذ أحمد في نقطة مهمة في طلبك، عرض المنتجات من ملف json بالجافاسكريبت مع شرط Lighthouse 90 على الموبايل محتاج يتعمل بطريقة معينة، لان الطريقة اللي اغلب الناس ...
Mohammed N.
السلام عليكم، قرأت تفاصيل المشروع وراجعت النموذج المرفق. التصميم الحالي نظيف وهويته البصرية واضحة (الأخضر المتوازن مع الخلفية الهادئة والشعار المميز)، وسأحافظ ع...
الديابي ح.
مرحبا، اطلعت على تفاصيل مشروع Ket3a، وأرى أن المطلوب ليس مجرد جعل الصفحة الحالية متجاوبة، بل تحويل النموذج الأولي إلى واجهة متجر إلكتروني تفاعلية ومنظمة، مع الح...
محمد ع.
السلام عليكم ورحمة الله وبركاته بشمهندس احمد اتمني تكون بخير , حبيت ابلغك اني , اطلعت على تفاصيل المشروع بعناية، وفهمت أن المطلوب ليس مجرد تحويل تصميم HTML إلى ...
وسيم ع.
السلام عليكم، معك وسيم عبد الهادي، مهندس برمجيات ومطور Front-End / Full Stack بخبرة تزيد عن 3 سنوات في تطوير مواقع الويب الحديثة. لدي خبرة عملية في تطوير المتاج...
Haithem B.
أهلا بك أستاذ أحمد، اطلعت على تفاصيل مشروع متجر Ket3a ومتطلبات تحويل النموذج الأولي إلى واجهة متجر متكاملة، ونطاق العمل واضح ومحدد بشكل ممتاز من ناحيتك. بصفتي م...
Mina D.
مرحبا أ.احمد اطلعت على تفاصيل مشروع متجر Ket3a، وأستطيع العمل على تطوير النموذج الحالي باستخدام HTML5 وCSS3 وJavaScript ES6، مع الحفاظ على الهوية البصرية الموجو...
Mosab N.
سيسعدني العمل معك على تحويل النموذج الأولي الحالي إلى متجر إلكتروني متكامل، سريع، متجاوب، واحترافي، مع الحفاظ على الهوية البصرية الحالية للموقع. رغم أن هذا سيكو...