Bundle Builder – E-commerce Product Configuration
تفاصيل العمل
تطبيق ويب تفاعلي يحاكي تجربة بناء وتخصيص المنتجات في متاجر التجارة الإلكترونية، تم تطويره باستخدام **React.js وTypeScript** مع التركيز على تجربة المستخدم، إعادة استخدام المكونات، وتنظيم البيانات بطريقة قابلة للتوسع.
يتيح التطبيق للمستخدم اختيار المنتجات والـ Variants وتحديد الكميات من خلال خطوات متتابعة، مع عرض ملخص الطلب والأسعار بشكل فوري أثناء عملية التخصيص.
### أبرز المميزات
* واجهة تفاعلية متعددة الخطوات باستخدام Accordion Workflow.
* إدارة المنتجات والـ Variants بطريقة مرنة تعتمد على Data-Driven JSON Architecture.
* تحديث الكميات بشكل متزامن بين مختلف أجزاء الواجهة.
* حساب الأسعار والإجمالي بشكل فوري أثناء تغيير المنتجات والكميات.
* عرض Live Order Summary لمتابعة تفاصيل الطلب أثناء التخصيص.
* حفظ اختيارات المستخدم باستخدام LocalStorage.
* تصميم Responsive متوافق مع أجهزة الكمبيوتر والهواتف.
* بناء Components قابلة لإعادة الاستخدام والتوسع.
* تنظيم الـ UI والـ Business Logic بطريقة تسهّل تطوير المشروع وإضافة Features جديدة.
### التقنيات المستخدمة
* React 19
* TypeScript
* Vite
* Tailwind CSS
* LocalStorage
* JSON-based Data Architecture
* Responsive Web Design
قمت بتطوير المشروع مع التركيز على جودة الـ Frontend Architecture، قابلية إعادة استخدام المكونات، إدارة الحالة داخل الواجهة، وتقديم تجربة تفاعلية تحاكي سيناريوهات التجارة الإلكترونية الحديثة.
**Source Code**