تجارة إلكترونية
لوحة إدارة
دفع إلكتروني

Africa Toner

القطاع: التجارة
سُلّم في شكل: موقع إلكتروني
لوحة إدارة
السنة: 2025
الموقع: زيارة الموقعafricatoner.com(يُفتح في علامة تبويب جديدة)

“Vos cartouches, livrées demain.”

(المشروع)

متجر إلكتروني متكامل لخراطيش الطباعة المتوافقة في السوق المغربية: كتالوج، وسلة، ودفع عبر Stripe وPayPal، ولوحة إدارة كاملة، وأداة موجّهة لإيجاد الخرطوشة حسب الطابعة، ضمن تطبيق واحد بـ Laravel وReact.

(السياق)

متجر متكامل من البداية إلى النهاية.

يبيع Africa Toner خراطيش متوافقة للأفراد والمهنيين. يتصفّح الزبائن المنتجات ويقارنونها، ويديرون سلّتهم، ويدفعون عبر Stripe أو PayPal، ويتابعون طلباتهم، ويطلبون الخراطيش غير المتوفرة في الكتالوج.

خلف واجهة المتجر فضاء إدارة كامل للمنتجات والعلامات والطلبات والمستخدمين وطلبات الخراطيش، إلى جانب أداة البحث حسب الطابعة. ويعمل كل ذلك في تطبيق Laravel 13 واحد يعرض React 19 عبر Inertia.

(أرقام أساسية)

بوابتا دفع: 2
وحدات في لوحة الإدارة: 6
تسجيل دخول بنقرة واحدة: Google
تسعير التوصيل: حسب المدينة

(المنظومة)

القرارات التي صنعت المشروع

تطبيق واحد دون API منفصل
تعرض متحكّمات Laravel صفحات React عبر Inertia.js، فلا حاجة إلى API ثانٍ يجب صيانته. وتُشارك المسارات المسمّاة مع المتصفح.
بنية موحّدة عن قصد
مسارات مفصولة حسب الدور
للصفحات العامة، وفضاء الزبون (الدفع، الطلبات، الملف الشخصي)، وتسجيل الدخول، والإدارة، طبقة وسيطة خاصة بكل منها.
التحكّم في الوصول
بوابتا دفع
ربطنا Stripe وPayPal معًا بمسار الطلب، فيختار الزبون بينهما بينما يعمل خلفهما مسار طلب واحد.
دفع مرن
حالة هجينة في المتصفح
يتولّى Redux Toolkit حالة الواجهة والسلة، ويتولّى React Query بيانات الخادم، وتُخفي المعرّفات المشفّرة الأرقام التسلسلية من الروابط.
إدارة عملية للحالة

(كيف يعمل)

مسار الطلب

من الكتالوج إلى السلة
يصفّي الزبائن الكتالوج بالبحث الفوري أو حسب العلامة أو الطابعة، ويقارنون المنتجات ويضيفونها إلى سلة محفوظة.
الدفع
يجمع مسار الدفع العنوان ومدينة التوصيل بتسعير خاص بكل مدينة، ثم يوجّه الدفع إلى Stripe أو PayPal.
الطلب ولوحة الإدارة
يُنشأ الطلب بمرجع مُموَّه، ويدير الفريق المنتجات والعلامات والطلبات والمستخدمين والطلبات الخاصة من لوحة التحكّم.