متجر ورود

ده مشروع متجر أونلاين لبيع الورد، صممت وبرمجت الواجهة بتاعته (Front-End) بالكامل عشان تكون خفيفة، سريعة، وشكلها مريح للعين. الهدف كان إني أعمل تجربة تسوق كاملة من غير ما أحتاج لسيرفر أو قواعد بيانات في المرحلة دي، واعتمدت على ذكاء الجافاسكريبت (JavaScript) عشان الموقع يشتغل كأنه Real App.

إيه اللي بيميز المشروع ده؟

سلة مشتريات ذكية (Smart Cart): برمجت السلة بحيث تحفظ المنتجات اللي العميل اختارها حتى لو قفل المتصفح أو عمل Refresh، وده عن طريق استخدام الـ localStorage، يعني مفيش "أوردر" بيضيع.

نظام عرض ديناميكي (Dynamic): بدل ما أكتب كود لكل منتج، عملت "Array" فيه كل البيانات، والجافاسكريبت هي اللي بتبني شكل الكروت (Cards) وتعرضها في الصفحة أوتوماتيك. ده بيخلي التعديل أو إضافة منتجات جديدة سهل جداً بعد كده.

صفحة تفاصيل واحدة لكل المنتجات: استخدمت تكنيك احترافي (URL Parameters) عشان أعمل صفحة واحدة بس اسمها product-details. الصفحة دي "بتفهم" العميل داس على أنهي منتج، وبتروح تجيب صورته وسعره وتعرضهم. (يعني لو عندي 1000 منتج، مش محتاج غير صفحة HTML واحدة بس ليهم كلهم!).

تصميم متجاوب (Responsive): الموقع بيظبط مقاساته وشكله لوحده سواء العميل فاتح من موبايل، تابلت، أو لابتوب، عشان أضمن إن الشكل يفضل مظبوط في كل الحالات.

التقنيات اللي استخدمتها:

HTML5 & CSS3: لبناء الهيكل وتنسيق الألوان وتظبيط الـ Grid.

JavaScript (Vanilla): دي "موتور" الموقع اللي مشغلة السلة والربط بين الصفحات.