معرض منتجات تفاعلي بتصاميم عصرية - Angular Product Showcase

هذا المشروع ليس مجرد عرض لبيانات، بل هو تجربة بصرية تُبرز قوة إطار العمل Angular في بناء واجهات مستخدم غنية (Rich UI). قمت بتطوير هذا التطبيق للتركيز بشكل أساسي على جماليات التصميم (Aesthetics)، سلاسة الحركة (Animations)، وتقديم تجربة تصفح ممتعة للمستخدم.

يعتمد التطبيق على جلب البيانات حياً من (FakeStore API) وعرضها داخل قالب تصميمي يعتني بأدق التفاصيل البصرية.

أبرز ما يميز هذا العمل:

تصميم بصري متقن (High-End UI): الابتعاد عن التصاميم التقليدية واستخدام تنسيقات CSS حديثة مع الاهتمام بالمسافات (Spacing)، التباين اللوني، والخطوط لتقديم واجهة مريحة وأنيقة.

تفاعلية وحركة (Motion & Animations): توظيف تقنيات (Angular Animations & CSS Transitions) لإضافة روح للموقع، حيث تتحرك البطاقات وتظهر العناصر بشكل انسيابي عند التمرير (Scroll) أو التفاعل (Hover)، مما يكسر جمود التصفح.

الربط التقني الذكي (Smart API Consumption): استخدام HttpClient و RxJS لجلب المنتجات وعرضها بسرعة فائقة، مع معالجة حالات التحميل (Loading States) لتظهر بشكل جميل للمستخدم قبل عرض المحتوى.

متجاوب تماماً (Fully Responsive): تجربة استخدام مثالية سواء كنت تتصفح من شاشة هاتف صغيرة أو شاشة ديسكتوب عريضة، حيث تعيد العناصر ترتيب نفسها تلقائياً.

المهارات التقنية المستعرضة:

Frontend: Angular (Components, Services, Directives).

Styling: Modern CSS3, Flexbox/Grid Layouts.

Animations: Keyframes, Transitions, Hover Effects.

API Integration: RESTful Services.