منصة تجارة إلكترونية E-Commerce

نظرة عامة (Overview):

مشروع "MegaMart" هو واجهة متجر إلكتروني حديثة ومتجاوبة تم بناؤها باستخدام Next.js 16 (App Router) و React 19. صُمم المشروع لتوفير تجربة تسوق سلسة مع توجيه ديناميكي للمنتجات (Dynamic Routing)، وسلة تسوق كاملة الوظائف تُدار بواسطة Zustand، بالإضافة إلى تكامل مع Firebase للمصادقة. يعرض التطبيق حالياً المنتجات عبر مخزن بيانات JSON ثابت (Static JSON store) كتحضير للربط الكامل مع الواجهة الخلفية (Backend).

​النطاق والأهداف (Scope & Objectives):

يقدم هذا المشروع واجهة أمامية (Frontend) عالية الأداء تمكّن المستخدمين من تصفح فئات المنتجات، وعرض صفحات التفاصيل لكل عنصر، وإدارة سلة تسوق مستمرة (تحفظ البيانات)، كل ذلك ضمن تصميم متجاوب يضمن تنقلاً سلساً عبر مختلف الأجهزة.

​التقنيات المستخدمة (Tech Stack):

​Next.js App Router (v16.1.1): للتوجيه القائم على الملفات (File-based routing) والعرض من جانب الخادم (SSR).

​React 19 & Tailwind CSS: لبناء واجهة مستخدم حديثة، متجاوبة، وتعتمد على نهج الـ Utility-first.

​Zustand: لإدارة الحالة العامة (Global State Management) بشكل خفيف ومستمر (لسلة التسوق).

​Firebase: تم دمجها لإدارة مصادقة المستخدمين وخدمات الواجهة الخلفية.

​Splide.js: لإنشاء شرائح عرض (Carousels) للمنتجات متجاوبة وتدعم اللمس.

​الميزات الرئيسية (Key Features):

​توجيه ديناميكي (Dynamic Routing): إنشاء تلقائي لصفحات الفئات وتفاصيل المنتجات.

​سلة تسوق مستمرة (Persistent Shopping Cart): إمكانية إضافة وإزالة وتعديل الكميات مع الحفاظ على البيانات عبر التخزين المحلي (Local Storage) باستخدام Zustand.

​تصميم متجاوب (Responsive Design): تخطيط مُحسّن ليعمل بكفاءة على الهواتف المحمولة وأجهزة سطح المكتب باستخدام Tailwind CSS.

​واجهة مستخدم تفاعلية (Interactive UI): تتضمن شرائح عرض للمنتجات ومكونات معيارية (Modular Components) لأفضل الفئات والعلامات التجارية.

​جاهز للمصادقة (Authentication Ready): مُعد مسبقاً للعمل مع Firebase Authentication لإدارة المستخدمين.

​جلب البيانات من جانب العميل (Client-side Data Fetching): تحميل بيانات المنتجات بكفاءة من المخازن المحلية.

رابط المعاينة: https://megamart1.vercel....

رابط المشروع عل Github: https://github.com/Yousse...