Frontend-Take-Home-Bundle-Builder

مشروع Bundle Magic هو منصة تجارة إلكترونية متكاملة وتفاعلية (Full-Stack E-commerce Bundle Builder) متخصصة في حلول الأمان المنزلي الذكي، تتيح للعملاء تخصيص وبناء نظام أمان كامل خطوة بخطوة مع حساب فوري وذكي للأسعار، أو الاعتماد على مستشار ذكاء اصطناعي تفاعلي.

✨ أبرز مميزات المشروع:

1. منشئ الباقات التفاعلي (Step-by-Step Builder):

• تجربة مستخدم سلسة مقسمة إلى 4 مراحل: الكاميرات الذكية، خطط الحماية الشهرية، الحساسات، والملحقات الإضافية.

• معاينة فورية لخيارات الألوان (Variants: White, Black, Grey) وتحديث الصور والأسعار لحظياً.

• منطق تسعير ذكي (Smart Pricing Logic) يمنح أجهزة Hub مركزية مجاناً تلقائياً فور اختيار أي حساس.

2. مستشار الأمان بالذكاء الاصطناعي (AI Security Architect):

• استبيان تفاعلي من 8 خطوات يحلل مواصفات العقار (نوع السكن، نقاط الدخول، الحيوانات الأليفة، التخزين السحابي/المحلي، والميزانية).

• توليد توصية أمان دقيقة ومفصلة تشمل الأجهزة المناسبة، خطة الاشتراك، وشرحاً تحليلياً لسبب الاختيار مع زر لإضافتها للسلة بنقرة واحدة (Apply to My Bundle).

3. سلة تسوق حية وحساب دقيق للتكاليف:

• فصل تلقائي بين تكلفة شراء الأجهزة لمرة واحدة (Equipment Cost) والاشتراك الشهري (Monthly Recurring Cost).

• تطبيق فوري لخصومات الباقات وحساب الشحن المجاني.

4. حفظ البيانات وسلاسة التنقل (State Hydration & Persistence):

• حفظ بيانات السلة في LocalStorage مع استرجاع متزامن يضمن استمرار عناصر السلة بعد تحديث الصفحة بدون أي وميض فارغ (Zero Flash).

5. إنهاء الطلب وإدارة المخزون (Checkout Flow):

• صفحة مراجعة للطلب وتوليد رقم تتبع فريد (Order ID) مع تفريغ السلة وتأكيد نجاح العملية.

🛠 التقنيات المستخدمة (Tech Stack):

• الواجهة الأمامية (Frontend): React 19, TypeScript, TanStack Router, Vite.

• التصميم والتنسيق: Tailwind CSS, Radix UI Components, Lucide Icons.

• إدارة الحالة: React Context API + useReducer Architecture.

• الواجهة الخلفية (Backend API): Node.js, Express, MongoDB (Mongoose), RESTful Architecture.