في هذا المشروع قمت بتنفيذ موقع إلكتروني متكامل بدايةً من تصميم الواجهة على Figma مرورًا بمرحلة التطوير باستخدام HTML وCSS وJavaScript، بالإضافة لاستخدام لغة C++ في بعض المهام الخلفية الخاصة بمعالجة البيانات.
الهدف من المشروع كان تقديم تجربة مستخدم سلسة، احترافية، وسهلة الاستخدام، مع مراعاة الأداء والـUser Flow من بداية دخول المستخدم وحتى إتمام عملية الشراء.
مرحلة التصميم – Figma
بدأت بتنفيذ التصميم الكامل على Figma مع التركيز على:
بناء واجهة عصرية واضحة وسهلة الاستخدام
تصميم صفحة الهوم + المنيو + صفحة اليوزر + صفحة الـCheckout
استخدام Layout Grid لتنسيق العناصر وتحقيق توازن بصري
اختيار ألوان متناسقة مع هوية الموقع وتحسين قابلية القراءة
تصميم تجربة مستخدم UX تضمن تقليل عدد الخطوات للوصول للهدف (طلب المنتج)
كما تم تصميم العناصر البصرية مثل الأيقونات، الـButtons، والـNavigation بشكل يبرز هوية الموقع ويحافظ على التجربة البصرية.
مرحلة التطوير – HTML, CSS, JavaScript
بعد الانتهاء من التصميم، قمت بتحويله لواجهة برمجية كاملة باستخدام:
HTML5 لبناء الهيكل العام للصفحات
CSS3 لتنسيق التصميم، إضافة حركات بسيطة، وتحقيق Responsive Design ليتوافق الموقع مع جميع الشاشات
JavaScript لإضافة التفاعلات والوظائف الأساسية مثل:
إدارة السلة Cart System
عرض المنتجات والتبديل بينها
إضافة وحذف وتحديث الطلبات
التحقق من البيانات قبل إتمام الشراء
استخدام C++ في المعالجة الخلفية
اعتمدت على C++ في جزئية Back-End خاصة بمعالجة بيانات الطلبات بشكل سريع وفعال، مثل:
تنظيم البيانات وتخزينها بشكل مؤقت
معالجة استجابات المستخدم
ترتيب الطلبات وتنظيم الفواتير
استخدام C++ ساعد في توفير أداء أسرع وموثوقية أعلى في معالجة العمليات مقارنة باللغات التقليدية الشائعة في الويب.
أهم الـ Features في المشروع
تصميم UI/UX كامل من الصفر
نظام تسجيل دخول للمستخدم
صفحة منيو تفاعلية مع تصنيف المنتجات
Cart System متكامل
Checkout Page مع مراجعة الطلب وإدخال البيانات
Responsive Design
Performance Optimization
