E-commerce Web Application using Angular 20
تفاصيل العمل

تطبيق ويب احترافي للتجارة الإلكترونية (E-commerce) مطور باستخدام Angular 20، يحتوي على جميع الميزات الأساسية والمتقدمة التي تدعم تجربة مستخدم متكاملة وتساعد على التدريب القوي على Angular Forms, Routing, وHTTP Handling. 🎯 الميزات بالتفصيل: ✅ 1. نظام المصادقة (Authentication System): Login Page: تم تنفيذه باستخدام Template-driven Forms للتحقق من المدخلات (Validation) وإرسال البيانات. Signup Page: تم تطويره باستخدام Reactive Forms مع Validators قوية ومهيكلة. ✅ 2. Navbar احترافي للتنقل (Navigation Bar): يربط جميع صفحات التطبيق: Home Products Product Details Cart Login & Signup ✅ 3. صفحة Home: عرض ترويجي مبسط أو تعريف بالمتجر وإظهار روابط الوصول السريع للمنتجات والفئات. ✅ 4. صفحة المنتجات (Products Page): جلب المنتجات من API وعرضها باستخدام Angular *ngFor. دعم ميزة البحث (Search) للبحث عن المنتجات بالاسم. تصفية المنتجات حسب الفئة (Category Filter). Pagination: تقسيم المنتجات على صفحات متعددة لسهولة التصفح. ✅ 5. صفحة تفاصيل المنتج (Product Details Page): عرض معلومات المنتج بشكل كامل عند الضغط عليه. ✅ 6. إدارة المنتجات (Product CRUD): إضافة منتج جديد (Add Product) تعديل منتج (Edit Product) حذف منتج (Delete Product) تم التعامل مع هذه الميزات باستخدام Angular Forms + HTTP Client للتكامل مع Fake API أو Backend جاهز. ✅ 7. ميزة عربة التسوق (Add to Cart & Cart Page): إمكانية إضافة المنتجات إلى عربة التسوق. إدارة الكمية والحذف من العربة. تخزين بيانات العربة مؤقتًا باستخدام Service أو LocalStorage. ✅ 8. تصميم احترافي Responsive: باستخدام Bootstrap / Angular Material لدعم جميع الشاشات (موبايل – تابلت – ديسكتوب). ✅ 9. تقنيات متقدمة مدعومة: Angular 20 (Latest CLI Features) Routing with Guards لحماية بعض الصفحات Services & Dependency Injection Reactive & Template Forms Observables & HttpClient Module Two-way data binding ngIf, ngFor, Pipes Custom Pipes for filtering and formatting 🛠️ الأدوات والتقنيات المستخدمة: Angular 20 Typescript Reactive Forms & Template Forms Bootstrap / Angular Material Fake REST API (json-server)

شارك
بطاقة العمل
تاريخ النشر
منذ 20 ساعة
المشاهدات
4
المستقل
طلب عمل مماثل
شارك
مركز المساعدة