ShopZone - متجر إلكتروني بـ Angular
نوع العمل
تطبيق ويب للتجارة الإلكترونية (E-Commerce) شامل، تم تطويره بإطار Angular مع نظام متكامل للمنتجات، السلة، الطلبات، وإدارة المستخدمين بصلاحيات مختلفة.
الميزات الأساسية
-نظام المستخدمين
-تسجيل دخول / إنشاء حساب مع التحقق من صحة البيانات
صلاحيات: مستخدم عادي (شراء) و مدير (لوحة تحكم)
حماية المسارات - لا دخول للسلة والطلبات بدون تسجيل
المنتجات:
عرض شبكي متجاوب مع البحث المباشر والتصفية حسب الفئة
تقييم بالنجوم (كامل، نصف، فارغ)
شارات: Top Seller، Almost Sold Out، Out of Stock
السلة والطلبات:
إضافة/تعديل/حذف المنتجات مع حساب تلقائي للمجموع
إنشاء طلب وتحويل السلة لطلب شراء
إلغاء الطلب (للحالات pending/processing فقط)
إشعارات توست (Toast) لكل عملية
-المدير
لوحة تحكم خاصة تظهر للمدير فقط
التقنيات المستخدمة
Angular 21 إطار العمل الرئيسي
TypeScript لغة البرمجة (بدون any)
RxJS العمليات غير المتزامنة
Reactive Forms نماذج التسجيل والدخول
HTTP Interceptor إضافة token للطلبات
Auth Guard حماية المسارات
Bootstrap 5 التصميم والتجاوب
SweetAlert2 رسائل التأكيد
JSON Server محاكاة الـ Backend
طريقة التنفيذ
التخطيط - تحليل المتطلبات وتصميم واجهات المستخدم
إعداد البيئة - إنشاء مشروع Angular + إعداد JSON Server
النماذج والخدمات - إنشاء Interfaces و Services (Auth, Product, Cart, Order)
الواجهات - تنفيذ الصفحات (Login, Register, Products, Cart, Orders, Profile)
الحماية - إضافة Interceptor و Auth Guard
التحسين - إضافة Toast notifications و SweetAlert2