build a full Angular E-commerce website and application

# ? وصف مشروع GlamZone

---

## ? فكرة المشروع

**GlamZone** هو متجر إلكتروني متخصص في **مستحضرات التجميل الفاخرة**، مبني بـ **Angular** بأحدث تقنياته. المشروع بيحاكي تجربة تسوق حقيقية كاملة من تصفح المنتجات لحد إتمام الطلب.

---

## ?️ التقنيات المستخدمة

| التقنية | الاستخدام |

|--------|-----------|

| **Angular 17+** | الـ Framework الأساسي |

| **Standalone Components** | بدون NgModules نهائياً |

| **Reactive Forms** | Login & Register |

| **HttpClient** | التواصل مع الـ API |

| **RxJS** | إدارة الـ async data |

| **JSON Server** | محاكاة Backend حقيقي |

| **BehaviorSubject** | Cart count في real-time |

| **Guards & Interceptors** | حماية الصفحات والـ requests |

---

## ? هيكل المشروع

```

shopzone/

├── core/

│ ├── models/ ← User, Product, CartItem, Order

│ ├── services/ ← Auth, Product, Cart, Order

│ ├── guards/ ← Auth Guard

│ └── interceptors/ ← HTTP Interceptor

├── features/

│ ├── auth/ ← Login & Register

│ ├── products/ ← List & Details

│ ├── cart/ ← عربة التسوق

│ ├── orders/ ← الطلبات

│ ├── profile/ ← الملف الشخصي

│ └── not-found/ ← صفحة 404

└── shared/

└── navbar/ ← شريط التنقل

```

---

## ? نظام المصادقة

- **Login** بـ Reactive Form مع validation كامل

- **Register** مع Custom Validator للتأكد من تطابق الباسورد

- **HTTP Interceptor** هو المسؤول عن حفظ `userId` و `currentUser` في localStorage — مش الـ Service

- **Auth Guard** بيحمي الصفحات الخاصة ويعمل redirect لـ `/login` مع `returnUrl`

- **Logout** بيمسح الـ localStorage بالكامل

---

## ?️ المنتجات

المشروع فيه **12 منتج تجميل فاخر** من أشهر الماركات العالمية:

> Charlotte Tilbury • NARS • Urban Decay • MAC • Benefit • Dior • Too Faced • Fenty Beauty • Anastasia Beverly Hills • Huda Beauty • Laneige • NYX

### صفحة القائمة:

- ✅ Grid Layout متجاوب

- ✅ **Search** بالاسم أو الماركة

- ✅ **Filter** بالـ Category

- ✅ الفلترين بيشتغلوا مع بعض

### صفحة التفاصيل:

- ✅ صورة + وصف كامل + سعر

- ✅ Quantity Selector مع حد أدنى وأقصى

- ✅ زرار "Add to Cart"

---

## ? عربة التسوق

- بتجيب المنتجات بالـ `userId` من الـ API

- تعديل الكمية بـ `PATCH` request

- حذف منتج من العربة

- حساب الإجمالي تلقائياً

- **Cart Badge** في الـ Navbar بيتحدث live بـ `BehaviorSubject`

---

## ? الطلبات

- بتعرض كل طلبات المستخدم

- كل طلب فيه: رقم الطلب، التاريخ، المنتجات، الإجمالي

- **Status Badges** ملونة:

- ? Pending

- ? Processing

- ? Delivered

- ? Cancelled

---

## ? الملف الشخصي

- بيقرأ بيانات المستخدم من **localStorage** مباشرة

- بيعرض الاسم، الإيميل، الـ User ID

- فيه زرار Logout

---

## ? التصميم

المشروع اتصمم بـ **Dark Luxury Theme** مستوحى من عالم التجميل الفاخر:

| العنصر | التفصيل |

|--------|---------|

| **الخلفية** | `#0d0618` — بنفسجي غامق جداً |

| **اللون الذهبي** | `#d4af37` — للعناوين والتمييز |

| **الـ Accent** | `#e91e8c` — وردي للأزرار |

| **الخطوط** | Playfair Display + DM Sans |

| **التأثيرات** | Glassmorphism + Floating Orbs + Animations |

---

## ?️ بيانات الـ JSON Server

```

http://localhost:3000/

├── /users ← بيانات المستخدمين

├── /products ← 12 منتج تجميل

├── /cart ← عناصر العربة

└── /orders ← الطلبات المكتملة

```

---

## ? الصفحات المحمية

| الصفحة | محمية؟ |

|--------|--------|

| `/products` | ❌ مفتوحة للكل |

| `/products/:id` | ❌ مفتوحة للكل |

| `/login` | ❌ مفتوحة |

| `/register` | ❌ مفتوحة |

| `/cart` | ✅ لازم تكون logged in |

| `/orders` | ✅ لازم تكون logged in |

| `/profile` | ✅ لازم تكون logged in |

---

## ▶️ تشغيل المشروع

```bash

# Terminal 1 — JSON Server

json-server --watch db.json --port 3000

# Terminal 2 — Angular

ng serve --open

```