Angular - تطبيق متكامل للتجارة الإلكترونية

نظرة عامة

تطبيق ويب متكامل مبني باستخدام Angular 20 مع ميزات حديثة مثل Standalone Components و Dependency Injection. يغطي المشروع جميع مفاهيم Angular الأساسية والمتقدمة من الأيام 2-6 في برنامج تدريبي شامل.

الميزات الرئيسية

1. إدارة المنتجات

عرض قائمة المنتجات مع تصفية حسب الاسم والفئة

بطاقات منتجات تفاعلية مع تأثيرات hover

نظام شراء يقلل الكمية تلقائياً

عرض تفاصيل المنتج الفردي

حالات المخزون (متوفر/نفذت الكمية/آخر قطعتين)

2. نظام المصادقة والأمان

تسجيل دخول/تسجيل حساب جديد

Reactive Forms مع التحقق من الصحة

Guards لحماية الصفحات (لا يمكن الوصول للمنتجات بدون تسجيل دخول)

تخزين التوكن في localStorage

Toast notifications للتنبيهات

3. البحث المتقدم

بحث محلي في المنتجات

بحث عبر API خارجي (DummyJSON)

نتائج فورية مع تحميل

4. المكونات المخصصة (Custom Directives & Pipes)

Card Directive: إضافة ظلال وحواف منحنية للبطاقات

Hover Directive: تأثير تكبير عند مرور الماوس

Card Pipe: تنسيق أرقام البطاقات الائتمانية مع إخفاء الأرقام

5. التصميم والواجهة

تصميم متجاوب باستخدام Bootstrap 5

تنقل سلس بين الصفحات (Routing)

Header و Footer ثابتين

صفحات: الرئيسية, من نحن, تواصل معنا, المنتجات, تفاصيل المنتج, تسجيل الدخول, إنشاء حساب, صفحة 404