FreshCart هو تطبيق ويب للتجارة الإلكترونية تم تطويره باستخدام Angular، يتيح للمستخدمين تصفح المنتجات، إضافتها إلى عربة التسوق، والشراء بسهولة. تم تصميم المشروع مع التركيز على Clean Architecture، Responsive Design، والأداء العالي.
يشمل التطبيق ميزات مثل Authentication، تصنيفات المنتجات، Carousels، قائمة المفضلة، الدفع الإلكتروني، والمزيد.
المميزات (Features):
- User Authentication: تسجيل الدخول، إنشاء حساب، وإدارة الجلسة باستخدام JWT Tokens.
- Product Browsing: تصفح المنتجات حسب التصنيف، إضافة المنتجات إلى Cart، وإدارة Wishlist.
Carousels:
- Home Carousel: يعرض صور ثابتة.
- Categories Carousel: يعرض صورًا يتم جلبها من الـ API باستخدام ngx-owl-carousel.
Cart Management:
- إضافة/إزالة المنتجات من العربة.
- عرض الإجمالي الكلي للعربة.
- التكامل مع Cart Service المتصلة بالـ API.
- Wishlist Management: إضافة أو إزالة المنتجات من قائمة المفضلة بسهولة.
- Address Management: إضافة، تعديل، وحذف العناوين.
Guards:
- منع الوصول لصفحات Signup و Signin إذا كان المستخدم مسجل دخول.
- حماية الصفحات التي تحتاج تسجيل دخول.
Payment Gateway: تكامل سلس مع بوابة دفع لإتمام عمليات الشراء بأمان.
Responsive Design:
- متوافق تمامًا مع جميع أحجام الشاشات.
- تأثيرات Hover على المنتجات باستخدام SCSS.
- تخصيص شكل شريط التمرير (Custom Scrollbar).
- Toaster Notifications: إشعارات فورية باستخدام ngx-toaster عند تنفيذ العمليات مثل إضافة منتج للعربة.
- Form Validation: تطبيق تنسيقات valid/invalid على الحقول في Login و Signup.
- Scroll to Top Button: زر للعودة إلى الأعلى في التصميم الرئيسي.
Routing: التنقل بين الصفحات باستخدام Angular Routing.
-إضافة صفحة NotFound للروابط غير الموجودة.
Language Support:
- التبديل بين الإنجليزية والعربية.
- الترجمة باستخدام @ngx-translate/core و @ngx-translate/http-loader.
التقنيات المستخدمة (Technologies Used):
- Frontend Framework: Angular
- Styling: SCSS + Media Queries
- Carousel: ngx-owl-carousel
- Notifications: ngx-toaster
- Dependency Injection: @Inject Decorator
- Form Handling: Reactive Forms باستخدام FormBuilder
- API Integration: ربط مع الـ Backend API لإدارة المنتجات، المفضلة، العربة، والدفع.
- Routing: Angular Routing
- Guards: حماية المسارات للمستخدمين المسجلين
- Translation: @ngx-translate/core + @ngx-translate/http-loader
طريقة الاستخدام (Usage):
- قم بإنشاء حساب أو تسجيل الدخول.
- تصفح المنتجات حسب التصنيفات.
- قم بالتبديل بين اللغة الإنجليزية والعربية من خلال أداة اختيار اللغة.
- أضف المنتجات إلى Cart أو Wishlist.
- قم بإدارة العربة والتوجه لصفحة الدفع (Checkout).
- أكمل عملية الشراء عبر بوابة الدفع المدمجة.
