Steam Clone - For educational Purposes (e-commerce)

Red-Steam هو مشروع ويب تم تطويره بالكامل بشكل فردي ليحاكي تجربة منصة الألعاب الشهيرة Steam، يشمل كلًا من الواجهة الأمامية (Front-end) والواجهة الخلفية (Back-end)، باستخدام Next.js 15 وReact 19 في الـ Front-end، وNestJS مع TypeORM في الـ Back-end. يعتمد المشروع على هيكلية موديولية وقابلة للتوسّع لضمان الأداء العالي وسهولة الصيانة. تم تطوير التصميم باستخدام SCSS (مع Modular Structure) لتوفير تجربة بصرية متقدمة.

المزايا الرئيسية في الواجهة الأمامية

- بنية موديولية متقدّمة: يعتمد المشروع على هيكلية منظمة وقابلة للصيانة، مما يسهّل توسيع الميزات دون التأثير على الأداء.

- إدارة الحالة المتقدّمة: استخدام Redux Toolkit وRTK Query مع Async Thunks وListeners لضمان إدارة بيانات مرنة وسريعة التفاعل، مع تحسين تجربة المستخدم عبر تحديثات في الوقت الفعلي.

تحسين تجربة المستخدم (UX) والأداء:

- Skeleton Loaders لتحسين تجربة التحميل وتوفير استجابة سلسة.

- Toasts نظام إشعارات ديناميكي يعرض رسائل نجاح أو أخطاء بشكل مباشر عند تنفيذ العمليات مثل تسجيل الدخول، إدارة الحساب، أو إضافة الألعاب إلى المفضلة، مما يحسّن تجربة المستخدم ويوفّر تفاعلًا سلسًا مع التطبيق.

- Lazy Loading للمكونات غير الضرورية لتسريع الأداء.

- Next.js لتحسين SEO والاستفادة من نظام التوجيه المبني على الملفات (File-based Routing).

نظام تسجيل دخول متقدّم:

- تسجيل الدخول والتسجيل مع دعم المصادقة المتقدمة.

- إعدادات الحساب (Account Settings) لتحديث البيانات الشخصية وإدارة الأمان.

محرك بحث متقدّم متكامل مع الـ Back-end:

- فلاتر متقدّمة وتصنيف الألعاب بناءً على الفئات، التقييمات، السعر، والعروض.

- تحسين استعلامات البحث لجلب البيانات بسرعة ودقة.

مشغّل وسائط مخصص (Custom Media Player):

- دعم تشغيل الفيديوهات والصور داخل المنصة.

- ميزات متقدمة مثل التحكم في التشغيل، ملء الشاشة، والانتقال الذكي بين الوسائط.

لوحة تحكم إدارية متكاملة (Admin Panel):

- إدارة العروض، إنشاء وتحديث الألعاب، إضافة الميزات والتحكم بالمحتوى.

- مراجعة التقييمات وإدارتها للحفاظ على جودة المحتوى.

نظام مراجعات متكامل (Reviews System):

- إمكانية ترك تقييمات وتعليقات على الألعاب.

- تصنيف المراجعات بناءً على التفاعل والتقييمات.

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

- Next.js 15 لتحسين الأداء وتحسين SEO.

- React 19 لبناء واجهات تفاعلية عالية الأداء.

- SCSS (Modular Structure) لتنسيق متقدّم وقابل للصيانة.

- Redux Toolkit + RTK Query + Async Thunks + Listeners لإدارة حالة متطورة.

- TypeScript لضمان كتابة كود قوي وقابل للتوسّع.

- Skeleton Loaders & Lazy Loading لتحسين تجربة المستخدم والأداء.

- Toasts لتحسين التجربة تجربة المستخدم ويوفّر تفاعلًا سلسًا مع التطبيق.

- Custom Hooks لإعادة استخدام منطق الأعمال وتحسين كفاءة التطبيق.

- Next.js File-based Routing لتنظيم أفضل للتطبيق وتسهيل الصيانة.

Red-Steam هو مشروع متكامل يعكس أفضل ممارسات تطوير الواجهات الأمامية والخلفية باستخدام أحدث التقنيات، مع تركيز قوي على التجربة البصرية والأداء السلس.